Adding Image x of x under gallery Image

[422]

1) Script Title: SimpleGallery

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

3) Describe problem:

Great little script guys.

We are using this to great success, my issue is. I have set panel height to 0px so as to hide the hover panel.

I have added scripting Underneath the image as such:

<a href="javascript:mygallery.navigate('prev')"><div class="prev-button left back-left" id="go-prevPic"></div></a>
									
									<a href="javascript:mygallery.navigate('next')"><div class="next-button left back-left" id="go-nextPic"></div></a>

So I have the Image gallery.
Underneath it I have < > for left and right navigation.

But I would like < Photo 1 of 4 >

So my question is what would the code be for displaying current image of image array.

So as image changes it changes to < Photo 2 of 4 >
Incidentally this needs to sit outside the div,

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

with my controls.

Etc.

[Nile]

In your settings:

	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
		document.getElementById(this.setting.wrapperid + "_max_page").innerHTML = this.setting.imagearray.length; //get the length of the image array
	},
	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)
		document.getElementById(this.setting.wrapperid + "_cur_page").innerHTML = i+1; //increase 1 to the current page (because of arrays indexing to 0) and display
	}

Then, where you want to put the "x/y" make sure you wrap x in a span with the ID of {wrapperid}_cur_page, and y with the ID of {wrapperid}_max_page. For example:

<span id="simplegallery1_cur_page">0</span> of <span id="simplegallery1_max_page">0</span>

And the highlighted is what you must change to the wrapperid.

Good luck

[422]

Hey thanks NILE.

But I am wondering where in simplegallery.js that I add the JS code.

[Nile]

You don't put it anywhere in simplegallery.js, you put it where you define the new SimpleGallery.

For example, on http://www.dynamicdrive.com/dynamici...plegallery.htm, in step 1, you'll see the following 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>

If you replace the bold blue text with what I've provided you with, it should work fine.

[422]

Cheers works perfect.

Only issue was the trailing ; you initially posted, which is why I couldnt get it working. So the latter portion of that script is now :

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)
		document.getElementById(this.setting.wrapperid + "_cur_page").innerHTML = i+1;
	}
})

</script>

[Nile]

Yes, I was aware of that. I changed it immediately after I posted my second post, sneakily hoping you wouldn't notice. Nice catch though. I'm glad to see you got it working.

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"