Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question imagescroller and lightbox doesn't work together on one page

    Hey all,

    this is the first time I'm using this forum...

    I have a problem when I want to use an image scroller and a lightbox on one page. Both are working fine alone but when I'm integrate the other, only one or none are working (depending off the order of the script parts above in my page)

    I don't know what you need for trying to solve this problem so let me know if you needed something else...

    I have scripts for:
    - light window for showing an shockwave file
    - lightbox to show multiple images
    - image scroller to show only 3 images in a DIV

    This is the script part in the HEAD section:

    <!-- light window -->
    <!-- JavaScript -->
    <script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
    <script type="text/javascript" src="lightwindow/javascript/effects.js"></script>
    <script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>

    <!-- jQuery lightBox plugin -->
    <script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
    <script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript">
    $(function() {
    $('a[@rel*=lightbox]').lightBox(); // #gallery a').lightBox();
    });
    </script>

    <!-- imagescroller -->
    <script type="text/javascript" src="imagescroller/jquery.js"></script>
    <script type="text/javascript" src="imagescroller/jquery.imageScroller.pack.js"></script>

    <script type="text/javascript">

    $(function(){

    $("#viewer").imageScroller({
    next:"btn1",
    prev:"btn2",
    frame:"viewerFrame",
    width:100,
    child:"a",
    auto:false
    });

    });
    </script>


    This is the code in the BODY section:

    <a href1.jpeg" rel="lightbox" ><img src="1.jpeg" ></a>


    Hopely someone can solve my problem!
    Thanks !!!

    Regards,
    Stijn

    I have checked already the forum threads:
    http://www.codingforums.com/showthread.php?t=144887
    http://www.codingforums.com/archive/.../t-151478.html
    Last edited by swebd; 08-25-2009 at 10:36 AM.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Sounds like a prototype/jquery conflict. Did you try the suggestions in the thread you mentioned?

    http://www.codingforums.com/showthread.php?t=144887

    You can also just eliminate one or the other framework, both have plugins that will do what you want to do.

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    I tried this solution but it doesn't work.

    <script type="text/javascript">
    var j = jQuery.noConflict();
    // Do something with jQuery
    j(function() {
    j('a[@rel*=lightbox]').lightBox();
    });

    // Do something with another library's $()
    <!-- imagescroller -->
    $(function(){
    $("#viewer").imageScroller({
    next:"btn1",
    prev:"btn2",
    frame:"viewerFrame",
    width:100,
    child:"a",
    auto:false
    });
    });
    </script>

    I also tried to enable the prototype framework but also whithout succes.

    Regards,
    Stijn
    Last edited by swebd; 08-26-2009 at 04:41 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •