Вопросы Теги

jqZoom изменяют источник изображения

У меня есть галерея 5 миниатюр и одного увеличенного изображения. У меня есть jqZoom, связанный с большим изображением поэтому, когда Вы мышь по нему, Вы видите увеличенный версия. Я испытываю затруднения, когда пользователь нажимает альтернативную миниатюру. Я могу заставить увеличенное изображение изменяться, но увеличенный изображение остается исходным изображением. Я не могу делать jqZoom изменение увеличенным изображение для соответствия миниатюре. Вот пример того, что я пытаюсь сделать. Вы нажимаете на текст и изменения миниатюры, но большее изображение jqZoom остается тем же. Как я изменяю это так, чтобы jqZoom загрузил новое изображение в области масштабирования?

<script type="text/javascript">

$(function() {
 var options = {
 zoomWidth: 250,
 zoomHeight: 250,
 showEffect: 'fadein',
 hideEffect: 'fadeout',
 fadeinSpeed: 'fast',
 fadeoutSpeed: 'fast',
 showPreload: true,
 title: false,
 xOffset: 100
 };
 $(".jqzoom").jqzoom(options); 

});

function changeImgSrc() {
 document.getElementById('bigImage').src = '4.jpg';
 document.getElementById('smallImage').src = '3.jpg';
  var options = {
 zoomWidth: 400,
 zoomHeight: 400,
 showEffect: 'fadein',
 hideEffect: 'fadeout',
 fadeinSpeed: 'fast',
 fadeoutSpeed: 'fast',
 showPreload: true,
 title: false,
 xOffset: 100,
 containerImgSmall: '3.jpg',
 containerImgLarge: '4.jpg'
 };
 $(".jqzoom").jqzoom(options);

}
</script>
</head>

<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
  <img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>

</div>

Спасибо за помощь!!

6
задан Mike 12 January 2010 в 15:56
поделиться