Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
160 lines (145 sloc) 6.44 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPicture first demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jQuery.iPicture.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jQuery.iPicture.js"></script>
<style type="text/css">
#slideshow {
position:relative;
}
#slideshow #iPicture {
margin:0 auto;
width:1000px;
/*height:263px;*/
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #iPicture .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #iPicture to avoid horizontal scroll */
/*height:263px;*/
}
/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:74px;
height:128px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
z-index:100;
}
#leftControl {
top:40%;
left:0;
background:transparent url(images/left-gold.png) no-repeat 0 0;
}
#rightControl {
top:40%;
right:0;
background:transparent url(images/right-gold.png) no-repeat 0 0;
}
#pageContainer {
margin:0 auto;
width: 1000px;
}
body{
background-color: #393737;
color: #ffffff;
}
.buttonSave{
color: #ffffff;
border-bottom: 1px dashed #ffffff;
border-top: 1px dashed #ffffff;
}
</style>
<script type="text/javascript">
//override animation methods:
/*$.widget("justmybit.iPicture", $.extend({}, $.justmybit.iPicture.prototype, {
animation: function(){
//write your custom animation function like this:
$(".more span").css('display','none');
//Animation function left to right sliding
$(".more").hover(function(){
$(this).css('display','').find('span').show( 'pulsate', 400 );
}, function () {
$(this).find('span').css('display','none');
});
}
}));*/
jQuery(document).ready(function(){
$( "#iPicture" ).iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1","picture2","picture3","picture4","picture5"],
button: "moreblack",
moreInfos:{"picture1":[{"id":"tooltip1","descr":"furniture: 299$","top":"185px","left":"393px"},{"id":"tooltip2","descr":"sofa: 199$","top":"346px","left":"483px"},{"id":"tooltip3","descr":"silver candle: 2.99$","top":"461px","left":"556px"}],"picture2":[{"id":"tooltip4","descr":"window","top":"71px","left":"423px"},{"id":"tooltip5","descr":"basket","top":"438px","left":"192px"},{"id":"tooltip6","descr":"hoven","top":"460px","left":"673px"}],"picture3":[{"id":"tooltip7","descr":"Organize the kitchen!","top":"391px","left":"560px"},{"id":"tooltip8","descr":"Hoven: 399$","top":"160px","left":"268px"},{"id":"tooltip9","descr":"chest of drawers","top":"386px","left":"180px"}],"picture4":[{"id":"tooltip10","descr":"pasta maker","top":"277px","left":"672px"},{"id":"tooltip11","descr":"stool","top":"291px","left":"281px"},{"id":"tooltip12","descr":"shelf","top":"144px","left":"579px"},{"id":"tooltip13","descr":"Dishes","top":"183px","left":"181px"}],"picture5":[{"id":"tooltip14","descr":"bed: 199$","top":"398px","left":"351px"},{"id":"tooltip15","descr":"asian style lamp","top":"146px","left":"380px"},{"id":"tooltip16","descr":"console: 105$","top":"273px","left":"567px"}]},
modify: true,
initialize: false
});
var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#iPicture').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl" title="go to previous picture">Clicking moves left</span>')
.append('<span class="control" id="rightControl" title="go to next picture">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
</head>
<body>
<div id="pageContainer">
<h1>iPicture slideshow demo</h1>
<div id="slideshow">
<div id="iPicture">
<div class="slide"><div id="picture1" style="background: url('images/christmas.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
<div class="slide"><div id="picture2" style="background: url('images/kitchen.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
<div class="slide"><div id="picture3" style="background: url('images/kitchen2.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
<div class="slide"><div id="picture4" style="background: url('images/kitchen3.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
<div class="slide"><div id="picture5" style="background: url('images/bedroom.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div>
</div>
</div>
</div>
</body>
</html>