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 1 of 4
Ajax main product image switcher
 
carsal
Member
 
Total Posts:  52
Joined:  2008-03-31
Medellin, Colombia
 

I am trying to get the main product image to change with click or hoverover the thumbnails, much like Amazon.com. I have tried modifying media.phtml with an ajax script but I am no coder so my attempts have been fruitless.
Here is my media.phtml

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php $_product 
$this->getProduct() ?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<p id="ajaxcontent" class="main-product-img">
<?php function doIt($itswitch ($itecho $this->helper('catalog/image')->init($this->getProduct(), 'image'$_image->getFile())->resize(265265);}}
<?php 
if (isset($_GET['content'])) { $content=$_GET['content']$show=doIt($content); }
elseif (isset($_GET['showit'])) { $showit=$_GET['showit']; echo doIt($showit); }
else echo doIt('one');} ?>
    
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(500, 500); ?>"  rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
    <
img id="image" src="<?php echo $showit ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
    </
a>
</
p>
<
class="click-zoom">
    
<?php echo $this->__('Click para zoom'?>
</p>
<?php else: ?>
<img id="image" 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 id="ajaxswitchcontent" class="more-views">
    <
h4><?php echo $this->__('More Views'?></h4>
    <
ul id="options">
    
<?php foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
           <
a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(265, 265); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
                <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68"
height="68" alt=""/>
            </
a>
        </
li>
    
<?php endforeach; ?>
    
</ul>
</
div>
<?php endif; ?>

and the ajaxswitch.js

var request false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    request = false;
  }
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined'{
  request 
= new XMLHttpRequest();
}

function ajaxSwitch(content{

/*the name of your page with the content goes here */
var url "media.phtml" escape(content);
request.open("GET"urltrue);
request.onreadystatechange go;
request.send(null);
}

function go() {
  
if (request.readyState == 4{
          
if (request.status == 200{
                
var response request.responseText;
/* 'ajaxcontent' is the name of my div that will contain the info */
                
document.getElementById("ajaxcontent").innerHTML response;
          
}
  }
}

function showIt() {
        
var aTags=document.getElementById('options').getElementsByTagName('a');
        for (
i=0i<aTags.lengthi++) {
                aTags[i]
.onclick=function() {
                        
var show=this.href.split('content=')[1];
                        
ajaxSwitch(show);
                        return 
false;
                
}
        }
}
window
.onload=showIt;

Sorry for the bad coding red face
Can any of you coding gurus help correct/rewrite the code?

 
Magento Community Magento Community
Magento Community
Magento Community
 
carsal
Member
 
Total Posts:  52
Joined:  2008-03-31
Medellin, Colombia
 

Is it that bad?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tashman
Jr. Member
 
Total Posts:  4
Joined:  2008-07-08
 

Hi carsal. Did you manage to get it to work? I’m in need of something similar. Anyone got any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
carsal
Member
 
Total Posts:  52
Joined:  2008-03-31
Medellin, Colombia
 

@Tashman,
Yes I did, although I have modified the theme extensively so its not easy for me to remember. I changed the app/design/frontend/default/default/template/catalog/product/view/media.phtml to include the javascript “Image Thumbnail Viewer II”, available at: http://www.dynamicdrive.com following their instructions.

My media.phtml wouldn’t be much use, since like I said, I have changed it extensively.
Hope this helps.

 
Magento Community Magento Community
Magento Community
Magento Community
 
cutemonster
Jr. Member
 
Total Posts:  11
Joined:  2008-07-07
 

I need this feature too.  Carsal and Tashman, would you mind sharing your mods?

thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
flufftronix
Member
 
Avatar
Total Posts:  45
Joined:  2007-11-09
Philly, PA
 

Just implemented this.. used the javascript on the above page out of box without modification and everything seems to be working properly. My media.phtml file:

<?php $_product $this->getProduct() ?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<div class="main-product-img" id="loadarea"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></div>
<?php else: ?>
<img id="image" 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="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(400, 400); ?>" rel="enlargeimage::mouseover" rev="loadarea"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    
<?php endforeach; ?>
    
</ul>
</
div>
<?php endif; ?>
 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 

flufftronix: Can you elaborate on how you got this to work? Where do you put ajaxswitch.js?

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

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
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

Additional Notes:

As you can see above, I actually link to the product image, in case JavaScript is disabled. You can easily change this to work on-hover by replacing onclick with onhover. You can have both onclick and onhover at the same time as well, at which point you may just want to go “external” with the javascript, if you feel so inclined.

To make this external, you could add a rel attribute to the above <a>, and loop through all <a> tags with the conditional: element.getAttribute(’rel’).match(’your-rel-value’) in your external JS file. Obviously this route isn’t as simple, as you’d need to be quite familliar with the inner-workings of JavaScript write a JavaScript class that can handle assigning and handling the click events, so I won’t go into too much detail here, and just take the “Varien” route.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tomislavbilic
Member
 
Avatar
Total Posts:  69
Joined:  2007-11-17
Osijek, Croatia
 

Hello,

You might want to take a look at tutorial of how to create color changer in Magento. Although the process is a little longer, a PHP developer should find its way wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
PauloGoGo
Jr. Member
 
Total Posts:  1
Joined:  2008-10-16
 

Scott, brilliant, concise info and to the point, Thanks
This should be the default behavior of magento smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
oakRunk
Sr. Member
 
Total Posts:  117
Joined:  2008-09-15
 

Thank Scott - that worked well wink

Only one problem - when the user clicks on the main image, it pops up in a pretty ugly way. Anyway to disable that popup?

 
Magento Community Magento Community
Magento Community
Magento Community
 
larrpan
Jr. Member
 
Total Posts:  17
Joined:  2008-07-01
 

Scott You Rock Man!!! Thanks… it worked seamlessly smile

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

w00t cool smile

@oakRunk: I’ll assume this is something related to your theme specifically. This implementation worked fine in the default modern theme. But any changes would be made within the same file.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jklina
Sr. Member
 
Avatar
Total Posts:  82
Joined:  2008-06-12
Philadelphia PA
 

Instead of “onhover”, make it “onMouseOver” smile

Thanks Scott, great post.

 
Magento Community Magento Community
Magento Community
Magento Community
 
johnh123
Member
 
Total Posts:  64
Joined:  2008-06-12
 

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?

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