How do I change the preview layout from horizontal to vertical in Fotorama 4?
How to change the location of the preview to vertical (left preview, right photo).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.css" rel="stylesheet" />
</head>
<body>
<div class="fotorama" data-nav="thumbs" data-transition="crossfade">
<img src="https://picsum.photos/200/300">
<img src="http://lorempixel.com/200/300/">
<img src="https://loremflickr.com/200/300">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.js"></script>
</body>
</html>
0
1 answers
.fotorama {
max-width: 100%;
display: block;
padding-left: 100px;
}
.fotorama.fotorama--fullscreen .zoomImg {
visibility: hidden;
}
.fotorama.fotorama--fullscreen .fotorama__html > div {
height: 100%;
text-align: center;
}
.fotorama.fotorama--fullscreen .fotorama__html > div img {
max-height: 100%;
}
.fotorama .fotorama__fullscreen-icon {
background: #000;
opacity: 1 !important;
transform: none !important;
}
/* .fotorama__loaded--img img{max-width:100%;} */
.fotorama__nav-wrap {
transform: rotate(90deg);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.fotorama__nav-wrap .fotorama__nav {
text-align: left;
}
.fotorama__nav-wrap .fotorama__img {
transform: rotate(270deg);
}
.fotorama__html > div {
width: 100%;
}
.fotorama__html > div img {
max-width: 100%;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.css" rel="stylesheet" />
</head>
<body>
<div class="fotorama" data-nav="thumbs" data-transition="crossfade">
<img src="https://picsum.photos/200/300">
<img src="http://lorempixel.com/200/300/">
<img src="https://loremflickr.com/200/300">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.js"></script>
</body>
</html>
0
Author: Stanislav, 2019-06-21 11:21:24