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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Another problem with two jquery plugins in a page

    I have the jquery.lightbox-0.5.js and the jquery.easing.1.3.js in a page and only manage to get one work. I have tried several solutions I had found on the internet but without results. I would really appreciate your help. Thanks.

    The original code is:

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

    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>


    <script type="text/javascript">
    $(function() {
    // Use this example, or...
    $('#mygallery a').lightBox({fixedNavigation:true});
    });


    </script>

    <!--Make sure page contains valid doctype at the very top!-->

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/stepcarousel.js"></script>


    <script type="text/javascript">

    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    /* autostep: {enable:true, moveby:1, pause:3000},
    */ panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/leftnav.gif', -35, 50], rightnav: ['images/rightnav.gif', 10, 50]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })

    </script>


    </head>
    <body>



    <!-- Site JavaScript -->
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
    <script type="text/javascript">
    $(function() {
    $('#one').ContentSlider({
    width : '920px',
    height : '200px',
    speed : 800,
    easing : 'easeInOutBack'
    });
    });
    </script>
    <script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
    <script src="js/chili/recipes.js" type="text/javascript"></script>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I would start with only loading jQuery once. You are doing it three times.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply but I do not know Jquery and Im lost. Could you be more specific, please? I have tried moving around the code and getting rid off
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> but without success.

    This is the code I have now:

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



    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

    <script type="text/javascript" src="js/stepcarousel.js"></script>


    <script type="text/javascript">
    $(function() {
    // Use this example, or...
    $('#mygallery a').lightBox({fixedNavigation:true});
    });


    </script>

    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>

    <script type="text/javascript">

    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    /* autostep: {enable:true, moveby:1, pause:3000},
    */ panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/leftnav.gif', -35, 50], rightnav: ['images/rightnav.gif', 10, 50]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })

    </script>



    <script type="text/javascript">
    $(function() {
    $('#one').ContentSlider({
    width : '920px',
    height : '200px',
    speed : 800,
    easing : 'easeInOutBack'
    });
    });
    </script>

  • #4
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ready. Found the solution. Now it works. Thanks


  •  

    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
    •