I don't want the images to load until the link is hovered, so for that here is the script but it's not working, can someone help me in correcting it?
I added an event listener to each link, and on mouseover called a function that sets the image. To make things more interesting, we can copy lazyload a bit here and also use the data-original property
For example: this is the HTML
<a href="#" class="tip_trigger">
<img class="tip" alt="300 Grams"
src='empty.gif' width="90" height="90"/>
Then, add an event listener:
// call for each element with the class 'tip' that's being hovered upon
// retrieve the image inside this element
var elem = $(this).find('img');
// set the 'src' to the 'data-original' value
for a live demo, you can see this page http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html
the above part of script is only added to the first letter ALEX in 'A' Category.
This is what the .find() method says about what it does:
"Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element."
Do you see the problem between that description and how you are using the it?