Question

我想在点击缩略图时更改主产品图片。我还为此主图像添加了缩放功能。大多数jquery gallery插件通过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>

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

通过单击magento中的缩略图来更改主图像

0 个答案: