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.