Имейте эту разметку для продуктов на странице категории моего интернет-магазина...
Product A
<div id="lateral-thumbnails" class="product-col-left">
<a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
<img src="/images/001.jpg" alt="" />
</a>
<a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
<img src="/images/002.jpg" alt="" />
</a>
...
</div>
<div id="product-img-box" class="product-img-box">
<a id="mainframeimage-AAA" href="AAA url">
<img src="/images/AAA.jpg" alt="" />
</a>
</div>
Product B
<div id="lateral-thumbnails" class="product-col-left">
<a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
<img src="/images/901.jpg" alt="" />
</a>
<a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
<img src="/images/902.jpg" alt="" />
</a>
...
</div>
<div id="product-img-box" class="product-img-box">
<a id="mainframeimage-BBB" href="BBB url">
<img src="/images/BBB.jpg" alt="" />
</a>
</div>
<script type="text/javascript">
function showPic (thumbs) {
if (document.getElementById) {
jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeOut(250);
setTimeout(function() {
document.getElementById('mainframeimage<?php echo $_product->getId();?>').src = thumbs.href;
jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeIn(250);
}, 250);
return false;
} else {
return true;
}
}
</script>
С помощью этого кода javascript я могу изменить превью src с эффектом затухания, чтобы обработать LAST mainframeimage ID.
Как я могу сказать на языке javascript, что изображения 001.jpg и 002.jpg будут помещены в mainframeimage-AAA и изображения 901.jpg и 902.jpg в mainframeimage-BBB?
С уважением
Посмотрите в этом jsFiddle. Я немного упростил привязку привязки к mouseover
и добавил некоторые комментарии для подробного описания шагов
Также обратите внимание:
product-img-box
)if (document.getElementById)
showPic
fadeout()
поддерживает функцию обратного вызова, то есть когда завершение затухания завершено, функция обратного вызова будет выполнена, поэтому вам не нужно использовать setTimeout()
для ожидания перед вызовом fadeIn()