simple controls gallery feature improvement question ...

**kambiz** · 03-04-2010, 07:33 AM

1) Script Title: Simple Controls Gallery v1.3

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

3) Describe problem:
I'm not an HTML proficient person and was wondering what the code would look like if I wanted to add a simple form to allow a user to jump to a particular image. I know there's the:

<li><a href="javascript:mygallery.navigate(0)">Go to 1st Slide</a></li>

(or n instead of 0, to jump to n+1 slide), is available, but what would the HTML look like that would allow a text box input beneath the images being rendered, with a submit button?

**jscheuer1** · 03-04-2010, 09:27 AM

Here's one way of doing it. Note: I've made a few small additions (highlighted) to the gallery declaration. All additions, including the markup you asked for, which is in the body are highlighted. I also added a play pause button. You'll probably want that.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.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">

simpleGallery_navpanel.panel.height = 0;

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: [false, 2500, 0], //[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"))
		var gal = this;
		jQuery('#navlist').change(function(){gal.navigate(this.value);});
		jQuery('#playpause').click(function(){gal.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>
</head>
<body>
<div id="simplegallery1"></div>
<select id="navlist">
<option value="0">Image #1</option>
<option value="1">Image #2</option>
<option value="2">Image #3</option>
<option value="3">Image #4</option>
</select>
<input id="playpause" type="button" value="Play/Pause">
</body>
</html>

**ddadmin** · 03-04-2010, 09:44 AM

Nice John! To add to it, a text box that would accept a number and jump the slide in question (1=1st slide etc) would look like this:

Code:

<form>
<input type="text" id="jumpto" /><input type="button" onclick="mygallery.navigate(parseInt(document.getElementById('jumpto').value)-1)" />
</form>

Thread: simple controls gallery feature improvement question ...

Thread Tools

Search Thread

simple controls gallery feature improvement question ...

Bookmarks

Bookmarks

Posting Permissions