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

    More jQuery, Prototype Conflicts Help!!

    So I am running prototype and two different jquery scripts on my page. One of them is a scroller which I implemented my prototype into...and another is a slideshow.

    THe scroller is working perfectly (after I implemented the noconflict with the scroller) but I can not get the prototype and the slideshow to run properly. It seems like the conflict lies with the prototype.js file and the scripts that are required for the scroller to work. THe code is below:

    <!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>Stacy's Portfolio</title>



    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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

    <link rel="stylesheet" type="text/css" href="style2.css" title="default" />
    <link rel="stylesheet" type="text/css" href="menu2.css" title="default" />
    <link rel="stylesheet" type="text/css" href="stylescroll2.css" title="default" />

    <link rel="alternate stylesheet" type="text/css" href="style.css" title="blue" />
    <link rel="alternate stylesheet" type="text/css" href="menu.css" title="blue" />
    <link rel="stylesheet" type="text/css" href="stylescroll.css" title="blue" />



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/scmenu.js"></script>

    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

    <style type="text/css">

    /*Make sure your page contains a valid doctype at the top*/
    #simplegallery1{ //CSS for Simple Gallery Example 1
    position: relative; /*keep this intact*/
    visibility: hidden; /*keep this intact*/
    border: 10px solid darkred;
    }

    #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
    text-align: left;
    padding: 2px 5px;
    }

    </style>

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

    /***********************************************
    * Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>

    <script type="text/javascript">

    var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
    ["slideshow/bloomsbr.jpg", "", "", "Ambassadors Bloomsbury Booklet"],
    ["slideshow/pinkberry.jpg", "", "", "Pinkberry Button Menu"],
    ["slideshow/abc2.jpg", "", "", "Greek & Roman Mythology Alphabet Book"],
    ["slideshow/corioflyer.jpg", "", "", "Club Flyer"],
    ["slideshow/mmcd.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "CD Cover"],
    ["slideshow/netanya.jpg", "http://en.wikipedia.org/wiki/Cave", "", "Wedding Invitation"],
    ["slideshow/abc1.jpg", "", "", "Greek & Roman Mythology Alphabet Book"],

    ],
    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
    //Keyword "this": references current gallery instance
    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
    })

    </script>

    <script>
    jQuery.noConflict();
    </script>


    </head>

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

    Other Scripts

    View slideshow gallery scripts here

    http://www.dynamicdrive.com/dynamici...plegallery.htm

    Prototype.js V1.4.0
    Scriptulous.js V1.5.1
    Lightbox.js V2.03
    Last edited by MissVy; 08-01-2009 at 10:48 AM.

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Uzbekistan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To start with, you're including 2 jquery.js files. One from google servers and one from your server.

    Anyway, try to put jQuery.noConflict() code before prototype code like this:

    Code:
    <script>
    jQuery.noConflict();
    </script>
    
    <script type="text/javascript">
    var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: ...
    </script>
    It's explained in here - jQuery.noConflict()


  •  

    Posting Permissions

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