Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 13ea2ddf0c
Fetching contributors…

Cannot retrieve contributors at this time

166 lines (151 sloc) 8.909 kb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ipad simulator</title>
<meta name="description" content="This is a jquery iPad simulator, this is only an experiment o what can be done with javascript in ast browsers">
<meta name="keywords" content="Ipad, ipad simulator, apple ipad, alexw.me, altryne, alex wolkov, ipad javascript simulator">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style/main.css" type="text/css" media="screen"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="js/jquery.css.transform.js"></script>
<!-- <script type="text/javascript" src="js/jquery.css.rotate.js"></script>-->
<script type="text/javascript" src="js/jquery.loadImages.1.0.1.min.js"></script>
<script type="text/javascript">
album = Array();
album[0] = ["photos/ipad_photos (1).jpg", "photos/ipad_photos (2).jpg", "photos/ipad_photos (3).jpg", "photos/ipad_photos (4).jpg", "photos/ipad_photos (5).jpg", "photos/ipad_photos (6).jpg", "photos/ipad_photos (7).jpg", "photos/ipad_photos (8).jpg", "photos/ipad_photos (9).jpg", "photos/ipad_photos (10).jpg", "photos/ipad_photos (11).jpg", "photos/ipad_photos (12).jpg", "photos/ipad_photos (13).jpg", "photos/ipad_photos (14).jpg", "photos/ipad_photos (15).jpg", "photos/ipad_photos (16).jpg", "photos/ipad_photos (17).jpg", "photos/ipad_photos (18).jpg", "photos/ipad_photos (19).jpg", "photos/ipad_photos (20).jpg", "photos/ipad_photos (21).jpg", "photos/ipad_photos (22).jpg", "photos/ipad_photos (23).jpg", "photos/ipad_photos (24).jpg", "photos/ipad_photos (25).jpg"];
album[1] = ["photos/ipad_photos (1).jpg", "photos/ipad_photos (2).jpg", "photos/ipad_photos (3).jpg", "photos/ipad_photos (4).jpg", "photos/ipad_photos (5).jpg", "photos/ipad_photos (6).jpg", "photos/ipad_photos (7).jpg", "photos/ipad_photos (8).jpg", "photos/ipad_photos (9).jpg", "photos/ipad_photos (10).jpg", "photos/ipad_photos (11).jpg", "photos/ipad_photos (12).jpg", "photos/ipad_photos (13).jpg", "photos/ipad_photos (14).jpg", "photos/ipad_photos (15).jpg", "photos/ipad_photos (16).jpg", "photos/ipad_photos (17).jpg", "photos/ipad_photos (18).jpg", "photos/ipad_photos (19).jpg", "photos/ipad_photos (20).jpg", "photos/ipad_photos (21).jpg", "photos/ipad_photos (22).jpg", "photos/ipad_photos (23).jpg", "photos/ipad_photos (24).jpg", "photos/ipad_photos (25).jpg"];
album[2] = ["photos/ipad_photos (1).jpg", "photos/ipad_photos (2).jpg", "photos/ipad_photos (3).jpg", "photos/ipad_photos (4).jpg", "photos/ipad_photos (5).jpg", "photos/ipad_photos (6).jpg", "photos/ipad_photos (7).jpg", "photos/ipad_photos (8).jpg", "photos/ipad_photos (9).jpg", "photos/ipad_photos (10).jpg", "photos/ipad_photos (11).jpg", "photos/ipad_photos (12).jpg", "photos/ipad_photos (13).jpg", "photos/ipad_photos (14).jpg", "photos/ipad_photos (15).jpg", "photos/ipad_photos (16).jpg", "photos/ipad_photos (17).jpg", "photos/ipad_photos (18).jpg", "photos/ipad_photos (19).jpg", "photos/ipad_photos (20).jpg", "photos/ipad_photos (21).jpg", "photos/ipad_photos (22).jpg", "photos/ipad_photos (23).jpg", "photos/ipad_photos (24).jpg", "photos/ipad_photos (25).jpg"];
album_screen = true;
$(document).ready(function(){
$.loadImages(["img/hold.jpg","img/ajax-loader.gif"],function(){
_temp = Array();
$.each(album,function(i){
_temp[i] = '';
$.each(album[i],function(j){
_temp[i] += '<img alt="" data-src="'+album[i][j]+'"/>';
})
});
$('.album').each(function(i){
$(this).append($(_temp[i]));
});
album_cache = $('.album img');
album_cache.each(function(i){
$(this).data({'left':$(this).position().left,'top':$(this).position().top});
})
});
});
$(window).load(function() {
$.loadImages(album[0].concat(album[1],album[2]), albumLoaded());
});
$('.album img:last-child').live('mouseenter mouseleave click',function(e){
_cache = $(this).parent().find('img');
_top_cache = _cache.slice(-4,-1);
switch(e.type){
case 'mouseenter':
expand(_top_cache);
break;
case 'click':
expand_full(_cache);
break;
case 'mouseleave':
contract(_top_cache);
break;
}
});
function expand(obj_arr){
if (album_screen) {
obj_arr.each(function(i) {
$(this).data({'orig_rot':$(this).rotate(),'orig_pos':$(this).position()})
.rotate($(this).rotate()).css({'left':$(this).position().left,top:$(this).position().top})
.animate({
rotate:(Math.floor(Math.random() * 120) - 60) + 'deg',
left:$(this).position().left + (Math.floor(Math.random() * 60) - 10),
top:$(this).position().top + (Math.floor(Math.random() * 60))
}, 500);
});
}
}
function expand_full(obj_arr) {
album_screen = false;
obj_arr.each(function(i) {
$(this).rotate($(this).rotate()).css({'left':$(this).position().left,top:$(this).position().top})
.animate({
rotate:0,
left:$(this).data('left') + (($(this).data('left')-$(this).position().left) / 40),
top:$(this).data('top') + (($(this).data('top') - $(this).position().top) / 40),
width:98,
height:57
}, 700)
.animate({
left:$(this).data('left'),
top:$(this).data('top')
}, 200);
});
}
function contract(obj_arr){
if (album_screen) {
obj_arr.each(function(i) {
$(this).stop().clearQueue().animate({
rotate:$(this).data('orig_rot'),
left:$(this).data('orig_pos').left,
top:$(this).data('orig_pos').top
}, 500);
});
}
}
function albumLoaded() {
$('.album').addClass('loaded');
_album_cache = $('.album img');
_album_cache.each(function(i) {
$(this).attr('src', $(this).data('src'))
.addClass('stacked')
.css({'position':'absolute'});
_index = $(this).parent().children().index($(this));
switch ($(this).parent().children().length - _index) {
case 3:
$(this).rotate('10deg');
break;
case 2:
$(this).rotate('-10deg');
break;
case 1:
$(this).addClass('main');
break;
default:
break;
}
})
setTimeout(remove_hold,5000);
};
function remove_hold(){
$("#please_hold").toggle(800);
}
</script>
</head>
<body>
<div id="photos">
<div id="navbar">
</div>
<div id="please_hold"></div>
<div id="photos_cont">
<div id="album0" class="album" data-index="0">
</div>
<div id="album1" class="album" data-index="1">
</div>
<div id="album2" class="album" data-index="1">
</div>
</div>
<script>
var _gaq = [['_setAccount', 'UA-7437527-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.