...

View Full Version : How does apple do this? Image overlay in CSS.



Fon
01-21-2008, 01:00 PM
Okay, so I've made a couple posts about this and I'm curious as to how apple creates overlays that can be closed (see 'x' in upper left corner) and have menus at the bottom of them.

here's a screencap:
http://www.jackfresno.ca/appledesign2.jpg

screencap in link form:
http://www.jackfresno.ca/appledesign2.jpg

here's what i assume is the relevant code:

<div id="content">
<h2>Flat-out stunning.</h2>

<img src="http://images.apple.com/ca/macbookair/images/design_thinair20080115.jpg" alt="" width="920" height="89" border="0" class="across">
<h3>Amazingly thin. Amazingly full-size.</h3>
<p>The thinness of MacBook Air is stirring. But perhaps more impressive, thereís a full-size notebook encased in the sleek, sturdy anodized aluminum enclosure. And at just 3.0 pounds, MacBook Air is more than portable ó itís with you everywhere you go.</p>
<ul class="enlarge">
<li class="enlarge"></li>

<li><a class="overlaythumb" href="http://images.apple.com/ca/macbookair/images/design_gal01_20080115.jpg"><img src="http://images.apple.com/ca/macbookair/images/design_gal01t_20080115.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/ca/macbookair/images/design_gal02_20080115.jpg"><img src="http://images.apple.com/ca/macbookair/images/design_gal02t_20080115.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/ca/macbookair/images/design_gal03_20080115.jpg"><img src="http://images.apple.com/ca/macbookair/images/design_gal03t_20080115.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/ca/macbookair/images/design_gal04_20080115.jpg"><img src="http://images.apple.com/ca/macbookair/images/design_gal04t_20080115.gif" alt="" width="65" height="48" border="0"></a></li>
</ul>

and finally a link to the page:
http://www.apple.com/ca/macbookair/design.html

Thanks in advance for your help. I think the apple page is pretty complex to navigate, but if you can help me sift through ro find what's relevant that would be much appreciated.

Thanks.

jcdevelopment
01-21-2008, 03:56 PM
Its done with extensive javascript, they use kind of an ajax formation and call by id "overlaythumb"...

here the link...

http://www.apple.com/global/scripts/overlay.js

hope that helps...

Josso
03-16-2008, 03:15 PM
OK.
I've tried this in a few hours but nothing works. :o

I've tried to copy all the <head>-content* into my file, but still... Doesn't work. :(

*= <script src="/global/scripts/overlay.js" type="text/javascript" charset="utf-8"></script> -> <script src="http://www.apple.com/global/scripts/overlay.js" type="text/javascript" charset="utf-8"></script> etc. ;)

It's a blank page except for header and this:


<ul class="enlarge">
<li class="enlarge"></li>
<li><a class="overlaythumb" href="http://images.apple.com/macbook/images/design_gal01_20080226.jpg"><img src="http://images.apple.com/macbook/images/design_gal01t_20080226.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/macbook/images/design_gal02_20080226.jpg"><img src="http://images.apple.com/macbook/images/design_gal02t_20080226.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/macbook/images/design_gal03_20080226.jpg"><img src="http://images.apple.com/macbook/images/design_gal03t_20080226.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/macbook/images/design_gal04_20080226.jpg"><img src="http://images.apple.com/macbook/images/design_gal04t_20080226.gif" alt="" width="65" height="48" border="0"></a></li>
<li><a class="overlaythumb" href="http://images.apple.com/macbook/images/design_gal05_20080226.jpg"><img src="http://images.apple.com/macbook/images/design_gal05t_20080226.gif" alt="" width="65" height="48" border="0"></a></li>
</ul>

And I really don't know why it doesn't work.. :confused:

I'm bumping this thread, cause it was the only thread on the whole Google, I could find. :o

Greetings,
- Johan aka Josso, PHP expert - Javascript novice

jlhaslip
03-16-2008, 05:33 PM
Download that js file from the apple page and link it to your own web space.

Josso
03-16-2008, 05:39 PM
Yeah, you should think so... But it doesn't works. :(

Running localhost, so can't show.

VIPStephan
03-16-2008, 06:00 PM
Best would be to copy the entire page (with all related files), change the file paths, and run it. Then you remove irrelevant code step by step, testing if it’s still working after each step, and eventually you end up with a plain page with just the relevant code. This is what you’ll have to use then.

However, I don’t know how far the scripts they use fall under copyright regulations so be careful. If in doubt contact them and ask whether you can use the script(s). If not then you’ll hav to replicate the effect with some free library such as mootools (http://mootools.net/) or prototype (http://prototypejs.org/).

Josso
03-16-2008, 06:04 PM
Best would be to copy the entire page (with all related files), change the file paths, and run it. Then you remove irrelevant code step by step, testing if itís still working after each step, and eventually you end up with a plain page with just the relevant code. This is what youíll have to use then.

However, I donít know how far the scripts they use fall under copyright regulations so be careful. If in doubt contact them and ask whether you can use the script(s). If not then youíll hav to replicate the effect with some free library such as mootools (http://mootools.net/) or prototype (http://prototypejs.org/).

Try that, after I send a mail.
Or should I... :p
It's only for my little Danish site...

Arh.. I'm sending the mail...

I'll be back. ;)

sobrien79
03-16-2008, 09:18 PM
This will get you started.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
background-color: #ccffcc;
display: none;
height: 200px;
left: 50px;
padding: 5px;
position: absolute;
top: 50px;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}

function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
</head>
<body>
<div id="overlay">Hidden content. <a href="#" onclick="hide();">Click me</a> to close.</div>

<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer blandit dapibus dolor. Aliquam accumsan sollicitudin massa. Maecenas orci magna, tincidunt non, viverra eu, dapibus eget, urna. Praesent pellentesque mi vestibulum turpis. Suspendisse imperdiet. Duis felis urna, tincidunt eget, volutpat eu, sagittis ut, purus. Ut ullamcorper magna ut dolor. Fusce scelerisque malesuada massa. Mauris dui. Curabitur hendrerit interdum diam.</p>
<p>Nam bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc enim. Morbi sed nisi vitae purus bibendum vestibulum. Curabitur semper magna ut massa. Aliquam placerat tortor vitae neque. Integer nec diam in dolor cursus mattis. Ut nec ligula. Vestibulum pulvinar nibh. Pellentesque eget quam sit amet velit ornare volutpat. Pellentesque rhoncus nibh quis nulla. Nullam vestibulum scelerisque leo. Proin hendrerit aliquam orci. Sed faucibus dapibus nibh. Nullam sagittis nunc ut velit. Nunc facilisis. Cras elementum.</p>
<p>Phasellus enim odio, auctor at, interdum ac, malesuada et, nulla. Aliquam mauris. Cras ut elit eu lectus rhoncus tempor. Aenean molestie augue vitae pede. Etiam lobortis ultricies pede. Vestibulum urna augue, molestie quis, auctor et, scelerisque vel, sem. Donec dictum congue tellus. Nulla urna nulla, volutpat elementum, luctus vel, sollicitudin vel, magna. Sed vel tortor. Nullam arcu. Vestibulum sit amet magna. In hac habitasse platea dictumst. Proin nisl dolor, bibendum vitae, mattis non, consequat in, dui. Suspendisse rutrum egestas augue. Proin odio pede, malesuada id, nonummy ut, condimentum in, turpis.</p>
<p>Nullam nisi. Donec id lacus. Nulla porta ullamcorper erat. In odio purus, semper eget, viverra ut, accumsan a, lacus. Praesent dictum lorem et eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt, enim et sollicitudin dignissim, augue orci accumsan nunc, vitae eleifend massa metus at odio. Sed aliquam. Maecenas accumsan. Aliquam vehicula. Etiam in justo vitae mi cursus consectetuer. Fusce sed dui quis tellus semper interdum. Nulla dignissim, nibh eget cursus adipiscing, risus leo sagittis dui, mollis pellentesque lorem lorem ac arcu. Phasellus porta congue erat. Integer aliquet nibh in nibh. Quisque sit amet massa nec quam venenatis porttitor. Praesent at augue vehicula mi semper commodo.</p>
<p>Fusce vulputate justo. Mauris erat. Quisque egestas mauris a nibh. Donec in augue sit amet turpis suscipit vestibulum. Curabitur venenatis nisl sit amet felis. Proin molestie, mauris et cursus semper, magna turpis suscipit enim, ac iaculis enim ante at tellus. Suspendisse semper tristique erat. Fusce nec libero id ligula consectetuer mollis. Praesent varius orci scelerisque lectus. Donec sed erat vel urna consequat porta. Proin fringilla, neque nec vulputate molestie, mauris ligula iaculis nunc, vel sollicitudin risus odio at odio. Aenean ornare vestibulum purus. Quisque nisi. Sed dolor lacus, posuere non, posuere in, vulputate a, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed in nibh non tortor auctor porta. In hac habitasse platea dictumst. Fusce vitae lacus.</p>

</body>
</html>

Josso
03-16-2008, 09:23 PM
Thanks, but no thanks.
I know that, but Apple have it way cooler... I know that it's the same, but I think there's a different... (If you can follow me... - Nobody can. xD)

sobrien79
03-16-2008, 09:43 PM
Apple doesn't do anything special with it. They animate the overlay and that's it. The code I gave you is just shows the concept. You click on something and another div somewhere else opens. You can style that div to do whatever you want. And add JavaScript to animate it.

Apostropartheid
03-16-2008, 09:44 PM
What's wrong with Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/)?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum