Solved

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

Posted on 2014-04-23
6
1,235 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 56

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 56

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 56

Expert Comment

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

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Getting selected value using Jquery 3 21
Making Table Thru ASP Response.write 5 19
DataTable column sorting incorrectly 2 21
null, truthy, falsey confusion 25 32
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 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