how to centerly position image in Simple Controls Gallery v1.4

[orggilak]

1) Script Title: Simple Controls Gallery v1.4

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

3) Describe problem: i want to put pictures that are different in sizes.some of the pictures are smaller than the dimensions of the slideshow gallery (refer to the script below).the smaller picture comes out on the top left and it's not a nice to see (refer to image below).how do i make all the pictures regardless of size positioned horizontally and vertically center on the slideshow?

Thank You


dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly

[jscheuer1]

Use this modified version of the script (right click and 'Save As'):

simplegallery_center_ims.js

Set the dimensions of the gallery to the width of the widest image, and the height of the tallest image. There is a new optional background property for setting the background color of the gallery (defaults to 'black', any valid css value for background, including those for url, position, etc. may be used), example gallery:

var mygallery2=new simpleGallery({
	wrapperid: "simplegallery2", //ID of main gallery container,
	dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the width of the widest image, and the height of the tallest image
	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://www.dynamicdrive.com/dynamicindex4/amster1.jpg", "http://en.wikipedia.org/wiki/Amsterdam", "_new"],
		["http://www.dynamicdrive.com/dynamicindex4/amster2.jpg", "http://en.wikipedia.org/wiki/Amsterdam", ""],
		["http://www.dynamicdrive.com/dynamicindex4/amster3.jpg", "", ""],
		["http://www.dynamicdrive.com/dynamicindex4/amster4.jpg", "", ""]
	],
	autoplay: [false, 3000],
	persist: true,
	background: 'white', //background style for gallery
	fadeduration: 1000, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run

	},
	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)
	}
})

[orggilak]

it works! thank you very much.i really appreciate your response.have a very nice day.god bless you

[orggilak]

update:

in your new simplegallery_center_ims.js I realised on line 67 it should be:

.css({position:'absolute', left:0,top:0, width: setting.dimensions[0]/2, height: setting.dimensions[1]/2, background: setting.background || 'black'})

instead of

.css({position:'absolute', left:0,top:0, width: setting.dimensions[0], height: setting.dimensions[1], background: setting.background || 'black'})

then the picture will be on the center horizontally and vertically

[jscheuer1]

I don't think so. I tested it and it works as I have it. Perhaps there's something else going on with your styles, layout, and/or how you've set the dimensions for the gallery in the on page call. In any case, what you've done will not affect the centering if everything else is OK. The change you've made would result in bleed through of larger images to the right and bottom of smaller images. Perhaps you're viewing cached copies, once you catch up to your current version you should notice the bleed through. Or, as I say, other things about the page make that change work for you.

But, as long as it's working for you, that's fine by me.

Here's a demo of it using my code:

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

[idrieskens@hotmail.com]

I want to put pictures that are different in sizes in center of the gallery.

This is my code:

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery2{ //CSS for Simple Gallery Example 1
position: relative ; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery2 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

#simplegallery2 .image {
position: absolute;
overflow: hidden;
top: 0;
left: auto;
right:auto;
}


</style>

<script type="text/javascript" src="js/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: "simplegallery2", //ID of main gallery container,
dimensions: [725, 550], //dimensions: [725, 550]original 250/180 width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/fotogalerij septon/03okt 147.jpg", "center", "_new", "geautomatiseerde douches"],
["images/fotogalerij septon/03okt 150.jpg", "", "", ""],["images/fotogalerij septon/03okt 157.jpg", "", "", ""],[ "images/fotogalerij septon/03okt 158.jpg" , "", "", ""],["images/fotogalerij septon/08juni 011.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?
background: 'white', //background style for gallery
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>

<div id="simplegallery2"></div>

[djr33]

If you have a new question please start a new thread. I'm closing this one.
(If you'd like, you can link back to this one.)

[jscheuer1]

I just noticed that the link to the updated version of the script was lost. I've just replaced it. See (post #2 in this thread):

http://www.dynamicdrive.com/forums/s...216#post253216

to get it.

But as Daniel said, this is an old thread. If you have more questions, please start a new thread for them