two Simple galleries, one without navigation

**maslerdanch** · 06-02-2010, 03:35 PM

Ultimate Fade-in slideshow & Simple gallery

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

I would like to use both of them on the same page and cant get them to both work. Is there a way to do this or can I remove the navigation and titles from a second simple gallery where they are not required. I want to cycle the logo through a set of three different colours without navigation popping up on mouseover.

My page

simplegallery1 required to run with navigation.

Code:

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [750, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-dolomites.jpg", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", "Walking Holidays in the Dolomites &amp; South Tyrol"],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-pyrenees.jpg", "http://www.colletts.co.uk/pyrenees/index.html", "_new", "Walking Holidays in the Pyrenees"],
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-yorkshire-dales.jpg", "http://www.eastfieldlodge.co.uk/", "_new", "Walking Breaks in the Yorkshire Dales"]
	],
	autoplay: [true, 8000, 1], //[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>

simplegallery2 required to run without navigation.

Code:

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery2", //ID of main gallery container,
	dimensions: [199, 99], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo.png", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Pyrenees.png", "http://www.colletts.co.uk/pyrenees/index.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Eastfield.png", "http://www.eastfieldlodge.co.uk/", "_new", ""]
	],
	autoplay: [true, 8000, 1], //[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>

Thanks in advance!

**azoomer** · 06-02-2010, 09:41 PM

This works in my browsers:

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>Untitled Document</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<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: [750, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-dolomites.jpg", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", "Walking Holidays in the Dolomites &amp; South Tyrol"],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-pyrenees.jpg", "http://www.colletts.co.uk/pyrenees/index.html", "_new", "Walking Holidays in the Pyrenees"],
["http://colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/walking-holidays-in-the-yorkshire-dales.jpg", "http://www.eastfieldlodge.co.uk/", "_new", "Walking Breaks in the Yorkshire Dales"]
	],
	autoplay: [true, 8000, 10], //[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 type="text/javascript">
var mygallery=new simpleGallery({
	wrapperid: "simplegallery2", //ID of main gallery container,
	dimensions: [199, 99], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo.png", "http://www.colletts.co.uk/colletts_walking_holidays.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Pyrenees.png", "http://www.colletts.co.uk/pyrenees/index.html", "_new", ""],
["http://www.colletts.co.uk/walkingholidays/wp-content/themes/colletts-mountain-holidays/img/Colletts_Logo_Eastfield.png", "http://www.eastfieldlodge.co.uk/", "_new", ""]
	],
	autoplay: [true, 6000, 10], //[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>

<style type="text/css">
#simplegallery1{ 
position: relative;
visibility: hidden;
border: 0;
}
#simplegallery2{ 
position: relative;
visibility: hidden;
border: 0;
}
#simplegallery2 .navpanellayer{ 
display:none;
}
</style>
</head>
<body>
<div id="simplegallery1"></div>
<br />
<br />
<div id="simplegallery2"></div>
</body>
</html>

It is set to 10 cycles now. Adjust as needed

**maslerdanch** · 06-03-2010, 08:06 AM

Code:

/* simple gallery */
#simplegallery2 .navpanellayer{ 
display:none;
}

Works perfectly - thanks - so simple!
Best
Maslerdanch

**maslerdanch** · 06-09-2010, 07:46 AM

Hello - this works fine in firefox but in other browsers - opera, IE etc. I get a 'null' in the top left hand corner - see the image below... Any ideas?

http://colletts.co.uk/walkingholidays/

**maslerdanch** · 06-09-2010, 07:54 AM

Ok so it was the fact I was using a png and 'Null' was showing up behind it.
A problem shared and all that!

Thread: two Simple galleries, one without navigation

Thread Tools

Search Thread

two Simple galleries, one without navigation

Bookmarks

Bookmarks

Posting Permissions