FlexSlider кликните по картинке, чтобы открыть LightBox как способность
У меня есть плагин FlexSlider/Carousel, который отлично работает на моем сайте. Теперь я хотел бы иметь возможность щелкнуть изображение Slider, чтобы открыть лайтбокс, похожий на плагин, чтобы я мог "взорвать" изображения, чтобы иметь возможность видеть больше деталей. Я прочитал и попытался реализовать атрибут lightbox: true, который звучит так, как будто он должен делать то, что я ищу, но, похоже, он не работает. Я не могу нажать на изображение слайдера, чтобы сделать что-нибудь.
<div id="main" role="main">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
</section>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="~/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
},
lightbox: true
});
});
2 ответа
На всякий случай, если это кому-то нужно. Попробуй это:
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<a href="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" data-lightbox="1000 500">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</a>
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul> </div>
Это тот, который работал для меня - я также добавил target="blank", чтобы открыть новое окно.
Решением, которое я использую в текущем проекте WordPress, является "Responsive Lightbox" от dFactory. Он использует HTML-элемент rel="lightbox" в качестве хука. Мгновенный лайтбокс галерей!
<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul>
</div>