JQuery – 360 Degrees Image Display
Usage:
1. Insert the image list + width and height setup
2. Style the CSS Container
DONE! You don’t need modify the js file
HTML source Code:
<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com -->
<!-- This code come with absolutely no warranty -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance -->
<head>
<title>JQuery - 360 Degrees Image Display</title>
<style type="text/css" media="screen">
.pic360{display:none;overflow:hidden;} /* Hide the div - don't remove this row! */
.pic360 ul,.pic360 li{margin:0; padding:0;} /* All images in the same position */
.pic360 li{list-style:none;} /* Clear default li style */
.pic360{width:400px; margin:10px;border:1px solid #CECECE;} /* Container Style */
</style>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/pic360-1.0.0.js"></script>
</head>
<body>
Image Changes On Hover
<!-- 360 Degree image rotator START -->
<div class="pic360">
<ul>
<!-- USE: -->
<!-- 1. Insert the image list + width and height setup -->
<!-- 2. Style the CSS Container -->
<!-- DONE! You don't need modify the js file -->
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_001.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_002.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_003.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_004.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_005.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_006.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_007.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_008.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_009.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_010.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_011.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_012.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_013.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_014.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_015.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_016.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_017.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_018.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_019.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_020.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_021.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_022.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_023.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_024.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_025.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_026.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_027.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_028.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_029.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_030.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_031.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_032.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_033.jpg" /></li>
<li><img width=480 height=327 src="css/images-gimme-code-2013-0014/rad_zoom_034.jpg" /></li>
</ul>
</div>
<!-- 360 Degree image rotator END -->
</body>
</html>
To work with multiple div:
<div class="pic360"> ... image list ... </div> <div class="pic360"> ... image list ... </div> <div class="pic360"> ... image list ... </div>
pic360-1.0.0.js Source Code:
;(function($) {
$.fn.pic360 = function() {
var first_img = this.find('img:first'); /* Read the first image of the list */
var all_img = this.find('img');
var img_count = all_img.length;
if(img_count==0) return;
var img_width = first_img.width(); /* Read the first image width */
var chg_width = parseInt(img_width/img_count);
var imgs_left = first_img.offset().left;
this.toggle();
all_img.toggle();
first_img.toggle();
this.width(img_width);
this.height(first_img.height()); /* Read the first image height */
var mouseX = 0;
var start = false;
var step = 0;
var curr_step = 0;
var curr_img = 0;
this.mouseover(function(e){
start = true;
if(start){
mouseX = e.screenX;
curr_step=parseInt((mouseX-imgs_left)/chg_width);
step = curr_step;
}
})
this.mouseout(function(e){
start = false;
})
this.mousemove(function(e){
if(start){
curr_step=parseInt((e.screenX-imgs_left)/chg_width);
if(curr_step!=step){
$(all_img[curr_img]).toggle();
if(curr_step>step){
curr_img = curr_img+1;
if(curr_img>=img_count) curr_img=0;
}else{
curr_img = curr_img-1;
if(curr_img<0) curr_img=img_count-1;
}
$(all_img[curr_img]).toggle();
step=curr_step;
}
}
})
};
})(jQuery);
$(document).ready(function(){
$('.pic360').each(function(){$(this).pic360()})
})
DEMO
