Simple Controls Gallery - controls outside of images?

[toolman]

1) Script Title: Simple Controls Gallery

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

3) Describe problem:

Hi there,

Is it possible to place the controls and image number outside of the image so the controls are always visible?

Thanks!

[jscheuer1]

For the first gallery, add these styles (tested in FF only):

.navpanellayer {
top: auto!important;
bottom: 0;
}
#simplegallery1{
padding-bottom: 50px;
}

[toolman]

Excellent! Many thanks. I am actually trying to place those controls on the other side of the page instead of under the image. Is that at all possible?

[jscheuer1]

Well, I just got lucky first shot modifying this brand new script which I'd never even heard of before. However, there would probably need to be a rewrite of the code to get the controls out of the gallery proper, as the script generates the controls' markup and places it inside the wrapperid main gallery container from which they cannot escape, owing to its style overflow which is also required for the proper display of the images.

Though we may be able to permanently hide the native controls and make others that appear elsewhere, but function in the same manner. I'd have to go over the script code for that.

There are other scripts that function differently. I'm currently in beta with one that will allow controls to appear anywhere on the page, but the controls function slightly differently if you go backward or forward it stops the sliding effect, which can be resumed. And there are many many more options for controls and layout of everything involved.

If you are interested, let me know. A demo that shows a lot of the possibilities is here:

http://home.comcast.net/~jscheuer1/s.../vac_plain.htm

None of what is on that page must appear, so you could have just a slide show with a few of the controls, no thumbnails. Or no slideshow with just thumbnails to select the larger image for display. Many many options. The controls can be script generated as those are, or you may design the look of them yourself using images and links.

[jscheuer1]

OK, I figured out a way to get the controls out of the gallery. Use these styles (the exact placement and styles of the #simpc1 division is up to you, these are the now mobile controls, they can go anywhere. If using more than one gallery, it's id must be unique to each gallery):

.navpanellayer {
position: static!important;
}
.navpanellayer div {
position: relative!important;
top: auto!important;
}
.navpanellayer div.navpanellayerfg {
top: -2px!important;
}
.navpanellayerbg {
display: none;
}
#simpc1 {
background-color: gray;
width: 150px;
float: right;
}

Add to the call for the gallery:

<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"],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
		["http://i30.tinypic.com/531q3n.jpg", "", ""],
		["http://i31.tinypic.com/119w28m.jpg", "", ""]
	],
	autoplay: true,
	persist: false,
	pause: 2500, //pause between slides (milliseconds)
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
	var d = document.getElementById(this.wrapperid).getElementsByTagName('div'), c, i;
	for (i = d.length - 1; i > -1; --i)
	if (d[i].className == 'navpanellayer'){
	c = d[i];
	break;
	}
	document.getElementById('simpc1').appendChild(c.parentNode.removeChild(c));
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//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>

Then in the body, for example:

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

Here's a demo, where I used slightly different style and markup for the external controls, so as to place them just beneath the gallery and match their background color to the gallery border to get an integrated look to it:

http://home.comcast.net/~jscheuer1/side/simple_gal/