Fancybox открывает окно галереи, но первое изображение не работает - PullRequest
Новая
       15

Fancybox открывает окно галереи, но первое изображение не работает

0 голосов
/ 20 декабря 2011

Я немного запутался с использованием fancybox, и веб-сайт на самом деле не помогает мне с путаницей.

Цитата с сайта:

Примечание. Галереи создаются из элементов с одинаковым значением "rel". тег, пример:

Итак, у меня есть этот скрытый div, где все изображения имеют атрибут rel галереи: 

<div id="gallery" class="none">
  <img src="img/fondo1.jpg" alt="" rel="gallery" />
  <img src="img/fondo2.jpg" alt="" rel="gallery" />
  <img src="img/fondo3.jpg" alt="" rel="gallery" />
  <img src="img/fondo4.jpg" alt="" rel="gallery" />
</div>

Ссылка: 

<a id="galleryBtn" class="galeria" href="#gallery">Gallery</a>

и мой триггер: 

$('a#galleryBtn').fancybox({
    'transitionIn'  :   'elastic',
    /*'transitionOut'   :   'elastic',*/
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    /*'overlayShow' :   false*/
});

Ссылка открывает окно фантазии, но содержит все изображения с полосой прокрутки, а не отдельные изображения с кнопками галереи «Вперед» и «Назад».

Так, что я делаю не так? http://jsfiddle.net/wkP79/5/

1 Ответ

1 голос
/ 20 декабря 2011

Это похоже на работу: 

<div>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo1.jpg">Gallery</a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo2.jpg"></a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo3.jpg"></a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo4.jpg"></a>
</div>

И код JavaScript: 

$(document).ready(function() {
   $('.gallery').fancybox({
       'transitionIn': 'elastic',
       'speedIn': 600, 
       'speedOut': 200, 
   });
});

Демонстрация: http://jsfiddle.net/CzMMB/

...