The joy of JavaScript: flying ring of images

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Flying ring of images
This free JavaScript creates a funny flying ring of images. This ring is scaling down and up permanently while floating around your webpage. You may add as many pictures as you like. Easy configuration of size and transparency. Works with Internet Explorer 5x/6x/7x/8x/9X, Firefox 2x/3x, Opera 7x/8x/9x/10x/11X, Goggle Chrome 3x/4x/5x/6x/7x/8x/9x.

Two Versions available
In this sample all pictures are shown within one circle (no picture rotation). The next sample shows a version with picture rotation.

Click here to see sample with picture rotation.

Configuration
Step 1: Open your webpage and paste the following code right above the </body>-tag, close to the bottom of the page:

<script>
// CREDITS:
// JavaScript carousel slideshow
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

// MOVEMENT CREDITS:
// The Movements of this script are based upon a Multi-Fx1 Script 
// by kurt.grigg@virgin.net

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage

// Set the URLS of your images. Add as many images as you like
var myimage=new Array("flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png")

// Set the width of your images. All images will be set to this width
var imgwidth=40

// Set the maximal size of carousel (px)
var maxcarouselsize=240

// Set the minimal size of carousel (px)
var mincarouselsize=1

//Set the opacity od the images. values my range from 0 to 100
var imgopacity=70

// Do not edit below this line
var divider=(36/(myimage.length+1))
var step=0.1;
var a_StEp=0.05;
var RunTime=10;
var currStep = 0;
var x_coordinate = 0;
var y_coordinate = 0;
var cntr=2;
var screenheight=document.body.clientHeight
var screenwidth=document.body.clientWidth

function fly(){
	y_coordinate=document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
	x_coordinate=document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/10);

RunTime+=a_StEp;
	Tma=setTimeout("fly()", 15);
}

function minimize() {
	cntr-=0.5;
	goshrink=setTimeout('minimize()',10);
	if (cntr <=mincarouselsize) {
		clearTimeout(goshrink);
		swell()
	}
}

function swell() {
	cntr+=0.5;
	GoSwell=setTimeout('swell()',10);
	if (cntr >=maxcarouselsize) {
		clearTimeout(GoSwell);
		minimize()
	}
}

function init(){
	fly();
	cycle();
	minimize();
}

for (i=0;i<=myimage.length-1;i++) {
		document.write('<div id="'+i+'" style="position:absolute;top:-5000px;left:0px;filter:alpha(opacity='+imgopacity+');opacity:'+(imgopacity/100)+';"><img src="'+myimage[i]+'" width='+imgwidth+'></div>')
	}

window.onload=init;

</script>

IMPORTANT: Do not paste this code into any tables or <DIV> and </DIV> or between any other container!

Step 2: Go to the top of the script and configure the images, links and messages: