jQuery Forum

Hello,

So I'm trying to create this product viewer where you have a thumbnail of the product and when you rollover the image, an icon appears at the top left corner of the image and when you click this icon i want to open i bigger using the fancybox plugin.
My problem is that I cannot click the zoom icon when it appears and put an event to it for when you click, here is my code:

1. var $state=0; //check if the icon is already displayed to so we don't overlap 20 of them.
       $("div.product_img").hover(
           function(){
               if(!$state){
                   $state=1;
                   $(this).append('<div class="magnify"></div>'); //append the zoom image to the div contaning the thumbnail
               }
           },
           function(){
               $childdiv=$(this).children('div');
               if($childdiv!="div.magnify"){ //without this line when the zoom icon appears and i rollover it, it starts flickering because the script thinks i'm not over div.product_img anymore
                   $state=0;
                   $('div.magnify').remove();
               }
           });
2. $('div.magnify').click(function(){ //here i want to make the icon clickable when for some reason it doesn't work
           console.log('hello');
           $(this).trigger("myevent");
       });
   

Can anyone help me with this? When I click the div.magnify i've added a trigger event to run fancybox but for now I can't click, should I be using live() istead of click().
Here is the html after the icon is appended:

1. <div class="product_img">
2. <div class="magnify"></div>
         <a id="single_image" href="product_big.jpg"><img src="product_small.jpg"></a>
   </div>

Thank you in advance.