I am using lazyYT to load youtube video's faster. The loaded lazyYT videos are then placed in the slick slider. What then happens is that the video's are sticking together instead of a nice margin between every video. So I manually added a class to the video div
<div class="js-lazyYT" id="video-slide" data-youtube-id="<?php echo $video['video_link']; ?>" data-width="500" data-height="425"></div>
and gave it a margin which is working fine until the first video comes loaded back again. They paste together until all three first video's are visible again.
#video-slide{
width: 500px !important;
height: 425px !important;
margin-right: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
It looks like the first 3 entries in the slider reload the slider again when they are visible. Any idea?
;(function ($) {
'use strict';
function setUp($el) {
var width = $el.data('width'),
height = $el.data('height'),
ratio = $el.data('ratio'),
id = $el.data('youtube-id'),
aspectRatio = ['16', '9'],
paddingTop = 0,
youtubeParameters = $el.data('parameters') || '';
if (typeof width === 'undefined' || typeof height === 'undefined') {
height = 0;
width = '100%';
aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100;
paddingTop = aspectRatio + '%';
}
$el.css({
'position': 'relative',
'height': height,
'width': width,
'padding-top': paddingTop,
'background': 'url(http://img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat',
'cursor': 'pointer',
'background-size': 'cover'
})
.html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
.addClass('lazyYT-image-loaded');
$.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
$('#lazyYT-title-' + id).text(data.entry.title.$t);
});
$el.on('click', function (e) {
e.preventDefault();
if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
$el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>')
.removeClass('lazyYT-image-loaded')
.addClass('lazyYT-video-loaded');
}
});
}
$.fn.lazyYT = function () {
return this.each(function () {
var $el = $(this).css('cursor', 'pointer');
setUp($el);
});
};
}(jQuery));
I was looking at the lazyYT site and found their example:
<div class="container">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
Given that, you might try:
.myclass {
margin-left: 5px;
}
<div class="container">
<div class="js-lazyYT myclass" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
or
<div class="container">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"> style='margin-left: 5px'</div>
</div>
or
.myclass div {
margin-left: 5px;
}
<div class="container myclass">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
Related
I have been tring to set img at same position as another using jquery .position() and .css()
Here is the code:
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
$('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
Any thoughts?
You can overlap images this way. I set the position to fixed then set the left and top values for both other images. I'm not entirely sure why'd you want this; so, if it's not the desired result, just comment.
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
img {
width:100px;
height:100px;
border:1px solid black;
}
#img1, #img2, #img3 {
position:fixed;
}
#img1 {
left:50px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />
For the translation of an element to work in this way
position: relative;
left: 20px;
I dont exactly know what ur upto but i just corrected your code.
$(function(){
var position = $('#img1').position();
var x = $("#img2").position();
$("#pos").text("top: "+x.top+" "+"left: "+x.left);
$('#img3').css({ 'left': x.left + 'px', 'top': x.top + 'px' });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>
I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.
Below is the code...
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update() {
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
<frameset onload="init();" rows="50%,50%" resizable="no">
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.
If your answer includes AJAX, please can you explain it as I am not familiar with that coding.
EDIT: If there is no div alternative, is there an iframe alternative?
Answer Updated
CSS Fixed
Error fixed
Jquery way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
you can just create one div tag with id say <div id='editbox' /> and add one line code in your update function document.getElementById("editbox").innerHTML=editboxHTML;
The script purpose is to change some special divs size without using width and height CSS properties.
<html>
<head>
<title>Test resizer</title>
<script type = 'text/javascript'>
function endsWith(str, suffix)
{
if (!str)
return false;
return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
}
function fixSizeFor(start_elem)
{
if (document && document.body)
{
var curr_elem = start_elem ? start_elem : document.body;
var force_size = curr_elem.getAttribute("data-forcesize");
if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative" && curr_elem.style.position.toLowerCase() == "absolute")
{
var needed_width_str = curr_elem.getAttribute("data-neededwidth");
var needed_height_str = curr_elem.getAttribute("data-neededheight");
if (endsWith(needed_width_str, "%"))
{
var n_w = needed_width_str.substr(0, needed_width_str.length - 1)
var calculated_w = (curr_elem.parentNode.clientWidth * n_w) / 100;
if (curr_elem.style.width != calculated_w + "px")
curr_elem.style.width = calculated_w + "px";
}
if (endsWith(needed_height_str, "%"))
{
var n_h = needed_height_str.substr(0, needed_height_str.length - 1)
var calculated_h = (curr_elem.parentNode.clientHeight * n_h) / 100;
if (curr_elem.style.height != calculated_h + "px")
curr_elem.style.height = calculated_h + "px";
}
}
for (var i = 0; i < curr_elem.children.length; i++)
fixSizeFor(curr_elem.children[i]);
}
}
setInterval(function () { fixSizeFor(null); }, 100); //comment this and weird space gone
</script>
</head>
<body>
<table border = '1' style = "width: 100%; height: 100%;">
<tr>
<td style = 'position: relative;'>
<div data-forcesize = 'true' data-neededwidth = '100%' data-neededheight = '100%' style = 'position: absolute; top: 0px; left: 0px; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
</td>
</tr>
</table>
</body>
</html>
Weird space appears in IE7 - IE11 and MS Edge. Opera 15 and latest Chrome are fine.
How I can avoid this?
Okay, Changing your html to this will resolve your "Weird space". You could fine tune this by changing your calculation of the width and height, or just changing your data-neededwidth and data-neededheight attributes like I did.
<html>
<head>
<title>Test resizer</title>
<script type = 'text/javascript'>
function endsWith(str, suffix)
{
if (!str)
return false;
return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
}
function fixSizeFor(start_elem)
{
if (document && document.body)
{
var curr_elem = start_elem ? start_elem : document.body;
var force_size = curr_elem.getAttribute("data-forcesize");
if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative")
{
var needed_width_str = curr_elem.getAttribute("data-neededwidth");
var needed_height_str = curr_elem.getAttribute("data-neededheight");
if (endsWith(needed_width_str, "%"))
{
var n_w = needed_width_str.substr(0, needed_width_str.length - 1);
var calculated_w = (window.innerWidth * n_w) / 101;
if (curr_elem.style.width != calculated_w + "px")
curr_elem.style.width = calculated_w + "px";
}
if (endsWith(needed_height_str, "%"))
{
var n_h = needed_height_str.substr(0, needed_height_str.length - 1);
var calculated_h = (window.innerHeight * n_h) / 101;
if (curr_elem.style.height != calculated_h + "px")
curr_elem.style.height = calculated_h + "px";
}
}
for (var i = 0; i < curr_elem.children.length; i++)
fixSizeFor(curr_elem.children[i]);
}
}
setInterval(function () { fixSizeFor(null); }, 100); //comment this and weird space gone
</script>
</head>
<body>
<table id="table" border = '1' style = "width: 100%; height: 100%;">
<tr>
<td style = 'position: relative;'>
<div data-forcesize = 'true' data-neededwidth = '99%' data-neededheight = '97.5%' style = 'position: relative; top: 0; left: 0; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
</td>
</tr>
</table>
</body>
</html>
Sometimes with IE you have to be specific with your heights since it is really strict when it comes to calculated height.
What about this:
http://codepen.io/jonathan/pen/qOzbMa/
I added in the CSS for html and the body tags height: 100%. Which allows its descendants (children) in the DOM to extend their height to the bottom of their parent.
html, body {
height:100%; /* important to allow children to inherit */
}
I removed position relative off of the td since tables and position relative are buggy in IE. Its better to just nest another div tag as the parent for your absolutely position div.
<table border="1" style="width: 100%; height: 100%;">
<tr>
<td>
<!--
height 100% on both relative and absolute positioned
elements to extend their height to bottom of their parent.
that is why the html and body tag have their height 100%
which allows its children to inherit the height 100%
-->
<div style='position: relative; height: 100%;'>
<div style='width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: auto; border: dashed;' data-forcesize='true' data-neededwidth='100%' data-neededheight='100%'>Why the hell there is some space under table border?!</div>
</div>
</td>
</tr>
</table>
I also added height:100% to the div with position: relative, so it extends its height to the bottom of its parent. I also added width:100% and height:100% to your div with position: absolute, so the div extends its height to the bottom of its parent.
Tables in IE are buggy with height, especially if you use position relative on a td (table-data cell), since it's display property is set to table-cell. Unlike a div tag's default display property which is block.
Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arrows to scroll to next/previous slider). The only problem that I have right now is that when you press the arrow, the function that automatically switches slides every 5 seconds is still counting these 5000 ms, so the next slide appears faster then desired. What I want is to make those arrows reset the timer, so you press the arrow -> next slide appears -> only after 5 seconds later the slide switches again.
Sorry for sloppy explanation, hope I made it clear enough.
Here's the jsfiddle: http://jsfiddle.net/cA9aW/
and here is the code
HTML
<body>
<div id="wrapper">
<header>
<h1>Simplest Sliding Image Slider</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" />
</div>
<div class="slides" id="slide2">
<img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" />
</div>
<div class="slides" id="slide3">
<img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" />
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
JS
jQuery(document).ready(function($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
// actual function
function startSlider() {
looper = setInterval(function() {
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
// return to first slide after the last one
if($('.active').length == 0) {
$('#slide1').addClass('active');
$('.slides').animate({'left': 0}, 500);
}
}, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function() {
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
});
$('.control_right').on('click', function() {
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
});
}
});
Thx a lot in advance
Slideshow with prev/next buttons, autoslide, pause on hover
Instead of jQuery's .animate() and animating the left CSS property, use the GPU accelerated CSS transform: translateX for the animation on a common slides wrapper element
$(".SlideShow").each((i, EL) => {
const
$parent = $(EL),
$slides = $(".SlideShow-slides", EL),
$item = $(".SlideShow-item", EL),
$prevNext = $(".SlideShow-btn", EL),
tot = $item.length,
mod = (n, m) => ((n % m) + m) % m;
let
c = 0,
itv;
const prev = () => {c = mod(--c, tot); anim();};
const next = () => {c = mod(++c, tot); anim();};
const anim = () => $slides.css({transform: `translateX(-${c * 100}%)`});
const stop = () => clearInterval(itv);
const play = () => itv = setInterval(next, 4000);
$prevNext.on("click", (ev) => $(ev.currentTarget).is(".next") ? next() : prev());
$parent.hover(stop, play);
play(); // start
});
.SlideShow {
position: relative;
overflow: hidden;
width: 100%;
height: 180px;
}
.SlideShow-slides {
display: flex;
flex-flow: row-nowrap;
height: 100%;
width: 100%;
transition: transform 0.7s; /* Animation duration here */
}
.SlideShow-item {
min-width: 100%;
}
.SlideShow-item>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.SlideShow-btn {
position: absolute;
top: 0;
z-index: 1;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
opacity: 0.5;
border: 0;
cursor: pointer;
}
.SlideShow-btn:hover {
opacity: 1;
}
.SlideShow-btn.next {
right: 0px;
}
<div class="SlideShow">
<div class="SlideShow-slides">
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0bf?text=A" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/fb0?text=B" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0fb?text=C" alt=""></div>
</div>
<button type="button" class="SlideShow-btn prev"></button>
<button type="button" class="SlideShow-btn next"></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
What you need to do it to clear the interval in the button clicks and start interval again.
function resetInterval(){ //add this method which wil reset the timer
window.clearInterval(looper); //clear current interval
looper = setInterval(autoSlide, 5000); //start auto slide again.
}
function autoSlide(){ //move this to a function from being anonymous
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
// return to first slide after the last one
if ($('.active').length === 0) {
$('#slide1').addClass('active');
$('.slides').animate({
'left': 0
}, 500);
}
}
and
$('.control_left').on('click', function () {
resetInterval(); //reset it
....
$('.control_right').on('click', function () {
resetInterval(); //reset it
....
Demo
How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts :
http://jsfiddle.net/eT7SD/
Html Code
<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs" width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA" width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA" width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw" width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_" width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ" width="200" height="115" /></div>
Css Code
<style type="text/css">
#apCenterDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 571px;
top: 209px;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 570px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 821px;
top: 134px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 822px;
top: 328px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 572px;
top: 385px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 319px;
top: 329px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 319px;
top: 135px;
}
</style>
Script
<script>
$(document).ready(function(e) {
setInterval(function() {
var imgfirstSrc = $("#img-1").attr("src");
var imgSecSrc = $("#img-2").attr("src");
var imgthirdSrc = $("#img-3").attr("src");
var imgfourthSrc = $("#img-4").attr("src");
var imgfifthSrc = $("#img-5").attr("src");
var imgsixthSrc = $("#img-6").attr("src");
$("#img-2").attr("src",imgfirstSrc);
$("#img-3").attr("src",imgSecSrc);
$("#img-4").attr("src",imgthirdSrc);
$("#img-5").attr("src",imgfourthSrc);
$("#img-6").attr("src",imgfifthSrc);
$("#img-1").attr("src",imgsixthSrc);
},1000);
});
</script>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried #Cristi Pufu code but I want more modification
Efforts
http://jsfiddle.net/SaNtf/
Using jQuery Animation: http://jsfiddle.net/eT7SD/6/
Using mathand jQuery : http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/
Just add a class 'box' to your animating divs like in the fiddle and use this js:
$(document).ready(function(e) {
var animate = function(){
var boxes = $('.box');
$.each(boxes, function(idx, val){
var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();
$(val).animate({
"left" : coords.left,
"top" : coords.top
}, 1500, function(){})
});
}
animate();
var timer = setInterval(animate, 2000);
});
EDIT:
$(document).ready(function(e) {
var angles = [90, 45, 315, 270, 225, 135];
var unit = 215;
var animate = function(){
$.each($('.box'), function(idx, val){
var rad = angles[idx] * (Math.PI / 180);
$(val).css({
left: 550 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
angles[idx]--;
});
}
var timer = setInterval(animate, 10);
});
You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:
Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>
Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});