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

jquery tooltip with image preview
 
debora
Jr. Member
 
Total Posts:  8
Joined:  2008-11-26
 

I would like to implement an image preview in a tooltip so that when the client hover on a product image in the catalog he is shown a bigger image. Something like you can see on iStockphoto.com, for example, or on templatemonster.com

I have found the code to do so but I wouldn’t know where exactly where to put it. This is the code I would like to use: http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips but modified to use image tooltips, like for example on this site: linksfordesigners.com. Otherwise this: http://cssglobe.com/lab/tooltip/02/ but modified in a way that the preview stay within the browser window or any other code that would give me the desired effect smile

Anyone can help me?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
phlux0r
Member
 
Avatar
Total Posts:  73
Joined:  2008-03-09
Auckland, New Zealand
 

You can create a jquery.tooltip.js file with the tooltip code and put that into your skin/js folder. Then include the js on the pages you need using the layout files:

<block type="page/html_head" name="head" as="head">
  ...
other includes...
  <
action method="addItem"><type>skin_js</type><name>js/jquery.tooltip.js</name></action>
</
block>

Then you need to change the code for the links on your catalog images where you want the tooltip to appear. The example at the first link doesn’t really show how you can display images in the tooltip… that example just takes what’s in the link’s title tag and displays it…

 
Magento Community Magento Community
Magento Community
Magento Community
 
debora
Jr. Member
 
Total Posts:  8
Joined:  2008-11-26
 

OK. Thanks. Done that! Where do I change the the page template now to show the tooltip? What exactly would I have to change?

Also what do you think? Is it smart to add such a functionality or will it slow down the page load? Do all the big previews have to be loaded or are those loaded on request?

 
Magento Community Magento Community
Magento Community
Magento Community
 
phlux0r
Member
 
Avatar
Total Posts:  73
Joined:  2008-03-09
Auckland, New Zealand
 

Uh, you might need to familiarise yourself with the way Magento’s template system works. Read the designer’s guide to customizing Magento and also look through the Wiki for more articles on templates and using jQuery.

As far as using jQuery and your question about slowing down page load… well, if you add another set of js files you will certainly increase the overall page size. It is prudent to avoid using another js library just for tooltips. Magento already comes with Prototype and Scriptaculous so you can utilise those libraries and just look for plugins that do what you need.

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