"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
armasmikeAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Need a specific width for the container
<div class="image-absolute-Residential">
		<div id="slider1_container" style="position: absolute; top: 69px; left: 66px; width: 476px; height: 635px;">
			<!-- Slides Container -->
			<div id="slides" u="slides" style="cursor: move; width: 476px; height: 635px; overflow: hidden;">

Open in new window

Working html and css attached
simple-slider.source.html
mike.css
0
 
armasmikeAuthor Commented:
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
0
 
Julian HansenCommented:
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.
0
 
armasmikeAuthor Commented:
thank you
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.