0

Have this markup for products in category page of my online store...

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>

With this javascript code i can change thumbs src's with fade effect to LAST mainframeimage ID processed.

How can i say in javascript language that images 001.jpg and 002.jpg will be placed in mainframeimage-AAA and images 901.jpg and 902.jpg in mainframeimage-BBB?

Regards

4

1 回答 1

1

看看这个 jsFiddle。我已经简化了你的mouseover绑定并添加了一些注释来详细说明不同的步骤

另请注意：

  • ids 在 DOM 中必须是唯一的，你有重复的 ids ( product-img-box)
  • 你不需要做这个测试if (document.getElementById)
  • 你不需要在你的showPic函数中返回一些东西
  • 该fadeout()函数支持回调函数，即当淡出完成时，回调函数会被执行，所以调用前无需setTimeout()等待fadeIn()
于 2013-10-09T18:59:58.290 回答