1

单击缩略图时，我正在尝试更改主要产品图像。我还为这个主图像添加了缩放功能。大多数 jquery 库插件通过 javascript 设置整个图像元素。但我只想设置图像元素的 src。我怎样才能做到这一点以获得所需的行为？这是我尝试实现此功能的主页的代码：

<?php                                                                                                                                                                              
    $_helper = $this->helper('catalog/output');                                                                                                                                    
    $productId = $this->getProduct_id();                                                                                                                                           
    $_product = Mage::getModel('catalog/product')->load($productId);  //load the product  
?>  
    <div class="home-product-container-main"> <!--Product main container div-->
    <div class="home-product-container-image">
    <script type="text/javascript">

jQuery(document).ready(function($){

    $('#image1').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [575,300],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: '<?php echo $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->resize(1000)?>' //<-- No comma after last option!
    })
</script> 
    <?php
    //$_img = '<a id="a_image" href="'.$_product->getProductUrl().'" title=""><img id="image". src="'.$this->helper('catalog/image')->init($_product, 'image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->resize(325,251). '" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"  /></a>';                                                           
    //echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
    <img id="image1" border="0" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->resize(300,225)?>" style="width:300px;height:225px" />
    <div id="thumbs">
    <?php 
        $obj = new Mage_Catalog_Block_Product_View_Media();
        $_product1 = new Mage_Catalog_Model_Product();
        // Load all product information of a particular product
        $Products_one = Mage::getModel('catalog/product')->load($productId);
        // Use your Product Id instead of $id
        $countt = count($Products_one->getMediaGalleryImages());
        if($countt>0){
        foreach ($Products_one->getMediaGalleryImages() as $_image)
        {
        // For the Original Image
        echo "<img src=".Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).str_replace(Mage::getBaseUrl('media'),"",$_image->url)." alt=''width='50' height='50' />";
        }
        }
    ?>  
     </div>
    </div>

在上面的代码中，我想在单击缩略图时将图像元素的 src 设置为 id=image1。缩略图显示在 id=thumbs 的 div 中谢谢。

4

0 回答 0