CODEWITHSUNDEEP
jqueryhtmlcssfancybox
Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

Jquery add image dynamically in fancybox

Hi I have a site with some effect. In one effect whe a user go over a div I append to that div in position absolute another div. Inside the new div I insert an image and if the user click on it I want to start the fancybox. I have used fancybox a lot of time but never with an element created dynamically. this is the code:

$(document).ready(function(){
    $(".elenco a").stop().mouseover(function(){
        $(".elenco a").css('color','#000');
        $(this).css('color','#fff');
        var id = $(this).attr('id');
         if ($('#gallery').length!=0){
             var image= $('#gallery').find('#thumb_img');
             image.attr('src','img/gallery/thumb/th_'+id+'.jpg');
         }else{          
            $('.elencoGallery').stop().append(function() {

                return '<div id="gallery"  style="position:absolute; top:0; left:300px; z-index:1000;overflow:hidden; width:0px; height:154px; background:#c7c2c2;"><a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a></div>';
            });

            $('#gallery').stop().animate({
                width:'200px'

              }, 1000, function() {
                // Animation complete.
            });
         }
    });

    $('.elencoGallery').stop().mouseleave(function(){
        $('#gallery').stop().animate({
            width:'0px'
          }, 1000, function() {
            $('#gallery').remove();
        });
    });

});
</script>

HTML:

<div class="elencoGallery">
<div class="elenco" style="padding-top:18px;" >
    <p style="padding-left:10px;" id="cucine" >test1</p>
</div>
<div class="elenco" style="padding-top:18px;" >
    <p style="padding-left:10px;" id="cucine2" >test</p>
</div>
</div>

I have semplified the html, all works fine only fancybox doesn't work when I append. Isn't a problem of fancybox because if I put a simple link not created dynamically fancybox works fine1 The image are in the correct place, If I copy this external of the append inside a div not dynamic works!! Why??

<a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a>

The call to the fancybox:

<script type="text/javascript">

    $(document).ready(function(){   
        $("a.fancy").fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   true,
            'overlayOpacity':   0.8,
            'overlayColor'  :   '#000'
        }); 
    });
    </script>

Why my fancybox doesn't works when I created it a runtime in an append?

Upvotes: 1

Views: 2215

Answers (1)

devnull69
devnull69

Reputation: 16544

Somewhere in your code (you didn't show) you will have the initial call to the fancybox method. You will have to refresh the fancybox with another call to the fancybox method after you inserted new dynamic elements.

Most plug-ins offer a parameter like 'refresh' for the method, some other plug-ins require you to repeat the full initial method call. Some plug-ins offer an .init() method. You'll have to dig into the documentation of fancybox to find out.

Upvotes: 2

Related Questions