Всем привет!
Я уже третий день пытаюсь сделать изменение размера изображения по клику. Пока что получилось только открывать оригинальное изображение в новом попапе без возможности вернуться к изначальному:
$('.gallery a').fancybox({
hideOnContentClick: false,
overlayShow: true,
overlayOpacity: 0.5,
zoomSpeedIn: 500,
zoomSpeedOut: 300,
titlePosition: 'inside',
cyclic: true,
onComplete: function(){
$('#fancybox-img').fancybox({
overlayShow: true,
overlayOpacity: 0.5,
zoomSpeedIn: 500,
zoomSpeedOut: 300,
hideOnContentClick: true,
autoScale: false,
titlePosition: 'inside',
cyclic: true
});
}
HTML
<ul>
<li>
<p class="gallery">
<a href="/images/content/img.jpeg">
<span id="selection_index9" class="selection_index"></span>Посмотреть отзыв
</a>
</p>
</li>
<li>...</li>
<li>...</li>
</ul>
<div id="fancybox-wrap" style="opacity: 1; width: 605px; height: 817px; top: 420px; left: 309px; display: block;">
<div id="fancybox-inner" style="top: 45px; left: 45px; width: 515px; height: 729px; overflow: hidden; display: block;">
<img id="fancybox-img" src="/images/content/img.jpeg">
</div>
<a id="fancybox-close" style="display: inline;"></a>
<a href="javascript:;" id="fancybox-left" style="display: inline;">
<span class="fancy-ico" id="fancybox-left-ico">
</span>
</a>
<a href="javascript:;" id="fancybox-right" style="display: inline;">
<span class="fancy-ico" id="fancybox-right-ico">
</span>
</a>
<div id="fancybox-title" class="fancybox-title-inside" style="width: 515px; padding-left: 45px; padding-right: 45px; display: block;">
<span>Lorem ipsum dolor sit amet
</span>
</div>
</div>
Я хочу что-то вроде: $.toggle(autoScale: false). Я не слишком силен в js и буду очень рад, если кто-нибудь сможет помочь :)