Search the Community
Showing results for tags 'easyzoom'.
Found 1 result
-
Здравствуйте. Задумка: использовать плагин (jquery) Easyzoom на галерее картинок, предназначенный для показа увеличенного фрагмента изображения. Лупа, короче. Работа плагина следующая. <a href='src_pic_lrg'><img src='src_pic_sml'></a>- при наведении курсора на картинку(точнее на ссылку) плагин берет href, в котором указан большой вариант картинки и показывает ее в отдельном div. Это все отлично. но я имею набор картинок, которые переключаются в одном div. Проблема в том, что как ни переключай ссылки, все равно считываться будет href, который написан последним. то есть не переключается вовсе. я переключал zIndex div'ов, в каждом из которых помещено по ссылке. экспериментировал с display:none на div и самих ссылках. Все равно последний href как насквозь все собой пронзает. Может идейку какую кто подскажет, как с картинками a href переключать. у cloudzoom это реализовано каким-то макаром, но я так и не врубился как... привожу минимальный, но аналогичный по механизму код . <!DOCTYPE html><html><head><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="js/easyzoom.js"></script><script type='text/javascript'>jQuery(function($){$('a.zoom').easyZoom();});</script><style> #myDIV { position: absolute; top: 130px; left: 30px; width: 420px; height: 310px; background-color: lightblue; border: 1px solid black;} #DIV2 { position: absolute; top: 130px; left: 30px; width: 420px; height: 310px; background-color: coral; border: 1px solid black; }#easy_zoom{width:600px;height:400px; border:5px solid #eee;background:#fff;color:#333;position:absolute;top:60px;left:500px;overflow:hidden;-moz-box-shadow:0 0 10px #777;-webkit-box-shadow:0 0 10px #777;box-shadow:0 0 10px #777;line-height:400px;text-align:center;}</style></head><body><button onclick="myFunc()">меняем</button><div id="DIV2"><a id='forsh0' class='zoom' href='foto4.jpg'><img class='pict' width=420 height=310 src='foto4.jpg '></a></div><div id="myDIV"><a id='forsh1' class='zoom' href='foto5.jpg'><img class='pict' width=420 height=310 src='foto5.jpg '></a></div><script>function myFunc() { document.getElementById("myDiv").style.zIndex = "-1";}</script></body></html>
