Magento Forum

   
Page 1 of 2
[SOLVED] Rollover Image Gallery .Product Page Question
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

Hi all,

Just wondering has onyone implemented a rollerover type display of an image gallery for products.?
I currenlty have an image gallery associated for various products. Now to view each image you click on the image and this will open a new window. I would like to be able to just rollover the images in the gallery and the display in the image box.

see this simple example.

http://javascript.about.com/library/blroll1.htm

Anyone?

cheers
Brendan

 
Magento Community Magento Community
Magento Community
Magento Community
 
fruitbat
Jr. Member
 
Total Posts:  22
Joined:  2008-11-27
 

Hi,

Did you ever figure out how to do this, it’s exactly what I need to do as well/

Thanks

Jo

 
Magento Community Magento Community
Magento Community
Magento Community
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

hey no never got round to it.

I dont think it would be too dificult.

FYI there is an extension that does something similar. But using a magnifying glass

hth
brendan

 
Magento Community Magento Community
Magento Community
Magento Community
 
fruitbat
Jr. Member
 
Total Posts:  22
Joined:  2008-11-27
 

Thanks, I’ll have a look for it.

Jo

 
Magento Community Magento Community
Magento Community
Magento Community
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

look for magictoolbox

cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
grooves1200
Sr. Member
 
Total Posts:  122
Joined:  2008-02-01
 

Is there an extension that can create this effect when you hover over an image:

http://www.bluenile.com/wedding-rings/womens-wedding-rings

 
Magento Community Magento Community
Magento Community
Magento Community
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

no extension ive seen,

i just used a js script on my site to create a similar effect.
check out dynamic drive for js script rollover effect

code example.

<!-- Creating Additional Data for ToolTip -->
<?php $_tooltip $productName"<p>" "<b>Product Code:</b> " .$ProductCode"<p>" "<b>Price: </b>" .$ProductPrice?>
<div onMouseover="ddrivetip('<?php echo $_tooltip ?>')"onMouseout="hideddrivetip()">

brendan

 
Magento Community Magento Community
Magento Community
Magento Community
 
grooves1200
Sr. Member
 
Total Posts:  122
Joined:  2008-02-01
 

thanks much!

 
Magento Community Magento Community
Magento Community
Magento Community
 
rtl3
Jr. Member
 
Total Posts:  10
Joined:  2009-04-04
 
grooves1200 - 28 March 2009 03:05 AM

Is there an extension that can create this effect when you hover over an image:

http://www.bluenile.com/wedding-rings/womens-wedding-rings

This should be the default detail function instead of this stooopid zoom effect. I’m looking all over the forum for help on this myself. grief. I assume with some js knowledge it shouldn’t be too difficult unfortunately I’m designer not coder but the creators of this template system are obviously developers and not designers.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

hi there,

so what is it your after? Doesnt the above code work as required or are your looking for something else?

brendan

 
Magento Community Magento Community
Magento Community
Magento Community
 
rtl3
Jr. Member
 
Total Posts:  10
Joined:  2009-04-04
 

Not really Brendan but thanks anyway.I’m not trying to create a tooltip. If you look at the link you’ll see that when you roll over the thumbnail the large image changes. It’s one of the most common and useful uses of js that magento seems to have overlooked. I think I can figure it out over time but it’s a little frustrating that it’s not a built in function and not even an extension.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brendanb
Mentor
 
Total Posts:  1077
Joined:  2008-07-16
London, United Kingdom
 

hi,

there two extensions that i can think of that do this. Here is an example of it in action http://www.charleshobson.co.uk/gant-oxford-ribbed-shirt.html
this one: http://www.magentocommerce.com/extension/562/magic-zoom

there is also this one: http://www.magentocommerce.com/extension/787/product-image-zoom

mind you they are not free. But consdering the time it would take to implement, its a reasonable charge

hth
brendan

 
Magento Community Magento Community
Magento Community
Magento Community
 
grooves1200
Sr. Member
 
Total Posts:  122
Joined:  2008-02-01
 

For those still interested in the topic, I stumbled upon this:

http://www.nickstakenburg.com/projects/prototip2/

It’s not a free script, and I’m no coder, so I can’t speak to its quality, but it looks promising. If anyone winds up using it, let us know in this thread.

 
Magento Community Magento Community
Magento Community
Magento Community
 
grooves1200
Sr. Member
 
Total Posts:  122
Joined:  2008-02-01
 

i like the look of prototip2 but have no idea how to implement it with the grid view. would it be similar to brendan’s code above? if so, what would you need to change to make it work with another script like prototip?

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

Brendan, I’m trying to do the same thing with the rollover that you mentioned in your first post- did you ever figure it out?

Thanks!!

rolleyes

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

In case anyone is still looking for the rollover code, I found this today on another forum ( http://www.magentocommerce.com/boards/viewthread/6402/P0 posted by Scott: http://www.scottrageous.com/magento-design/) and it worked beautifully!!!

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();?>" onmouseover="$('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>

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