Magento Forum

[SOLVED] Customize product info, images
 
rraf
Jr. Member
 
Total Posts:  8
Joined:  2008-11-01
 

Hi,

After reading several threads on the forum in relation with customizing preview images and image pop-up, it seems that I unfortunately can’t find the solution that suits my needs.

I would like that the “preview images” (the ones under the “big” image in product description), when clicked, opens in place of the main image, not in a pop-up. This image should display with a fixed size, and allow to see the full size in a pop-up only when clicked while in the main image location.

An example of what I need can be found here :
http://www.kiabi.com/garcon_1-5/pantalons-bermudas/pantalons/pantalon-velours-multipoches/19/557/P170547
(Of course, it’s not my site, otherwise I wouldn’t ask the solution wink )

What I have succeeded to do, was :

- open the preview image in the main image location, BUT with full size, resulting in a completely messed up display of the description (the image overlaps the description text). Furthermore, this image can not be shown full size in a pop-up when clicked (of course, not useful since already in full size)
The full thread that helped me to do this can be found here : http://www.magentocommerce.com/boards/viewthread/9424/

- preview image opens in main image location, and when double-clicked while in main image location, opens full size in a pop-up. BUT, it is always the same preview image which opens, regardless the preview image I choose :-(
Furthermore the size of the image stills overlaps the description…
The full thread that helped me to do this (in addition to previous one) can be found here : http://www.magentocommerce.com/boards/viewthread/20359/

So, it seems that the proposed solutions in the threads I’ve read offer “semi-solutions”, not completely matching what I need. And I cannot figure out how to put the 2 solutions together in order to get what I need :-(

Thanks for any help.

Kind Regards.

rraf

 
Magento Community Magento Community
Magento Community
Magento Community
 
marcfalk
Sr. Member
 
Total Posts:  87
Joined:  2008-11-22
 

I need this too… do you have a clue guys?

 
Magento Community Magento Community
Magento Community
Magento Community
 
rraf
Jr. Member
 
Total Posts:  8
Joined:  2008-11-01
 

Hi,

I did finally manage to get it working like I want grin
But it was unfortunately not thankx to this thread… In fact, I waited so long an answer to this thread that I finally forgot that I had left it open, without giving any solution although I had it… Sorry.

Here is what I did to get it working :
I mean :
1) If we click on one of the thumbnail (small images), the main image switches to this new one
2) If we double-click on the main image (even after switching to a new one), it opens a pop-up with full-screen image.
What is still missing, and would be nice : there is no “close” buton on te popup… So if someone knows how to add it....

Heres the solution to first 2 points :

- You need to modify “media.phtml” (a good practice is to first copy it to your custom template, and modify the copy - if needed see designer guide on magento website for more informations about this)

- Simply replace the line starting with

<a href="#" onClick=

by :

<a href="#" onClick="document.getElementById(’image’).src = ‘<?php echo $_image->getUrl(); ?>’;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(80, 109); ?>” width="80" height="109" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>

Note : I don’t know if it is also needed, but during one of my first tests, I did also replace the line starting with <?php else: ?>
but it didn’t show any difference onscreen… So I don’t know if it is really needed… If it doesn’t work with only changing 1 line, try changing also this 2nd line…

- So finally, my media.phtml looks like this :

?>
<?php $_product = $this->getProduct() ?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>” alt="<?php echo $this->htmlEscape($_product->getName()) ?>” /></p>
<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="image-zoom" id="track_outer">
<img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>” alt="<?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') ?>” class="btn-zoom-in" />
</div>
<script type="text/javascript\">
Event.observe(window, ‘load’, function() {
product_zoom = new Product.Zoom(’image’, ‘track’, ‘handle’, ‘zoom_in’, ‘zoom_out’, ‘track_hint’);
});
</script>
<?php else: ?>
<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(300, 408); ?>” alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
<!-- <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>” alt="<?php echo $this->htmlEscape($_product->getName()) ?>” /> -->
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h4><?php echo $this->__('More Views') ?></h4>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onClick="document.getElementById(’image’).src = ‘<?php echo $_image->getUrl(); ?>’;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(80, 109); ?>” width="80" height="109" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>

<!-- <a href="#" onclick="popWin(’<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ‘width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes’); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(120); ?>” alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>” /></a> -->
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

Hope this helps,

Kind Regards.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top