Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 2 of 4
Ajax main product image switcher
 
oakRunk
Sr. Member
 
Total Posts:  117
Joined:  2008-09-15
 

@Scott

I’m using the default theme, I figured out if I use smaller images to begin with, it’s not too bad, but I wish I could get rid of the double clicking on the image/popup. Maybe a look at the modern themes js will do something for me?

 
Magento Community Magento Community
Magento Community
Magento Community
 
thomasmore
Sr. Member
 
Total Posts:  80
Joined:  2008-10-21
 

How would you make it so when you click on the large image, it popup with lightbox? How can you intergrate both?

 
Magento Community Magento Community
Magento Community
Magento Community
 
JeffreyKarbowski
Jr. Member
 
Total Posts:  23
Joined:  2008-11-18
 
johnh123 - 19 November 2008 01:01 PM

This works great...except that the ‘more views’ pictures are all up in the corner of their little box, leaving a lot of white space.  Anyone else see this?

Try looking at your CSS margins John: .product-img-box .more-views li a img
That worked for me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Leon
Jr. Member
 
Avatar
Total Posts:  5
Joined:  2007-10-23
Australia
 

@Scott

This was a great tip - thank you! It works great.

Anyone have any tips on adding a little ‘loading’ image while the new image that has been clicked is loading?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

Leon, you could throw an absolutely-positioned 100% width+height box inside the main image div (with relative positioning applied), then add your loading graphic as an untiled and centered background on the absolute box for a few seconds during the swap, or just assign the loading image as a background to the image box itself, then clear the main image before replacing it, effectively showing the loading graphic that runs continually hidden behind images when they are loaded.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Reben002
Member
 
Total Posts:  41
Joined:  2009-02-13
 

Hello there!
Scott, really, thanks for this elegant solution! But im still facing a problem that been bothering me. What i like to acheive is the possibility to load thumbnail into the main product image (which you solved), but also be able to enlarge current image displaying in the main product image.

Right now im able to load thumbnail into the main image, enlarge it with highslide, but it only loads up the first thumbnail image, even if second thumbnail is displaying at main image.

Do you, or anyone know a smart solution to this problem?
Here is an example of my dream productview which in my point of view couldn’t be more perfect!

What i’ve noticed is that the example above uses some jquery solution to load thubnails, and enlarge main image. 
Would appreciate any kind of help, been struggling for weeks…

Greetings form a frustrated magento user

 
Magento Community Magento Community
Magento Community
Magento Community
 
john.senna
Jr. Member
 
Total Posts:  2
Joined:  2009-08-04
 

Wow!!! below was so dang cool - and EASY smile How can I get the main image back?  meaning when page loads have ImageA as mainimage with ImageB and ImageC as ‘more views’ so once I click on ImageB, how can I make it so when I click back on large Image, goes back to ImageA?

THANKS!!!!
THANKS!!!!
THANKS!!!!

Scott - 17 September 2008 08:27 PM

This can be done much simpler with some inline, or external JavaScript. I say inline because Varien took the lazy way out and hardcoded this inline, against best practices. So if you don’t care, you can too. Admittedly, it’s the simplest option. wink

The following is found in templates/catalog/product/view/media.phtml ...

Replace this section

<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
  <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</
a>

With this section:

<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
  <!-- 
The below should remain the same as before -->
  <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</
a>

Simple as coconut creme pie. Mmmm, delicious. cool smile
 
Magento Community Magento Community
Magento Community
Magento Community
 
justintime67
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2009-08-12
 

I dont get… why is it not working??? This is my media.html file:

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* @category design_default
* @package Mage
* @copyright Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
*/

/**
* Product media data template
*
* @see Mage_Catalog_Block_Product_View_Media
*/
?>
<?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 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">
<strong><?php echo $this->__('More Views') ?></strong>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>” title="<?php echo $_product->getName();?>” onclick="$(’image’).src = this.href; return false;">
<!-- The below should remain the same as before -->
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>” alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

The script is running on: http://www.happycowbelts.com/magento/catalog/product/view/id/174

Any ideas anyone?

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagikTejas
Sr. Member
 
Avatar
Total Posts:  150
Joined:  2009-07-29
 

Scott Many Thanks for this good solution smile

I have used onmouseover event & it works perfectly fine.
But now I want the main product image back when I move the cursor away from more view images.
Can you please let me know how to do it.

Thanks in Advance.


 
Magento Community Magento Community
Magento Community
Magento Community
 
CapraCruz
Jr. Member
 
Total Posts:  5
Joined:  2010-02-10
 

Scott!
Thank you! This has been the easiest and most pain free Magento modification I have attempted yet.. So refreshing!

LOL

 
Magento Community Magento Community
Magento Community
Magento Community
 
CapraCruz
Jr. Member
 
Total Posts:  5
Joined:  2010-02-10
 

Scott!
Thank you! This has been the easiest, most pain free Magento modification I have attempted yet… So refreshing!

LOL

 
Magento Community Magento Community
Magento Community
Magento Community
 
Fernando Carrettoni
Jr. Member
 
Total Posts:  10
Joined:  2010-03-18
 

Hey Scott, I almost have I think… When I replace the code in the media file, I get the ajax switcher going but the images are loaded in very small size except for image n# 1. It seems It’s loading a thumbnail into the main image box, or something. Can you point me into the right direction?

Heres my code:

<?php foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
        
        
            <
a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
            <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(106,130); ?>" width="106" height="130" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
            
        
        </
li>
    
<?php endforeach; ?>

thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Fernando Carrettoni
Jr. Member
 
Total Posts:  10
Joined:  2010-03-18
 

I got it working on the server version. My local version still displays a thumbnail image… weird. But It’s working!! YEEEAAH. I wonder if there’s an easy way to add a preloader image or something..

smile
thanks for all the help!

 
Magento Community Magento Community
Magento Community
Magento Community
 
juliuscashbacosa
Jr. Member
 
Total Posts:  12
Joined:  2009-12-26
 

It is working in my google chrome browser but when I load it on IE or Firefox, swap image is working, but putting jqzoom will not work…

It keeps on zooming the base image even if you already load the other view thumbnail…

 
Magento Community Magento Community
Magento Community
Magento Community
 
juliuscashbacosa
Jr. Member
 
Total Posts:  12
Joined:  2009-12-26
 

Can I have a helping hand here?
smile

it is swap image is not but jqzoom wont zoom to the corect image loaded… help please… smile

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 2 of 4