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/