asked on

"Frame" a jQuery image slider inside an image of an iPad

I found a jquery image slide very simple. I want to add a image of a ipad with the middle being transparent. And the image slider is in the middle.

I have all the files and code but don't know how to put them together.

Thank you
mike-test.zip

armasmike

ASKER

ok i got it kind of working. but when i change the size of IE it moves and then doesn't look right.
mike-test-v2.zip

Julian Hansen

The idea is to create a container for the slider and position on the screen where you want it - don't make the container the width of the screen. If you want to centre the container then use the margin: 0 auto on the container to centre it.
Put the slides in the container relative to the container
First change your html to this

...
<body style="font-family:Arial, Verdana;background-color:#fff;">
	<div class="image-absolute-Residential">
		<div id="slider1_container" style="position: absolute; top: 69px; left: 66px; ">
			<!-- Slides Container -->
			<div u="slides" style="cursor: move; width: 476px; height: 635px; overflow: hidden;">
...

Open in new window

Finally change your mike.css file to

.image-absolute-Residential {
	margin: 0 auto;
	width: 476px;
	height: 831px;
	position: relative;
}
#ipad {
	width: 476px;
	height: 831px;
	background: transparent url(ipad-Residential.png) no-repeat center top;
	z-index: 10000;
	position: absolute;
	padding: 0 67px;
	left: 0;
	top: 0;
}

Open in new window

What we have done here is create a container that is the right size to hold the slider and overlay image and positioned that where we want it.
Next we make the child elements relative to the parent.
First we put the slider in - because it needs to be at the bottom of the pile.
Next we put a div in that overlays the slider and contains the ipad image that will cover the slider.

That sorts out the styling. Slider still not working due to a javascript error - will post back with that fix soon.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

armasmike

ASKER

thank you

Julian Hansen

You are welcome - thanks for the points.

&quot;Frame&quot; a jQuery image slider inside an image of an iPad

"Frame" a jQuery image slider inside an image of an iPad