Free JavaScript image gallery with floating thumbnails

» 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

Unique image gallery with floating thumbnails
This Fun JavaScript makes your thumbnails (the small pictures) float all over your webpage. By touching them with your cursor a big version of the image will be shown in a special big-image-zone. The big images can be commented and linked. Most of the style-attributes can be set within the style-tags. Add as many images as you like. True copy-and-paste installation. Internet Explorer 6x/7x/8x and Firefox 2x/3x, Opera 7x/8x/9x/10x and Google Chrome 3x/4x/5x/6x.

Rate this script!

Demo
Touch a floating image in order to see the effect.

Configuration

Step 1: Open your webpage and paste the first part of the code right into the place where the big image shall appear:

<style>

/* set the style for the thumbnail images */
.thumbnailstyle { 
	border: 1px solid white;
	/* opacity for Firefox, Opera, Chrome, value may range from 0 to 1 */
	opacity:0.5;
	/* opacity for Internet Explorer, value may range from 0 to 100 */
	filter:alpha(opacity=50);
}

/* set the style for the box containig the big image and the text (messages) */
/* the background-color for the text (messages) must be set here */
.boxstyle { 
	text-align:center;
	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 5px #CCCCCC;
	/* shadow for Chrome and Safari */
	-webkit-box-shadow: 5px 5px 5px #CCCCCC;
	/* shadow for Opera */
	box-shadow: 5px 5px 5px #CCCCCC;
	/* background-color for the text (messages) */
	background-color:#666666;
	border: 1px solid white;
}

/* set the font-style for the text (messages) */
a.textstyle { 
	font-family:Arial;
	font-size:10pt;
	color:white;
	text-decoration:none;
}

/* set the rollover effect for the big image */
a.textstyle:hover { 
	/* change of color on mouseover */
	color:yellow;
}

</style>

<script>
// CREDITS:
// Joy of JavaScript: image gallery with floating thumbnails
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. 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

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

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Set the URLs of the big images, the corresponding messages and links. 
// Add as many pictures a you like.
// IMPORTANT: study carefully where commas are required

var bigimg= [
{
src : "../../pics/300x180bluefish.jpg",
message : "Did you catch a shark?",
url : "http://www.fabulant.com"
},

{
src : "../../pics/300x180castle.jpg",
message : "This caste shall be our next home",
url : "http://www.fabulant.com"
},

{
src : "../../pics/300x180butterfly.jpg",
message : "It's sprongtime",
url : "http://www.fabulant.com"
},

{
src : "../../pics/300x180bonbons.jpg",
message : "You are even sweeter",
url : "http://www.fabulant.com"
}
]

// Set the width of the big images (pixels). All images should have the same width
var bigimgwidth=300

// Set th height of the big images (pixels). All images should have the same height
var bigimgheight=180

// Set the shrink-factor of thumbnails
// In this sample the thumbnails are 6 times smaller than the big image
var shrinkfactor=6

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

document.write("<div id='bigpic' style='position:relative;width:"+bigimgwidth+"px;filter:alpha(opacity=100);' class='boxstyle'><img src='"+bigimg[0].src+"' border='0'><br><a href='"+bigimg[0].url+"' class='textstyle'>"+bigimg[0].message+"</a></div>")
</script>

Step 2: Paste the second part of the code right above the </body>-tag, close to the bottom of the page:

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var floatingspeed=5
var tempo=20
var numberofimages=bigimg.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=100
	imgheight[i]=100
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var blockmouseover=false
var fadetimer
var fadestrength=100
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
var spancontent=new Array()
var imgpreload=new Array()

var imgpreload=new Array()
for (iii=0;iii<=bigimg.length-1;iii++) {
	imgpreload[iii]=new Image()
	imgpreload[iii].src=bigimg[iii].src
}

for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<a href='#' onMouseOver='showpic("+i+")'><img src='"+bigimg[i].src+"' border='0' width='"+parseInt(bigimgwidth/shrinkfactor)+"' height='"+parseInt(bigimgheight/shrinkfactor)+"'></a>"
}

function setValues() {
    marginbottom=window.innerHeight-11
    marginright=window.innerWidth-11
	if (ie) {
    	marginbottom=document.body.clientHeight-5
    	marginright=document.body.clientWidth-5
	}
	for (i=0;i<=numberofimages;i++) {             
		var thisspan=document.getElementById('span'+i)
		thisspan.innerHTML=spancontent[i]
		var thisspan=document.getElementById('span'+i)
		imgwidth[i]=parseInt(bigimgwidth/shrinkfactor)
		imgheight[i]=parseInt(bigimgheight/shrinkfactor)
		var maxleftstart=marginright-imgwidth[i]
		var maxtopstart=marginbottom-imgheight[i]
		var thisspan=document.getElementById('span'+i).style
        thisspan.left=parseInt(thisspan.left)+randommaker(maxleftstart)+"px"
		thisspan.top=parseInt(thisspan.top)+randommaker(maxtopstart)+"px"
		thisspan.visibility="visible" 
	}
    checkmovement()
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function movepictures() {
	for (i=0;i<=numberofimages;i++) {  
    	var thisspan=document.getElementById('span'+i).style
    	thisspan.left=parseInt(thisspan.left)+stepx[i]+"px"
		thisspan.top=parseInt(thisspan.top)+stepy[i]+"px"

}
}

function checkposition() {
	for (i=0;i<=numberofimages;i++) {  
		imgwidth[i]=2*parseInt(document.getElementById('span'+i).offsetWidth)
		imgheight[i]=2*parseInt(document.getElementById('span'+i).offsetHeight)         
		var thisspan=document.getElementById('span'+i).style
		var leftx=parseInt(thisspan.left)
		var topy=parseInt(thisspan.top)
		if (leftx>marginright-imgwidth[i]-floatingspeed) {
			thisspan.left=leftx-Math.abs(stepx[i]+1)+"px"
			stepx[i]=randommaker(floatingspeed)*-1	
		}
		if (leftx<marginleft) {
			thisspan.left=leftx+Math.abs(stepx[i])+"px"
			stepx[i]=randommaker(floatingspeed)			
		}	
		if (topy>marginbottom-imgheight[i]-floatingspeed) {
			thisspan.top=topy-Math.abs(stepy[i])+"px"
			stepy[i]=randommaker(floatingspeed)*-1
		}
		if (topy<margintop) {
			thisspan.top=topy+Math.abs(stepy[i])+"px"
			stepy[i]=randommaker(floatingspeed)
		}
	}
}

function showpic(picid) {
	if (blockmouseover==false) {
		document.getElementById('bigpic').innerHTML="<img src='"+bigimg[picid].src+"'><br><a href='"+bigimg[picid].url+"' class='textstyle'>"+bigimg[picid].message+"</a>"
		fadestrength=0
		fadein()
	}
}

function fadein() {
	if (fadestrength<100) {
		blockmouseover=true
		fadestrength+=10
		if (ns6) {
			document.getElementById('bigpic').style.opacity=(fadestrength/100)
    	}
		
		if (ie) {
			var thisfilter=eval('bigpic')
			thisfilter.filters.alpha.opacity=Math.round(fadestrength)
		}
		fadetimer=setTimeout("fadein()",40)
	}
	else {
		clearTimeout(fadetimer)
		blockmouseover=false
	}
}

if (ie || ns6) {
	for (i=0;i<=numberofimages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;visibility:hidden' class='thumbnailstyle'></span>")
	}
	window.onload=setValues
}
</script>

IMPORTANT: Do not nest the second part of the code into any tables or <DIV> and </DIV> or between any other container!

Step 3: Go to the first part of the code and configure all elements according to the instructions.