armasmike
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
I have all the files and code but don't know how to put them together.
Thank you
mike-test.zip
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
Finally change your mike.css file to
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.
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;">
...
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;
}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thank you
You are welcome - thanks for the points.
ASKER
mike-test-v2.zip