Page 1 of 1

Image Gallery, trouble positioning swapped img

Posted: Thu Apr 23, 2009 6:22 am
by 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.

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 5:01 am
by William M
bump

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 6:32 am
by jmestep
It is a Css thing, as you say. You would just have to experiment with Css absolute, relative, and clear functions.

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 7:38 am
by 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?

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 7:44 am
by 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.

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 8:09 am
by 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.

Re: Image Gallery, trouble positioning swapped img

Posted: Fri Apr 24, 2009 8:32 am
by 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):

Re: Image Gallery, trouble positioning swapped img

Posted: Wed Apr 29, 2009 10:11 am
by 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!