Home/ Questions/Q 8541105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:45:16+00:00

I am working with responsive design right now and I made a slider using

  • 0

I am working with responsive design right now and I made a slider using with elastislide ( http://tympanus.net/Development/Elastislide/ ) and now I want to call a form with ajax or Iframe with fancybox ( http://fancyapps.com/fancybox/#examples ) on the click of each image of slider but it is not working and no error comes on the console of my fire bug as well as on my web-developer tool.

here is the code.

<div id="carousel" class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/1.jpg" alt="image01" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/2.jpg" alt="image02" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/3.jpg" alt="image03" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/4.jpg" alt="image04" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/5.jpg" alt="image05" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/6.jpg" alt="image06" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/7.jpg" alt="image07" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/8.jpg" alt="image08" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/9.jpg" alt="image09" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/10.jpg" alt="image10" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/11.jpg" alt="image11" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/12.jpg" alt="image12" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/13.jpg" alt="image13" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/14.jpg" alt="image14" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/15.jpg" alt="image15" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/16.jpg" alt="image16" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/17.jpg" alt="image17" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/18.jpg" alt="image18" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/19.jpg" alt="image19" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/20.jpg" alt="image20" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/21.jpg" alt="image21" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/22.jpg" alt="image22" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/23.jpg" alt="image23" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/24.jpg" alt="image24" /></a></li>
                        <li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/25.jpg" alt="image25" /></a></li>
                    </ul>
                </div>
            </div>

    <script type="text/javascript" src="fancybox/lib/jquery-1.8.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.0" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.elastislide.js"></script>
    <script type="text/javascript">

       $('.fancybox').fancybox();           

       $('#carousel').elastislide({
            imageW  : 180,
            minItems    : 5
        });


    </script>

when I comment elastislide ,fancybox works but both together are not working… 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the solution 🙂 first of all I replaced class from ‘a’ tag to ‘li’ tag and then call it with manually ajax so my updated code is here…

       <div id="carousel" class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class=" "><img src="images/large/1.jpg" alt="image01" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" ><img src="images/large/2.jpg" alt="image02" /></a></li>
                        <li class="fancybox fancybox.ajax"> <a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/3.jpg" alt="image03" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/4.jpg" alt="image04" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/5.jpg" alt="image05" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/6.jpg" alt="image06" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/7.jpg" alt="image07" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/8.jpg" alt="image08" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/9.jpg" alt="image09" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/10.jpg" alt="image10" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/11.jpg" alt="image11" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/12.jpg" alt="image12" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/13.jpg" alt="image13" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/14.jpg" alt="image14" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/15.jpg" alt="image15" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/16.jpg" alt="image16" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/17.jpg" alt="image17" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/18.jpg" alt="image18" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/19.jpg" alt="image19" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/20.jpg" alt="image20" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/21.jpg" alt="image21" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/22.jpg" alt="image22" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/23.jpg" alt="image23" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/24.jpg" alt="image24" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/25.jpg" alt="image25" /></a></li>
                    </ul>
                </div>
            </div>

    and in script I made this change in script

     <script>
  $(".fancybox").click(function() {

$.fancybox.open([
    {
        href : 'http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html',                
        title : '1st title',
    type: 'ajax'
    }
], {
    padding : 0
});

return false;

});

    hope this Helps any one who is facing the same….

    • 0