I'm building an infinite scrolling banner with HTML5 and CSS3. My code works but there are some small lags.. I would like a smooth scrolling effect, it's nicer for user.
There must be some way to make it more smooth, but not sure how to.
Anyway to do add a smooth effect to my animation using CSS? Or with Javascript?
Here is my demo code:
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
.first {
-webkit-animation: bannermove 180s linear infinite;
-moz-animation: bannermove 180s linear infinite;
-ms-animation: bannermove 180s linear infinite;
-o-animation: bannermove 180s linear infinite;
animation: bannermove 180s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
The lagging is caused by a difference in image alignment between start and end of css animation.
It could be tricky to align so when doing this kind of animation I prefer to go with javascript + requestAnimationFrame
const speed = 2; // 2 pixels per frame at 60 frames per second
const banner = document.getElementsByClassName('photobanner')[0];
// build images array
let images = [
...banner.getElementsByTagName('img')
];
// initialize images positions
let rects = images.map((img, index) => {
const style = getComputedStyle(img);
const rect = {
left: index * (350 + 50),
top: 0,
width: 350,
height: parseInt(style.height, 10)
};
return rect;
});
function animate() {
const l = images.length;
for (let i = 0; i < l; i++) {
const img = images[i];
const rect = rects[i];
rect.left -= speed;
if (rect.left + rect.width < 0) {
// this image if fully overflowing left, put it at the end of the image list both in position and in images and rects
const lastRect = rects[rects.length - 1];
rect.left = lastRect.left + lastRect.width + 50;
images = images.slice(1, l);
images.push(img);
rects = rects.slice(1, l);
rects.push(rect);
i--;
}
// change the actual image style according to new rect value
img.style.left = rect.left + 'px';
};
requestAnimationFrame(animate);
}
animate();
.photobanner {
position: relative;
height: 233px;
width: 100%;
margin-bottom: 30px;
}
.photobanner img {
top: 0px;
width: 350px;
box-shadow: 2px 2px 8px #8a8a8a;
position: absolute;
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
you can use JavaScript for better results
var e = document.getElementById("photobanner");
var x = 0;
function moveBanner() {
x--;
e.style.marginLeft = x + "px";
}
setInterval(moveBanner, 60);
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
<div class="photobanner" id="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?
Current html is:
<div class="event_container">
<a href="/index.php?con=events&id=5">
<div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
<p>Kør med de store!</p>
<p>18-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=3">
<div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
<p>Den nye FIAT 500!</p>
<p>24-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=1">
<div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
<p>Event 1</p>
<p>30-04-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=2">
<div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
<p>Test kør bughatti!</p>
<p>03-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=4">
<div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
<p>Skal du køre suziki?</p>
<p>30-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
You can make action animated with jQuery to be more comfortable with moved image. Try example below:
var outer = $('.container');
$('#right').click(function() {
outer.animate({scrollLeft: '+=30px'}, 500);
});
$('#left').click(function() {
outer.animate({scrollLeft: '-=30px'}, 500);
});
$('#top').click(function() {
outer.animate({scrollTop: '-=30px'}, 500);
});
$('#bottom').click(function() {
outer.animate({scrollTop: '+=30px'}, 500);
});
.container {
width: 100px;
height: 100px;
overflow: scroll;
}
.inner {
width: 300px;
background-color: red;
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inner">
A B C D E F G 1 2 3 4 5 6 7 8 9
-------------------------------
9 8 7 6 5 4 3 2 1 A B C D E F G
</div>
</div>
<button id="left"> < </button><button id="right"> > </button>
<button id="top"> ^ </button><button id="bottom"> V </button>
I've made a container around the car pictures, and use overflow-y:
scroll so I can scroll through them. How can I make it so I have two
buttons I can click so I can scroll through them with buttons via
javascript or jquery?
Here are 3 approaches using:
jQuery
plain javascript
CSS and javascript
The last approach which uses CSS Transitions delivers the smoothest and best animation.
Approach 1 (of 3)
You can use jQuery's custom animate({scrollTop: [value]}) method to scroll the images up and down.
Working example in jQuery:
$(document).ready(function(){
$('button').eq(0).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'});
});
$('button').eq(1).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'});
});
});
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 2 (of 3)
If you want to skip jQuery, here is an alternative version using plain javascript.
Working example in plain javascript:
var buttons = document.getElementsByTagName('button');
var imageContainer = document.getElementsByTagName('div')[0];
var scrollValue;
var scrollDirection;
function scroll() {
scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1);
scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158);
var startPoint = imageContainer.scrollTop;
var scrollDiv = setInterval(function() {
imageContainer.scrollTop += scrollDirection;
if (imageContainer.scrollTop === (startPoint + scrollValue)) {
scrollDirection = 0;
clearInterval(scrollDiv);
}
}, 1);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 3 (of 3)
As you will have noted, the plain javascript approach immediately above comes across as a bit slow and jerky. So in the end (as with all animations), the optimum approach is to deploy some CSS to handle the animation.
Working example in CSS and plain javascript:
var buttons = document.getElementsByTagName('button');
var images = document.getElementsByTagName('img');
var scrollValue;
function scroll() {
var imageTransformStyle = window.getComputedStyle(images[0]).transform;
var yStart = (imageTransformStyle.lastIndexOf(',') + 2);
var yEnd = imageTransformStyle.lastIndexOf(')');
var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd));
scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158;
var newPosition = currentPosition + scrollValue;
if (newPosition > 0) {newPosition = 0;}
if (newPosition < -316) {newPosition = -316;}
for (var i = 0; i < images.length; i++) {
images[i].style.transform = 'translateY(' + newPosition + 'px)';
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 578px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: hidden;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
transform: translateY(0);
transition: transform 0.5s ease-out;
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
I need help getting anotation values from Annotorius Library. I have a ton of code (too much to post) for annotating images in a slider. Now I need to grab the annotation data (position, size and comment) to post to my server (php and mySQL).
Could anyone post some sample code that I can learn from?
If I'm not misunderstanding. the data you looking for is:
- position: x, y
- size: width, height
- comment: the annotation text
try this:
var datapost = new Array();
//loop all annotation
anno.getAnnotations().forEach(function(element){
var details = '==============================================================\n';
details += '\n image : ' + element.src;
details += '\n comment : ' + element.text;
var geometry = element.shapes[0].geometry;
var imgObj = new Image();
imgObj.src = element.src;
//get position and size by pixel
var position_x = Math.round(imgObj.width * geometry.x);
var position_y = Math.round(imgObj.height * geometry.y);
var size_width = Math.round(imgObj.width * geometry.width);
var size_height = Math.round(imgObj.height * geometry.height);
details += '\n position_x : ' + position_x;
details += '\n position_y : ' + position_y;
details += '\n width : ' + size_width;
details += '\n height : ' + size_height;
console.log(details);
//add data to post
datapost.push({
'image' : element.src,
'position_x' : position_x,
'position_y' : position_y,
'width' : size_width,
'height' : size_height,
'comment' : element.text
});
});
//post data to the server here
console.log(datapost);
After a lot of R&D , I can not get my answer . Now i have use jssor slider of jquery and https://annotorious.github.io/index.html library. Complete code is shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="http://annotorious.github.com/latest/annotorious.css" />
<script type="text/javascript" src="js/annotorious.min.js"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01-99-66 .p (normal).jssort01-99-66 .p:hover (normal mouseover).jssort01-99-66 .p.pav (active).jssort01-99-66 .p.pdn (mousedown)*/.jssort01-99-66 .p { position: absolute; top: 0; left: 0; width: 99px; height: 66px;}.jssort01-99-66 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}.jssort01-99-66 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}.jssort01-99-66 .c { position: absolute; top: 0px; left: 0px; width: 95px; height: 62px; border: #000 2px solid; box-sizing: content-box; background: url('img/t01.png') -800px -800px no-repeat; _background: none;}.jssort01-99-66 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 95px; height: 62px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}.jssort01-99-66 .p:hover .c { top: 0px; left: 0px; width: 97px; height: 64px; border: #fff 1px solid; background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c { background-position: 50% 50%; width: 95px; height: 62px; border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c { /* ie quirks mode adjust */ width /**/: 99px; height /**/: 66px;}
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
<div data-p="150.00">
<img data-u="image" src="img/01.jpg" />
<img data-u="thumb" src="img/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/02.jpg" />
<img data-u="thumb" src="img/thumb-02.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/03.jpg" />
<img data-u="thumb" src="img/thumb-03.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/04.jpg" />
<img data-u="thumb" src="img/thumb-04.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/05.jpg" />
<img data-u="thumb" src="img/thumb-05.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/06.jpg" />
<img data-u="thumb" src="img/thumb-06.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/07.jpg" />
<img data-u="thumb" src="img/thumb-07.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/08.jpg" />
<img data-u="thumb" src="img/thumb-08.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/09.jpg" />
<img data-u="thumb" src="img/thumb-09.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/10.jpg" />
<img data-u="thumb" src="img/thumb-10.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/11.jpg" />
<img data-u="thumb" src="img/thumb-11.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/12.jpg" />
<img data-u="thumb" src="img/thumb-12.jpg" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery with Vertical Thumbnail</a>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/13.jpg" />
<img data-u="thumb" src="img/thumb-13.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/14.jpg" />
<img data-u="thumb" src="img/thumb-14.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;" class="mainrelated">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:0px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
];
var jssor_1_options = {
$AutoPlay: false,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Rows: 2,
$Cols: 6,
$SpacingX: 14,
$SpacingY: 12,
$Orientation: 2,
$Align: 156
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 960);
refSize = Math.max(refSize, 300);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
// $xx= 0;
// setInterval(function(){
// if($xx==0){
$("#jssor_1").find('img').each(function(index){
$(this).attr('id','myyyyid'+index);
$mainid = $(this).attr('id');
anno.makeAnnotatable(document.getElementById($mainid));
});
// }
// }, 2000);
/*responsive code end*/
});
</script>
</body>
</html>
Complete html+jquery script of slider and annotation . You just copy and paste the code and run on browser. May be it will usefull for you.
I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/