Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Fon
    Fon is offline
    New Coder
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How does apple do this? Image overlay in CSS.

    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:


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

    here's what i assume is the relevant code:
    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.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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...

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK.
    I've tried this in a few hours but nothing works.

    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:

    Code:
    				<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..

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

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

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Download that js file from the apple page and link it to your own web space.

  • #5
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, you should think so... But it doesn't works.

    Running localhost, so can't show.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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 or prototype.

  • #7
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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 or prototype.
    Try that, after I send a mail.
    Or should I...
    It's only for my little Danish site...

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

    I'll be back.

  • #8
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    This will get you started.

    Code:
    <!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>

  • #9
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #10
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    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.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    What's wrong with Lightbox 2?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •