artur4ek94
@artur4ek94
ПАжилой программист

Интеграция FancyBox со слайдером картинок?

Доброго времени суток!
Нужно было сделать вот такую галерею со слайдером и всплывающим окном.
5a81f751aff4a493772692.png
Использовал готовый слайдер Elastislide с правками по стилям css и плагин FancyBox для всплывающего окна при нажатии на главную картинку слайдера(не превъюшки).
<div class="gallery">
	<div class="image-preview">
			<a rel="group" href="./images/large/slide1.jpg" ><img id="preview" src="./images/large/slide1.jpg"><div class="icon"></div></a>
</div>	
<ul id="carousel" class="elastislide-list">
<li data-preview="./images/large/slide1.jpg"><a rel="group" href="./images/large/slide1.jpg"><img src="./images/small/slide1.jpg" alt="slide1" /></a></li>
<li data-preview="./images/large/slide2.jpg"><a rel="group" href="./images/large/slide2.jpg"><img src="./images/small/slide2.jpg" alt="slide2" /></a></li>
<li data-preview="./images/large/slide3.jpg"><a rel="group" href="./images/large/slide3.jpg"><img src="./images/small/slide3.jpg" alt="slide3" /></a></li>
<li data-preview="./images/large/slide4.jpg"><a rel="group" href="./images/large/slide4.jpg"><img src="./images/small/slide1.jpg" alt="slide4" /></a></li>
<li data-preview="./images/large/slide5.jpg"><a rel="group" href="./images/large/slide5.jpg"><img src="./images/small/slide2.jpg" alt="slide5" /></a></li>
	</ul>
</div>

FancyBox работает для множества фотографий через атрибут
rel="group"
у ссылок.
var current = 0,
$preview = $( '#preview' ),
$carouselEl = $( '#carousel' ),
$carouselItems = $carouselEl.children(),
carousel = $carouselEl.elastislide( {
    current : current,
    minItems : 3,
    onClick : function( el, pos, evt ) {
        changeImage( el, pos );
        evt.preventDefault();
    },
    onReady : function() {
        changeImage( $carouselItems.eq( current ), current );       
    }
} );

function changeImage( el, pos ) {
$preview.attr( 'src', el.data( 'preview' ) );
$carouselItems.removeClass( 'current-img' );
el.addClass( 'current-img' );
carousel.setCurrent( pos );
}

$(document).ready(function() {
    $("a[rel=group]").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none'
    });
});

Но тогда при нажатии на миниатюру открывается всплывающее окно, а по логике модальное окно должно открываться при нажатии только на главное фото слайдера.
а если убрать у ссылок миниатюр атрибут rel="group" то при нажатии на главную фотографию слайдера - то фотографии не листаются.
Как можно решить данную проблему?
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
KickeRocK
@KickeRocK
Atom Power!
Так запускайте фэнсибокс не по "rel'у", например, дайте класс fancybox, тому что вам нужно чтобы открывалось:
<div class="image-preview">
      <a class="fancybox" rel="group" href="./images/large/slide1.jpg" ><img id="preview" src="./images/large/slide1.jpg"><div class="icon"></div></a>
</div>

$("a.fancybox").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none'
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Spotware Systems Лимассол
от 3 500 до 3 800 eur.
от 80 000 до 160 000 руб.
14 авг. 2018, в 18:01
12000 руб./за проект
14 авг. 2018, в 17:33
5000 руб./за проект
14 авг. 2018, в 16:33
1000 руб./за проект