Galleriffic и Loupe увеличивают выпуск

Я использую два плагина, которые независимо работают правильно. Galleriffic и Loupe - это два плагина. Я пытаюсь сделать так, чтобы большое изображение в Galleriffic также имело эффект увеличения при наведении, для чего и нужен Loupe. Я должен был добавить одну строку кода newSlide.find('a img').addClass('magnifyPic'); к плагину Galleriffic, чтобы получить класс на изображении, который должен использовать Лупа, чтобы активировать эффект увеличения. Ниже приведены два вызова для плагинов.

jQuery(document).ready(function($) {

  var gallery = $('#thumbs').galleriffic({
       'imageContainerSel': '#bigPics',
       'enableBottomPager': false,
       'renderNavControls': false,
       'renderSSControls':  false,
       'enableHistory':     false,
  });

  $('.magnifyPic').loupe({
     'default_zoom': 300,
     'shape' : 'rounded',
     'default_size' : 160,
     'glossy' : false,
     'drop_shadow' : false 
  });

});

Проблема в том, что абсолютно ничего не происходит при наведении курсора на большое изображение. Независимо от того, что два плагина функционируют правильно, но, похоже, не хотят работать вместе. Если я правильно понимаю, плагин Galleriffic может принимать функции обратного вызова, функции и т. Д., Поэтому я предполагаю, что мой вопрос: как мне интегрировать вызов Loupe в вызов Gallerific? Или это правильный способ заставить Лупу работать только с большим изображением в галерее Galleriffic? Я пытался удалить, добавить, изменить строки кода для обоих плагинов, но не могу заставить их работать вместе.

1 ответ

Решение

Ищи image.src в jquery.galleriffic.js. Он должен появиться дважды (около строки № 338 и № 611). Добавьте следующую строку после image.src = ...:

image.src = ...
$(image).loupe();

Примечание: я также добавил это в свой CSS. Перед этим добавлением этого правила CSS лупа вызывала очень незначительное увеличение (возможно, я неправильно использовал плагин?):

​.loupe img {
  width:800px;
  height:800px;    
}​

Я разместил пример на github. Вы можете попробовать это здесь http://ted-piotrowski.github.com/example-gallerific/

Другие вопросы по тегам