Home/ Questions/Q 8690863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T23:59:53+00:00

Hi I have a site with some effect. In one effect whe a user

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0