[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1559
  • Last Modified:

"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
0
armasmike
Asked:
armasmike
  • 3
  • 2
1 Solution
 
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
 
Julian HansenCommented:
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:
thank you
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now