Image Gallery, trouble positioning swapped img

[William M]

This is just beyond my meager abilities.

I've loaded an image viewer that works just great, but I'm not finding a way to get it to get it nailed down to the page. From ImageGallery.ascx:


var control = document.getElementById("OtherImage");
control.style.visibility = "hidden";
}
</script>
<style type="text/css">
.gallerycontainer{
position: absolute;
top: 220px;
left:70px;
right:auto;
padding:0 0 0 0px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height:400px;}


The 'left' control is keying off of the edge of the window causing the image's position to move with the width of the window. I'd like it to be placed directly over the original img.

Can I add (or use) a control in the CSS instead? This is surely pretty simple.

Thanks for any help.

[William M]

bump

[jmestep]

It is a Css thing, as you say. You would just have to experiment with Css absolute, relative, and clear functions.

[mwolf]

It would be easier to give you an answer if you could provide a live example. Do you have a link that you can provide?

[William M]

http://www.medicinecabinetmaker.com/Loc ... t-P51.aspx

I'm getting better at CSS, etc., but this is a little over my head and trial/error gets old quick.

This and the swatch sizes are about the last parts to clear up - plus loading more products.

Thanks.

[mwolf]

See if this works for you. It appears to work in Firefox, but i'm not sure about IE.

.gallerycontainer{
position: absolute;
top: 208px;
right:auto;
padding:0 0 0 0px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height:400px;
}

The left setting doesn't appear to be needed.

[William M]

Master, you're a genius... almost

It's great in FF, quite a somthin' in IE6 (of course).

Gotta center it in Imagespanel - I think?

funny (IE6):

[mwolf]

For reference this is what fixed it.

Put a DIV around the image ConLib calls on Show Product 1.htm:

Code: Select all

<div class="galleryholder">
	[[ConLib:ProductImage ShowImage="Image"]]<br />
	<br /><br />
	[[Conlib:Custom/ImageGallery]]
</div>

Create the galleryholder CSS class.

Code: Select all

.galleryholder{
	position:relative; 
	width:400px; 
	height:510px; 
	top:0px; 
	left:0px;	
}

Adjust the gallerycontainer css class:

Code: Select all

.gallerycontainer{
	position: absolute;
	top:0px;
	left:0px;
	padding:0 0 0 0px;
	/*Add a height attribute and set to largest image's height to prevent overlaying*/
	height:400px;
}

That should do it!