Solved

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

Posted on 2014-04-23
6
1,156 Views
Last Modified: 2014-04-24
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
Comment
Question by:armasmike
  • 3
  • 2
6 Comments
 

Author Comment

by:armasmike
ID: 40018129
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40019386
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
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40019400
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
 

Author Closing Comment

by:armasmike
ID: 40020039
thank you
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40020279
You are welcome - thanks for the points.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question