Как запускать fancybox-thumbs gallery on anchor click

Попробуйте активировать галерею миниатюр fancybox с помощью кнопки или щелчка привязки. В настоящее время вы можете использовать fancybox, щелкнув изображение, которое приведет вас во всплывающую галерею изображений, In мое условие: я хочу простую кнопку или привязку html, так что, когда пользователь нажимает на кнопку или привязывает модальную всплывающую галерею, она должна отображаться. Также мои изображения будут поступать из db, Любые идеи, как это сделать ???Как запускать fancybox-thumbs gallery on anchor click

код с сайта 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(); 
    });

источник

2012-01-11 Mr A

Вы хотите показать галерею приятелей при нажатии на галерею #? – zdrsh

да именно то, что я ищу –

Возможно, вы ошибетесь. Обычно это делается путем присвоения атрибуту href тэга anchor тега div, который вы хотите наложить в свой Fancybox. – meagar

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

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

Позвольте мне знать,

источник

2012-01-11 17:19:03

ну ничего не происходит сейчас, в d выше скрипта, d fancybox не называется –

ошибка в firebug? –

нет ошибок ...... –

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

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(); 
});

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

источник

2012-01-11 13:51:18

но мои изображения будут заполняться из БД –

его просто отображать первое изображение, не могу видеть эскизы –

Можете ли вы дать ссылку тестирования ? –

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

<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>

источник

2012-01-11 17:22:10 Jeffrey

Как запускать fancybox-thumbs gallery on anchor click

ответ

Смежные вопросы