|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<style>
.screenshot-carousel {position:relative; height:400px; width:650px;}
.screenshot-carousel .screenshot-carousel-outer-container {height:400px; overflow:hidden; position:absolute; width:650px;}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container {height:400px; width:10000px; white-space:nowrap;}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container .screenshot-image-wrapper {
display:inline-block; float:left;
}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container .screenshot-image-wrapper .screenshot-image {
display:inline-block; max-height:400px; max-width:250px; vertical-align:bottom; padding-right:10px; border:0; margin:0;
}
.screenshot-carousel .screenshot-carousel-button-previous,
.screenshot-carousel .screenshot-carousel-button-next,
.screenshot-carousel .screenshot-carousel-left-fade,
.screenshot-carousel .screenshot-carousel-right-fade {position:absolute;}
.screenshot-carousel .screenshot-carousel-button-previous,
.screenshot-carousel .screenshot-carousel-button-next {margin-top:184px; z-index:20; cursor:pointer;}
.screenshot-carousel .screenshot-carousel-button-previous {background:no-repeat url('images/sprites.png') -248px 0; height:32px; width:32px; display:none;}
.screenshot-carousel .screenshot-carousel-button-next {background:no-repeat url('images/sprites.png') -91px -266px; height:32px; width:32px; right:0; display:none;}
.screenshot-carousel .screenshot-carousel-left-fade,
.screenshot-carousel .screenshot-carousel-right-fade {width:50px; height:400px; z-index:10; cursor:pointer;}
.screenshot-carousel .screenshot-carousel-left-fade {display:none;}
.screenshot-carousel .screenshot-carousel-right-fade {right:0; display:none;}
/* -moz-opacity:0.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);margin-top:70px;opacity:0.4 */
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
(function($) {
$.fn.extend({
screenshot : function(opt) {
var settings = {
speed : 400
}
$.extend(true, settings, opt);
var _this = $(this);
var _outer = _this.find('.screenshot-carousel-outer-container');
var _content = _outer.find('.screenshot-carousel-content-container');
var _wrapper = _content.find('.screenshot-image-wrapper');
var _leftFade = _this.find('.screenshot-carousel-left-fade');
var _rightFade = _this.find('.screenshot-carousel-right-fade');
var _btnPrev = _this.find('.screenshot-carousel-button-previous').add(_leftFade);
var _btnNext = _this.find('.screenshot-carousel-button-next').add(_rightFade);
var pos = 0;
var outerWidth = _outer.width();
//var wrapperWidth = _wrapper.eq(0).outerWidth(true);
var wrapperWidth = _wrapper.eq(0).width();
var contentWidth = wrapperWidth * _wrapper.length;
_content.width(contentWidth);
if(contentWidth > outerWidth) {
_btnNext.show();
} else {
return false;
}
_btnPrev.on({
'mouseenter' : function() {
_leftFade.stop().animate({width:75}, {duration:100});
},
'mouseleave' : function() {
_leftFade.stop().animate({width:50}, {duration:100});
},
'click' : function() {
if(pos == contentWidth - outerWidth) {
pos -= 450;
} else {
pos -= wrapperWidth * 2;
}
if(pos < 0) {
pos = 0;
_btnPrev.hide();
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
_btnNext.show();
}
});
_btnNext.on({
'mouseenter' : function() {
_rightFade.stop().animate({width:75}, {duration:100});
},
'mouseleave' : function() {
_rightFade.stop().animate({width:50}, {duration:100});
},
'click' : function() {
if(pos == 0) {
pos += 450;
} else {
pos += wrapperWidth * 2;
}
if(pos + outerWidth > contentWidth) {
pos = contentWidth - outerWidth;
_btnNext.hide();
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
_btnPrev.show();
}
});
}
});
})(jQuery);
jQuery(function($) {
$('.screenshot-carousel').screenshot();
});
</script>
</head>
<body>
<div class="screenshot-carousel">
<div class="screenshot-carousel-button-previous"></div>
<img src="images/left_fade.png" class="screenshot-carousel-left-fade" />
<div class="screenshot-carousel-outer-container">
<div class="screenshot-carousel-content-container">
<div class="screenshot-image-wrapper"><img src="images/screenshot5.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot4.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot4.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
<div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
</div>
</div>
<img src="images/right_fade.png" class="screenshot-carousel-right-fade" />
<div class="screenshot-carousel-button-next"></div>
</div>
</body>
</html> |
google_screenshot.zip
index.html