Simple Controls Gallery pass image array as variable

[Lol999]

1) Script Title: Simple Controls Gallery v1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem: I'm trying to utilise the simple controls gallery to display different sets of images through a SINGLE instance of the gallery. I plan to do this by using the "onClick" function to pass an image array to the gallery software. My first step has been to create a variable, imgList, assign an image array to it and attempt to pass this variable to the simple controls gallery, but it's not working! No images, no controls, nothing. I suspect it's a syntax problem but as my js is very basic i have run out of ideas. if someone could look at the code I would be grateful.
Thanks.

<script type="text/javascript">
var imgList="";
imgList=[
["Samurai/Images/Small/001.jpg", "LargeImage.htm?image=Samurai/Images/Large/001.jpg", "", ""],
["Samurai/Images/Small/004.jpg", "LargeImage.htm?image=Samurai/Images/Large/004.jpg", "", ""],
["Samurai/Images/Small/005.jpg", "LargeImage.htm?image=Samurai/Images/Large/005.jpg", "", ""],
["Samurai/Images/Small/006.jpg", "LargeImage.htm?image=Samurai/Images/Large/006.jpg", "", ""],
["Samurai/Images/Small/007.jpg", "LargeImage.htm?image=Samurai/Images/Large/007.jpg", "", ""],
["Samurai/Images/Small/011.jpg", "LargeImage.htm?image=Samurai/Images/Large/011.jpg", "", ""],
["Samurai/Images/Small/027.jpg", "LargeImage.htm?image=Samurai/Images/Large/027.jpg", "", ""],
["Samurai/Images/Small/035.jpg", "LargeImage.htm?image=Samurai/Images/Large/035.jpg", "", ""],
["Samurai/Images/Small/044.jpg", "LargeImage.htm?image=Samurai/Images/Large/044.jpg", "", ""],
["Samurai/Images/Small/046.jpg", "LargeImage.htm?image=Samurai/Images/Large/046.jpg", "", ""],
["Samurai/Images/Small/0182.jpg", "LargeImage.htm?image=Samurai/Images/Large/0182.jpg", "", ""],
["Samurai/Images/Small/0232.jpg", "LargeImage.htm?image=Samurai/Images/Large/0232.jpg", "", ""],
["Samurai/Images/Small/234.jpg", "LargeImage.htm?image=Samurai/Images/Large/234.jpg", "", ""],
["Samurai/Images/Small/236.jpg", "LargeImage.htm?image=Samurai/Images/Large/236.jpg", "", ""],
["Samurai/Images/Small/238.jpg", "LargeImage.htm?image=Samurai/Images/Large/238.jpg", "", ""],
["Samurai/Images/Small/240.jpg", "LargeImage.htm?image=Samurai/Images/Large/240.jpg", "", ""],
["Samurai/Images/Small/242.jpg", "LargeImage.htm?image=Samurai/Images/Large/242.jpg", "", ""],
["Samurai/Images/Small/244.jpg", "LargeImage.htm?image=Samurai/Images/Large/244.jpg", "", ""],
["Samurai/Images/Small/246.jpg", "LargeImage.htm?image=Samurai/Images/Large/246.jpg", "", ""],
["Samurai/Images/Small/248.jpg", "LargeImage.htm?image=Samurai/Images/Large/248.jpg", "", ""],
["Samurai/Images/Small/250.jpg", "LargeImage.htm?image=Samurai/Images/Large/250.jpg", "", ""]
],
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [800, 674], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray : imgList
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>

[ddadmin]

To do this you basically have to reinitialize the gallery (by calling new simpleGallery(defaultsetting)) and overwrite the contents of the existing gallery in the process with the desired set of images. Here's a complete working example with the new code highlighted in red:


<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 defaultsetting={
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)
}
}

var altsetting=jQuery.extend({}, defaultsetting,
{
imagearray: [
["dd.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
["dd2.gif", "http://en.wikipedia.org/wiki/Cave", "", ""],
["dd3.gif", "", "", "Eat your fruits, it's good for you!"],
["dd4.gif", "", "", ""]
]}
)

function updatesimplegallery(galleryid, newsetting){
jQuery('#'+galleryid).empty()
mygallery=new simpleGallery(newsetting)
}


var mygallery=new simpleGallery(defaultsetting)

</script>

<body>

<div id="simplegallery1"></div>

<a href="javascript:updatesimplegallery('simplegallery1', altsetting)">Update gallery</a>

First, you need to cache the contents of your default setting object, in this case, by storing it inside a variable called "defaultsetting". Then, for your 2nd set of setting object containing the new images, create it by duplicating the default setting except with the new image array substituted by doing this:


var altsetting=jQuery.extend({}, defaultsetting,
{
imagearray: [
["dd.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
["dd2.gif", "http://en.wikipedia.org/wiki/Cave", "", ""],
["dd3.gif", "", "", "Eat your fruits, it's good for you!"],
["dd4.gif", "", "", ""]
]}
)

"altsetting" is now the name of your 2nd setting object. Then, use the below function to reinitialize a Simple Gallery on your page to utilize a different setting object:


function updatesimplegallery(galleryid, newsetting){
jQuery('#'+galleryid).empty()
mygallery=new simpleGallery(newsetting)
}


A demo of this function is shown at the end of the code posted, in this case a link that updates the Simple Gallery with wrapperid "simplegallery1" to use the setting object "altsetting" when clicked on:


<a href="javascript:updatesimplegallery('simplegallery1', altsetting)">Update gallery</a>

[Lol999]

Thanks for a really detailed answer! I look forward to trying it out.
many thanks, Lol