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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy I have 2 jquery scripts, only one at a time works =(

    I am using the slider gallery (from here) and a lightbox called Pretty Photo (from here).

    My webpage that I am working on is here. You will notice that the slider gallery works, but the lightbox does not.

    I then made another very similar page (right here) and took out the slider gallery to get the lightbox to work.

    So as you can see, I can get them each to work, but not on the same page at the same time. I'm sure it's something little and silly preventing them from cooperating but I don't know Javascript so this is above my head. I don't know anyone skilled/willing enough to help me. Some people said to check my global... something-or-others or my functions or my variables... but I don't even know what that means. Like I said, this is over my head. I'm just a photographer who taught herself HTML and CSS. I am not a programmer. Please help. If you could just tell me "Change this to that" or something, that would be so fantastic.

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Here's the bulk of your SCRIPT elements:
    Code:
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.2.6.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-ui-full-1.5.2.min.js" charset="utf-8"></script>
    
    <script type="text/javascript" charset="utf-8">
      window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);
    				
        var itemsWidth = ul.innerWidth() - container.outerWidth();
    				
        $('.slider', container).slider({
          min: 0,
          max: itemsWidth,
          handle: '.handle',
          stop: function (event, ui) {
            ul.animate({'left' : ui.value * -1}, 500);
          },
          slide: function (event, ui) {
            ul.css('left', ui.value * -1);
          }
      });
    };
    </script>
    Note you're pulling in two different jquery scripts there. The first is v1.4.1, and of course the second is v1.2.6. Leave out the second, and change the script order to 1) jquery 2) jqueryui 3) prettyPhoto. While you're at it, I'd update your version of jQuery UI as well for good measure. See if that changes anything, post back your results.

    EDIT: I just noticed down at the bottom of your document you also have this:
    Code:
    	<script type="text/javascript" charset="utf-8">
    		$(document).ready(function(){
    			$("a[rel^='prettyPhoto']").prettyPhoto();
    		});
    	</script>
    May as well clean it all up and merge the two onload handlers into a single $(document).ready(), either in the HEAD or at the end of the BODY.

  • #3
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I remove
    Code:
    <script type="text/javascript" src="js/jquery-1.2.6.js" charset="utf-8"></script>
    then the prettyPhoto lightbox starts working, and the slider on my sliderGallery stops working.

    Should I change this:
    Code:
    <script type="text/javascript" src="js/jquery-ui-full-1.5.2.min.js" charset="utf-8"></script>
    to this:
    Code:
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" charset="utf-8"></script>
    ?

    And I don't know how to properly combine that other thing you mentioned.
    =/
    Last edited by pixysnot; 02-18-2010 at 04:13 AM.

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A guy on justanswer.com had this to say about my predicament, maybe it will help?:

    "Slider Gallery insists on 1.2.6. If I load 1.3.0, the slider stops working, but prettyPhoto works like a champ. If I load 1.2.6, Slider Gallery works, but prettyPhoto just sits there and spins when you click on a thumbnail.
    I need to do some research to see if it's possible to load two different versions of jQuery simultaneously. It's unlikely, but I've seen weirder things before. When I have an answer one way or the other, I'll let you know."

    Ok so on that note...
    Would this information tell you guys how to solve my problem?
    Last edited by pixysnot; 02-18-2010 at 04:44 AM.

  • #5
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Ok, I see what you're saying. It is technically possible to run two different versions at the same time, but I would recommend sorting out the issue and choosing two plugins that can interact with the most current version.

    At any rate, that link you've posted basically explains it; you'll want to call jQuery.noConflict(), having reassigned the jQuery variable to something else prior to use, e.g.

    Code:
    <script src="js/jquery-1.2.6.js"></script>
    <script>
    $j_126= $.noConflict(true);
    </script>
    <script src="js/jquery-ui.js"></script>
    
    <script src="js/jquery.js"></script>
    <script src="js/prettyPhoto.js"></script>
    Note in the jquery-ui script, the jQuery object must be referred to as '$j_126' (or whatever you decide to name it). This will entail changing the last line of the UI script, e.g.
    Code:
    })($j_126);
    The newly reference $j_126 version will be passed into the anonymous function and used inside as '$' like normal. You won't have to alter any other parts of the script.
    Last edited by bdl; 02-18-2010 at 05:06 AM.

  • #6
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay so I have jquery-ui-1.7.2.custom.min.js
    It seems to have a lot of scripts in it.
    Does that mean I need to change the last line of all of those from
    Code:
    })(jQuery);;
    to
    Code:
    })($j_126);
    ?

  • #7
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help up to this point. The guy from JustAnswer.com was able to get both scripts working on the one page for me.

    In case anyone wants to see the code, here is the working page.

    Now I can concentrate on putting the rest of the images into the gallery and be on my merry way.
    =)

  • #8
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Pixynot,

    I have the same problem as you had... can you please give me the link to the guy on justanswer who helped you?

    Thanks

  • #9
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    zon nix,

    Did you ever figure out your problem? im having the same issue. anyone have any advice? im trying to use two jquery scripts in one document. both work fine separately, but when both are used only one works.. below is the code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Total City Sports</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>


    <!-- slider -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider1.7.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    numeric: true
    });
    });
    </script> <!-- end slider -->

    <!--bg -->
    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(document).ready(function() {
    $("#body-background").ezBgResize();
    });

    $(window).bind("resize", function(){
    $("#body-background").ezBgResize();
    });
    </script> <!-- end bg-->

    </head>

    <body>

  • #10
    b9d
    b9d is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two Jquery Scripts that are not working together? ME TOO!!!

    I tested it in all browsers and IE is the only one that it NOT cooperating. I tried changing the order of the scripts but it didn't work.

    this is my mark-up

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gastos Medicos::Norma Zamacona Montalvo</title>
    <link rel="stylesheet" type="text/css" href="../css/norma_style.css" media="all"/>
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="../css/ie7fix.css" media="all" />
    <![endif]-->

    <!--SlideShow-->
    <script type="text/javascript" src="../css/jquery.min.js"></script>

    <script type="text/javascript" src="../css/jquery.cycle.all.latest.js"></script>
    <script src="../css/kwick/kwicks1.5.1.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed: 2000,
    random: 1
    });
    });

    </script>

    <script type="text/javascript">
    $().ready(function() {
    $('#example .kwicks').kwicks({
    max: 500,
    spacing: 5
    });
    });


    </script>

    </head>

    ANY ideas or help would be greatly appreciated.

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,635
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    brendanpitt, please don't hijack old threads and cross-post at the same time. This is against the forum rules and/or posting guidelines and is just wasting the time of people that wanna help.

  • #12
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question i,ve the same problem....

    i,ve the same problem.....
    can anyone help me..
    there are 2 jqueries in my page...

    here is the one.....


    <script type="text/javascript" src="jquery.beforeafter.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){ $('#container').beforeAfter({animateIntro:true,imagePath:''});});

    </script>
    <script type="text/javascript">
    //create this naming for Jquery 1.3.2 version
    var jQuery_1_3_2 = $.noConflict(true);
    </script>


    and under that...
    the 2nd ....



    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $("#vtabs1").jVertTabs();
    $("#vtabs2").jVertTabs({
    selected: 1
    });
    $("#vtabs3").jVertTabs({
    select: function(index){
    alert("You clicked tab " + index);
    }
    });
    $("#vtabs4").jVertTabs();
    $("#vtabs5").jVertTabs({
    equalHeights: true
    });
    $("#vtabs6").jVertTabs({
    select: function(index){
    alert("tab " + index + " opened.");
    }
    });
    $("#vtabs6").jVertTabs('selected',3); // select 4th tab, 0-based.
    $("#vtabs7").jVertTabs({
    selected: 1
    });
    $("#vtabs8").jVertTabs();
    $("#vtabs8").jVertTabs('selected',2); // select 3rd tab, 0-based.

    // add click events for open tab buttons
    $("input[id^=openTab]").each(function(index){
    $(this).click(function(){
    openTab("#vtabs6",index);
    return false;
    });
    });
    function openTab(tabId,index){
    $(tabId).jVertTabs('selected',index);
    }
    });
    </script>



    f i remove first 1... than second1 start working....
    .what's the solution to workout both jqueries?????


  •  

    LinkBacks (?)


    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
    •