1

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?

Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171

1 Answers1

2

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.

devnull69
  • 16,402
  • 8
  • 50
  • 61
  • I have added the call to the fancybox, ok I undesrtand the problem, I trynow to refresh fancybox but I don't know how to do that, I try – Alessandro Minoccheri Oct 11 '12 at 09:39
  • First of all I would try to execute the same command again after you inserted the new elements. Just put the call into a function and call it on $(document).ready() and on element insert. – devnull69 Oct 11 '12 at 09:47
  • 1
    @AlessandroMinoccheri : If you don't want to re-call/re-init fancybox every time that you add new content (as proposed in this answer) then check http://stackoverflow.com/a/9084293/1055987 ... this is for fancybox v1.3.4, which doesn't support dynamically added elements (fancybox v2.x does) – JFK Oct 11 '12 at 16:51