Every product on my store have multi images, And you can see the Screenshot as follow:
http://jewellry-beads.com/libs/456.png
How to change product multi Images on View Page to make it original size display or an modify size display? All the images display before the product description.Please help me.
http://jewellry-beads.com/libs/123.png
4 answers
To show original image instead of thumb image, you can do following:
1. Copy app\design\frontend\base\defaulttemplate\catalog\ product\view\media.phtml file to app\design\frontend\default\jm_leadtemplate\catal og\product\view folder
2. Modify this code in app\design\frontend\default\jm_leadtemplate\catal og\product\view\media.phtml file
Code:
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
become to
Code:
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
All the images display before the product description
May be you will have to edit some templates phtml file. Pls read this thread http://www.joomlart.com/forums/showt…l=1#post183762 to know the path of templates
Thanks congtq,
After i done it, the thumb images will overlap. How to make thumb images display like http://www.lucemall.com.cn/new-arriv…w-1030101.html ?
http://jewellry-beads.com/libs/678.jpg
To display the product image as you want, you will have to separate view.phtml to 2 parts: a part shows Base Image and other part shows Thumbnail Image. Then you should put them in place will display.
Part one:
Code:
<?php $_product = $this->getProduct(); $_helper = $this->helper('catalog/output'); ?> <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?> <p class="product-image product-image-zoom"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p> <p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p> <div class="zoom"> <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" /> <div id="track"> <div id="handle"></div> </div> <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" /> </div> <script type="text/javascript"> //<![CDATA[ Event.observe(window, 'load', function() { product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); }); //]]> </script> <?php else: ?> <p class="product-image"> <?php $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p> <?php endif; ?>
Part two:
Code:
<?php if (count($this->getGalleryImages()) > 0): ?> <div class="more-views"> <h2><?php echo $this->__('More Views') ?></h2> <ul> <?php foreach ($this->getGalleryImages() as $_image): ?> <li> <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a> </li> <?php endforeach; ?> </ul> </div> <?php endif; ?>
Now do following 3 steps:
1. copy app\design\frontend\base\defaulttemplate\catalog\ product\view.phtml file to app\design\frontend\default\jm_leadtemplate\catal og\product folder
2. cut part one to app\design\frontend\default\jm_leadtemplate\catal og\product\view.phtml in place will display Base Image
3. in app\design\frontend\default\jm_leadtemplate\catal og\product\view.phtml, delete this code
PHP Code:
<?php echo $this->getChildHtml('media') ?>
and copy this code to place will display Thumbnail Image
PHP Code:
<div style="clear:both;"><?php echo $this->getChildHtml('media') ?></div>
thanks congtq ,it works perfect.
This question is now closed