Simple Controls Gallery v1.3 and Lightbox image viewer 2.03a scripts

1) Script Title: Simple Controls Gallery v1.3, and Lightbox image viewer 2.03a

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...plegallery.htm
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: Simple Controls gallery works on my website, but lightbox2 which I have on the same page doesn't work.

I read about the conflicts that can happen between two scripts, but how do I go about finding the conflicts? Does anyone know right now what conflicts these two scripts have with eachother? Someone probably had this problem already and figured out the cure?

Thanks,
Bob Peterson
http://www.free-digital-photography-...aphy-page.html

Update on this problem. I said it wrong before, with both scripts on the same page, Lightbox will work if I put its head code shown below, after the head code for the simplegallery script in the head section, but then simplegallery just showns a black box and doesn't show the photos?

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


thanks for any help,
Bob

Anyone have a clue what conflicts these two scripts have with each other? I would really appreciate some help on this so I could get them both working on the same page.

Thanks,
Bob

This can be fixed by adding to the simplegallery.js file here:

Code:

---

. . .
                                slideshow.setting[k]=null
                        })
                        slideshow=slideshow.setting=null
                })
        })
}
(function($){
simpleGallery.prototype={

        navigate:function(keyword){
                clearTimeout(this.setting.playtimer)
                this.setting.totalsteps=1000 . . .

---

And then at the very end of the file:

Code:

---

. . . urn null
        },

        setCookie:function(name, value){
                document.cookie = name+"=" + value + ";path=/"
        }
}
})(jQuery.noConflict());

---

Then in the head of your page, this:

Code:

---

<script type="text/javascript" src="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="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: [
                ["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
                ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
                ["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
                ["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
        ],
        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>

---

should come before:

Code:

---

<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" />

---

Thanks John, I added what you recommended to this page, http://www.free-digital-photography-...aphy-page.html, and the simple gallery works but the lightbox image viewer still doesn't work? Any other ideas? Thanks again I really appreciate any help. Bob

All your lightbox script files and its style file are 404 not found. Make sure that they are on the server and that the paths to them as indicated in your page's source code are correct. Also, lightbox has resource images (like a loading image, next/previous images, etc.) make sure those are on the server and in the correct places as well. If these images are missing, lightbox will still work, but it will look funny.

Thanks John. I did have the path to my lightbox files wrong so I fixed that so now lightbox works but simplegallery just has a black box with no photos? thanks again, Bob

Update your live sunset-photography-page.html page so I can see what the problem is.

Okay I added the lightbox scripts to the head, so now it is like the animal photography page, lightbox works but simplegallery is just a black box where the photos are supposed to be displayed.

Thanks for your help John

Ah, I just remembered, lightbox 2.03a will still not work with jQuery, even in noConflict mode. Sorry about that. You need to update your lightbox to 2.04a:

http://www.dynamicdrive.com/forums/s...470#post163470

Everything has changed, except the syntax/usage for the links. There is even an additional javascript file (builder.js). So download the full archive:

http://home.comcast.net/~jscheuer1/s...htbox2.04a.zip

There are some additional files in there for a scroller. You only need the lightbox.js, scriptaculous.js, effects.js, builder.js (new), the lightbox.css and support images. The index.html file is a good template and has instructions. I cannot stress enough that although all the files that 2.03a used that 2.04a also uses have the same names, they are all different in the update. You cannot use any of the old files, except the images.

I did a local mock up of your page with the update to lightbox 2.04a, and both scripts are working fine in it.

John thanks a million for all your help, I finally got everything working together. I really appreciate your helping me, thanks again. Bob