Fancybox 1.3.1 переключение размера изображения
Всем привет!
Я уже третий день пытаюсь сделать изменение размера изображения по клику. Пока что, получилось только открывать оригинальное изображение в новом попапе без возможности вернуться к изначальному: $('.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 }); } Я хочу что-то вроде: $.toggle(autoScale: false). Я не слишком силен в js и буду очень рад, если кто-нибудь сможет помочь:) |
Артем163,
может макет, а не обрывок кода? html css самим догадатся, какие они у вас? |
<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> |
Артем163,
ок уже лучше ... но так и непонял Цитата:
Цитата:
|
Цитата:
|
Артем163,
танцы с бубнами ... кликаем по ссылке, кликаем по всплывшей картинке <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css"> <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> <style type='text/css'> .min{ width: 300px; } #fancybox-inner { display: none; } </style> <script type='text/javascript'> $(function(){ n = 0; var arr = [{ href : '#fancybox-inner', title : 'max', aspectRatio : false, fitToView : true },{href : '#fancybox-inner', title : 'min', aspectRatio : true, fitToView : false }] $("#fancybox-img, .gallery a").click(function() { $("#fancybox-img").toggleClass('min'); n = ++n%2 $.fancybox.open(arr[n]) }) }); </script> </head> <body> <ul> <li> <p class="gallery"> <a href="#fancybox-inner"> <span id="selection_index9" class="selection_index"></span>Посмотреть отзыв </a> </p> </li> <li>...</li> <li>...</li> </ul> <div id="fancybox-wrap" > <div id="fancybox-inner" > <img id="fancybox-img" src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg"> </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> </body> </html> |
рони, проверил на jsfiddle- скрипт работает, вставил на сайт - по ссылке открывает просто картинку, в консоле пишет:
Resource interpreted as Document but transferred with MIME type image/jpeg |
Артем163,
смените fancybox на тот что в коде здесь - у вас старая версия |
рони, я переподключил fancy и вашу версию jQuery- по прежнему эта ошибка и открывается картинка :(
|
Артем163,
смотреть надо на месте |
Часовой пояс GMT +3, время: 04:41. |