как вызвать галочку в галерее fancybox-thumbs - PullRequest
1 голос
/ 11 января 2012

Кто-нибудь пытался активировать галерею миниатюр fancybox с помощью кнопки или щелчка якоря. В настоящее время можно использовать fancybox, нажав на изображение, которое приведет вас к всплывающей галерее изображений. В моем состоянии я хочу простую кнопку или HTMLпривязка, чтобы при нажатии пользователем кнопки или привязки отображалась модальная всплывающая галерея.Также мои изображения будут поступать из БД, есть идеи, как это сделать ???

Код с сайта fancybox, который запускается при нажатии на изображение

$('.fancybox-thumbs').fancybox({
            prevEffect: 'none',
            nextEffect: 'none',

            closeBtn: false,
            arrows: false,
            nextClick: true,

            helpers: {
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });

Обновлен рабочий скрипт:

 $('a.gallery').click(function () {
        $('.fancybox-thumb').click();
    });

Ответы [ 3 ]

2 голосов
/ 11 января 2012

Я думал об этом (так как ваш предыдущий вопрос) и, возможно, вы могли бы попытаться смоделировать щелчок в первом классифицированном элементе .fancybox-thumbs

$('#gallery').click(function(){
      $('.fancybox-thumbs:first').click();
});

Дайте мне знать

0 голосов
/ 11 января 2012

Может быть, это работает:

<a class="fancybox-thumb" rel="fancybox-thumb" href="link_to_large_image.png" title="Image title">
<img src="link_to_small_image.png" alt="" />
</a>
0 голосов
/ 11 января 2012

вы можете сделать что-то вроде этого: Определить массив со свойствами и изображениями

var galPhotos = [{
        href : '../img/galeria/fondo1.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo2.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo3.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo4.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } }];

, а затем просто

$('a#gallery').live('click',function(){
     $.fancybox(galPhotos);
});

Не проверял его для вашей конфигурации, ноу меня есть (и работает отлично):

var galPhotos = [
                    {href : '../img/galeria/fondo1.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
                    {href : '../img/galeria/fondo2.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo3.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
                    {href : '../img/galeria/fondo4.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo5.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo6.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'} 
                ];

или просто симулируйте щелчок для класса

$('#gallery').click(function(){
      $('.fancybox-thumbs:first').click();
});

, дайте мне знать, как он прошел

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...