2015-05-06 2 views
2

Как открыть ту же галерею, что «.fancybox» открывается, когда я нажимаю кнопку «.fancybox-button», сохраняя при этом одинаковые настройки причудливого окна?FancyBox открыть ту же галерею из нескольких ссылок

<div class="custom-thumbnail"><a class="fancybox" rel="group" href="Gallery/Image3.jpg"><img title="Bird Caption" src="Gallery/_t/testImage3_jpg.jpg"></a></div> 
<div class="custom-caption"><a class="fancybox-button"  rel="fancybox-button" href="Gallery/testImage3.jpg">Click here to open gallery</a></div> 

Вот мой код для управления FancyBox атрибуты

 jQuery(".fancybox").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '100%', 
     height  : '100%', 
     title: this.title, 
     wmode: 'transparent', 
     allowfullscreen : 'true', 
     allowscriptaccess : 'always', 
     beforeLoad: function() { 
      this.title = jQuery(this.element).find('img').attr('title'); 
     }, 
     next : { 
      13 : 'left', // enter 
      34 : 'up', // page down 
      39 : 'left', // right arrow 
      40 : 'up' // down arrow 
     }, 
     prev : { 
      8 : 'right', // backspace 
      33 : 'down', // page up 
      37 : 'right', // left arrow 
      38 : 'down' // up arrow 
     }, 
     close : [27], // escape key 

     helpers: { 
      title : { 
       type : 'inside' // 'float', 'inside', 'outside' or 'over' 
      }, 
      overlay : { 
       showEarly : false 
      }, 
      thumbs : { 
       width: 50, 
       height: 50 
      } 
     } 
    }); 

ответ

0

EDIT: Благодаря @JFK, я наконец-то понял, что это вопрос OP в. И да, решение OP кажется прекрасным :)

FancyBox активируется по определению класса fancybox. Итак, причина, по которой ваш якорный тег открывает окно fancybox (внутри внутри div.custom-thumbnail), состоит в том, что он имеет класс fancybox. Если у вас есть разные атрибуты css, определенные для вашего fancybox-button, вы можете просто добавить fancybox класс рядом с ним. Или иначе, просто измените fancybox-button на fancybox, и вам должно быть хорошо идти.

Я создал для вас fiddle. Единственное, что я изменил, это изменение класса «fancybox-button» на «fancybox», и оно работает.

Добавляя отдельный класс fancybox рядом с классом кнопок fancybox, также работает. См. Обновление fiddle.

+0

Это дублирует изображения в диалоговом окне. – Hectooorr

+0

Я приготовил для вас скрипку. См. Обновленный ответ. – ilter

+0

«fancybox-button» с добавлением «fancy-box» не открывает галерею с теми же свойствами, что и ссылка внутри «custom-thumbnail». – Hectooorr

2

Это сработало для меня. Что вы, ребята, думаете об этом решении?

jQuery('.fancybox-button').click(function(){ 
     jQuery(this).parent().prev().find('.fancybox').trigger('click'); 
     return false; 
    }); 
+0

Вы делаете вещи намного сложнее, чем должны. Вам просто нужно использовать класс «fancybox». Не «причудливый», как вы писали в комментарии моего ответа. Ваше решение может работать, но это не выход! Пожалуйста, просто прочитайте мой ответ еще раз и попытайтесь понять, как активируется плагин FancyBox. – ilter

+0

Ваше решение - именно то, что вам нужно сделать. См. Аналогичный ответ http://stackoverflow.com/a/10838140/1055987 – JFK

+0

@ilter: это решение - путь. – JFK

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