Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/main.html

Created July 30, 2012 15:45
Show Gist options
  • Save electricg/3207924 to your computer and use it in GitHub Desktop.
Save electricg/3207924 to your computer and use it in GitHub Desktop.
Download ZIP
Rotate jquery plugin - temp
Raw
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rotation</title>
<style type="text/css" media="screen">
.wrapper {
width: 320px;
}
.video-thumbnail {
/*display: inline-block;*/
position: relative;
}
.video-thumbnail a {
display: block;
}
.video-thumbnail-time {
color: #FFF;
font-size: 0.7em;
font-weight: bold;
left: 0;
padding: 1px 5px;
position: absolute;
top: 0;
z-index: 2
}
.time-01 { background-color: #53A24E; }
.time-02 { background-color: #DBE841; }
.time-03 { background-color: #9BB5C2; }
.video-thumbnail-item {
position: relative;
z-index: 1;
}
.video-thumbnail-item img {
display: block;
/*max-width: 100%;
width: auto;*/
width: 100%;
}
.info {
border-radius: 100px 0 0 100px;
bottom: 0;
left: 0;
margin: 5px;
padding: 3px 4px 4px;
position: absolute;
width: 0;
z-index: 2;
-webkit-transition: width 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: width 0.3s ease-out; /* FF4+ */
-o-transition: width 0.3s ease-out; /* Opera 10.5+ */
transition: width 0.3s ease-out;
}
.info:hover {
background-color: #232323;
background-color: rgba(35, 35, 35, 0.7);
width: 70%;
-webkit-transition: width 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: width 0.3s ease-out; /* FF4+ */
-o-transition: width 0.3s ease-out; /* Opera 10.5+ */
transition: width 0.3s ease-out;
}
.info:hover .info-content {
/*display: inline-block;*/
}
.info-content {
color: #919191;
display: none;
font-size: 0.7em;
padding-left: 5%;
}
.icon-info {
display: inline-block;
}
.icon-info::before {
background-color: #919191;
background-color: rgba(145, 145, 145, 0.7);
border-radius: 100px;
color: #232323;
content: "i";
display: block;
font-family: Arial , sans-serif;
font-weight: bold;
padding: 2px 0 1px;
text-align: center;
width: 25px;
}
.js-previews {
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
.js-previews img {
position: absolute;
opacity: 0;
}
.js-previews img.js-previews-active {
opacity: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="video-list js-video-list">
<li class="video-list-item">
<div class="video-thumbnail">
<a href="#" title="" data-providerepisodeid="5515">
<span class="video-thumbnail-time time-01">01/01/01</span>
<div class="video-thumbnail-item js-previews-item">
<img src="http://lorempixel.com/output/nature-q-c-320-240-6.jpg" alt="">
</div>
<div class="info js-tooltip">
<span class="icon-info"></span>
<div class="info-content">
Lorem ipsum on two lines bla bla
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="/lib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dataTest = {
'5515' : {
'images': [
"http://lorempixel.com/320/240/?a",
"http://lorempixel.com/320/240/?b",
"http://lorempixel.com/320/240/?c",
"http://lorempixel.com/320/240/?d",
"http://lorempixel.com/320/240/?e",
"http://lorempixel.com/320/240/?f",
"http://lorempixel.com/320/240/?g",
"http://lorempixel.com/320/240/?h",
"http://lorempixel.com/320/240/?i",
]
}
};
// dataTest['5515'] = ;
$.fn.imgRotate = function(options) {
var defaults = {
imagesArray : [], // images to load
imageItem : 'js-previews-item', // class of the wrapper of the actual image
imagesWrapper : 'js-previews', // class for wrapper of the new loaded images
imageActive : 'js-previews-active', // class for the active image
delay : 1000 // milliseconds between each image
};
var opts = $.extend(defaults, options);
return this.each(function(){
var $container = $(this),
len = opts.imagesArray.length,
intervalId,
stop = function() {
clearInterval(intervalId);
$container.find('.' + opts.imagesWrapper).find('img').removeClass(opts.imageActive);
},
play = function() {
stop();
var index = 0,
oldIndex = -1,
$newImages,
newImages = '';
if ($container.find('.' + opts.imagesWrapper).length == 0) {
newImages = '<div class="' + opts.imagesWrapper + '">';
for (var i = 0; i < len; i++) {
newImages += '<img src="' + opts.imagesArray[i] + '">';
}
newImages += '</div>';
$container.find('.' + opts.imageItem).append(newImages);
}
$newImages = $container.find('.' + opts.imagesWrapper).find('img');
intervalId = setInterval(function() {
if (index > len) { // use > and not >= because we want to show the first original image which is outside the array
index = 0;
}
$newImages.eq(oldIndex).removeClass(opts.imageActive);
$newImages.eq(index).addClass(opts.imageActive);
oldIndex = index++;
}, opts.delay);
};
$container.bind({
mouseenter: function() { play(); },
mouseleave: function() { stop(); },
focus: function() { play(); },
blur: function() { stop(); }
});
});
};
$.fn.tubeImgRotate = function(options) {
var defaults = {
dataId : 'providerepisodeid', // data attribute for the episode id
rotateOption : {} // options for the imgRotate plugin
};
var opts = $.extend(defaults, options);
return this.each(function(){
$(this).find('a').each(function() {
var $a = $(this),
id = $a.data(opts.dataId)
rotateOption = $.extend({}, opts.rotateOption);
rotateOption.imagesArray = dataTest[id]['images'];
$a.imgRotate(rotateOption);
});
});
};
// $('.video-thumbnail a').imgRotate({
// imagesArray: dataTest['5515']['images']
// });
$('.js-video-list').tubeImgRotate({
rotateOption : {
imageItem : 'js-previews-item',
delay : 1000
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment