![](/img/trans.png)
[英]Full width image carousel that can center selected image and partially show other images in gallery
[英]Lightbox gallery navigation images: How to center selected active image
您好,我在 Django 应用程序上使用Lightbox gallery
。 当用户单击其中一个图像时,将出现画廊,其中包含main selected image
、 next
和prev
一个功能图标以及导航部分上的所有图像。 我正在尝试通过浮动到屏幕左侧来center
活动的选定图像。
代码:
<script type="text/javascript">
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
{% endblock %}
<div id="myModal" class="modal">
<div class="close-modal-container">
<a href="#" class="btn d-flex align-items-center text-light" onclick="closeModal()" aria-label="{% trans "Close" %}">
<span class="close-icon">{% icon 'CLOSE' 20 version='v2' %}</span>
<span class="gr-link2 ml-2">{% trans "Close" %}</span>
</a>
</div>
<div class="body-container">
{% for file in files %}
{% if file.is_image %}
<div class="mySlides">
<div class="image-icon-cont">
<div class="d-flex flex-column">
<img class="modal-main-img" src="{{ file.file.url }}" alt="{{ file.tag }}">
<div class="my-1 text-light">
<span class="mr-1 subtitle1">{{ forloop.counter }} / {{ files|length }}</span>
<span class="subtitle1">{{ file.tag }}</span>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">{% icon "ARROW_LEFT" 24 version='v2' %}</a>
<a class="next" onclick="plusSlides(1)">{% icon "ARROW_RIGHT" 24 version='v2' %}</a>
</div>
</div>
{% endif %}
{% endfor %}
<div class="image-file-bottom-slides">
{% for file in files %}
{% if file.is_image %}
<img class="demo cursor slide-image mx-2" src="{{ file.file.url }}" alt="{{ file.tag }}" onclick="currentSlide({{ forloop.counter }})">
{% endif %}
{% endfor %}
</div>
</div>
</div>
/* The Modal (background) */
.modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: #212121;
transform: translate(-50%, -50%);
max-height: none;
max-width: 100%;
::-webkit-scrollbar{
display: none !important;
}
}
/* Next & previous buttons */
.prev {
position: absolute;
cursor: pointer;
padding: 10px;
background-color: #FFFFFF;
color: #212121;
border-radius: 3px;
left: 15px;
top: 50%;
transform: translate(-50%, -50%);
}
.next {
position: absolute;
cursor: pointer;
padding: 10px;
background-color: #FFFFFF;
color: #212121;
border-radius: 3px;
right: -30px;
top: 50%;
transform: translate(-50%, -50%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: #F2F2F2;
}
.modal-main-img {
width: 70vw;
height: 70vh;
object-fit: cover;
}
.active,
.demo:hover {
opacity: 0.6 !important;
}
.modal-main-img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.slide-image{
width: 137.67px;
height: 94px;
cursor: pointer;
opacity: 1;
border-radius: 3px;
}
.image-file-bottom-slides{
display: flex;
background-color: #212121;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
justify-content: flex-end;
}
.image-file-bottom-slides::-webkit-scrollbar {
display: none;
}
.mySlides{
background-color: #212121;
}
.image-icon-cont{
position: relative;
display: flex;
justify-content: center;
}
.body-container{
padding: 40px;
}
如何在图像导航部分将active
选定图像居中并将图像float images to the left
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.