[Special Summer Sale] 40% OFF All Magento 2 Themes

VIEW OFFER

Cart

jQuery, fancybox working but only when you click this image twice

Home TopicjQuery, fancybox working but only when you click this image twice
  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 17, 2011 at 4:24 am #10117
    karol-may
    Participant

    I have a problem …

    JS

    $('#Contact').ready(function(){
    $('a#Contact-Map').live('click',function(event){
        event.preventDefault();
        $('a#Contact-Map').fancybox({
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'           :   600, 
            'speedOut'          :   200, 
            'overlayShow'   :   true
        });
    });
});

    HTML

    <div class="Module-Frame" id="Contact">
    <a id="Contact-Map" href="./Modules/Contact/Images/mapa_big.png">
        <img src="./Modules/Contact/Images/mapa.png" alt=""/>
    </a>
</div>

    This HTML code is loaded by .load() jQuery function.
    That’s working but only when you click this image twice …

    Help pls 🙂

    JS with load() func

    $(document).ready(function(){

    $("#Menu").children().click(function(event){
        $("#Content").hide().load('./Modules/'+ event.target.id.substr(5) +'/index.php', function() {
            $(this).fadeIn();
        });
    });



});

    HTML

    < html  >
< head  > ...

...
<body>
...
            <div id="Menu">
                <a id="Menu-News" href="#" title="Aktualnosci"> aktualności  |
                <a id="Menu-Aboutus" href="#" title="O nas"> o nas  | 
                <a id="Menu-Contact" href="#" title="Kontakt"> kontakt  | 
                <a id="Menu-Gallery" href="#" title="Galeria"> galeria 

            </div>
...
< div id=#content> ...
    January 17, 2011 at 4:52 am #10118
    vadim
    Participant

    Remove your onclick in your html, it’s triggering before your event handler.

    January 18, 2011 at 11:32 am #10120
    karol-may
    Participant

    After many hours I solved the problem simply by change:

    $(this).fancybox({
    to:
    $.fancybox(this,{

    $('#Contact').ready(function(){
    $('a#Contact-Map').live('click',function(event){
        event.preventDefault();
        $.fancybox(this,{
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'           :   600, 
            'speedOut'          :   200, 
            'overlayShow'   :   true
        });
    });

});
    August 27, 2019 at 8:00 am #10119
    huntelaer
    Participant

    I also encountered this problem. After including the stylesheet it worked with a single click. From the README.md:

    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.