Fun of JavaScript: peepshow slideshow

» 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

Peepshow Slideshow
Probably the most sexy peepshow worldwide!It's a combination of background slideshow and moving peephole. You may insert as many background-pictures as you like. True copy-and-paste installation. Very easy configuration of pictures, size and speed. Very nice circle-effect with Internet Explorer. IE5x/6x/7x/8x/9x, FF2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x.

Configuration:

Step 1: Open your webpage. Paste the following code anywhere between the <body> tag and </body> tag.

<script>
// CREDITS:
// Peepshow Slideshow
// by Peter Gehrig 
// 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

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.fabulant.com
// right into the webpage where the script
// will be displayed.

/////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
/////////////////////////////////////////////////////////////////

// The URLs of your images. Add as many URls (images) as you like.
var picurl=new Array ("girl1.jpg", "girl3.jpg","girl4.jpg")

// The size of the peephole (width/height in pixels)
var peepholesize=90

// Standstill of your background-pictures (higher means slower).
var picstandstill=200

// Width of background-picture (pixels)
var imagewidth=240

// Height of background-picture (pixels)
var imageheight=200

// Speed of peeball (lower means slower)
var peepballspeed=2

// Transparency effect required for Firefox. Values may reach from 0 to 1.
var transpar=0.5

/////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
/////////////////////////////////////////////////////////////////

var imgpreload=new Array()
for (i=0;i<=picurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=picurl[i]
}
var x,y
var marginbottom
var marginleft
var margintop
var marginright

var cliptop
var clipbottom
var clipleft
var clipright
var clippoints
var picposition_x=0
var picposition_y=0
									  								   
var tempo=25
var i_picstandstill=0
var i_pic=0
var stepx=peepballspeed
var stepy=peepballspeed
var timer

var ns6=document.getElementById&&!document.all?1:0

function setValues() {
		margintop=picposition_y
    	marginleft=picposition_x
    	marginbottom=imageheight-peepholesize+picposition_y
    	marginright=imagewidth-peepholesize+picposition_x
		document.getElementById('ball').style.left=(randommaker(imagewidth)+picposition_x)+"px"
   		document.getElementById('ball').style.top=picposition_y+"px"
		document.getElementById('piccontent').style.left=picposition_x+"px"
   		document.getElementById('piccontent').style.top=picposition_y+"px"	
    	moveball()
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function moveball() {
	i_picstandstill++
	
	checkposition()

document.getElementById('ball').style.left=(parseInt(document.getElementById('ball').style.left)+stepx)+"px"
   	document.getElementById('ball').style.top=(parseInt(document.getElementById('ball').style.top)+stepy)+"px"
		
	cliptop=parseInt(document.getElementById('ball').style.top)-picposition_y
	clipbottom=cliptop+peepholesize
	clipleft=parseInt(document.getElementById('ball').style.left)-picposition_x
	clipright=clipleft+peepholesize
	clippoints="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	document.getElementById('piccontent').style.clip=clippoints
	if (i_picstandstill>picstandstill) {
		i_pic++
		if (i_pic>picurl.length-1)	{i_pic=0}
		document.getElementById('piccontent').innerHTML="<img src='"+picurl[i_pic]+"' width="+imagewidth+" height="+imageheight+">"
		i_picstandstill=0
	}
    timer=setTimeout("moveball()",tempo)
}

function checkposition() {
		if (parseInt(document.getElementById('ball').style.left)>=marginright) {
			stepx=stepx*-1
			document.getElementById('ball').style.left=(parseInt(document.getElementById('ball').style.left)-10)+"px"
		}
		if (parseInt(document.getElementById('ball').style.left)<=marginleft) {
			stepx=stepx*-1
			document.getElementById('ball').style.left=(parseInt(document.getElementById('ball').style.left)+10)+"px"
		}	
		if (parseInt(document.getElementById('ball').style.top)>=marginbottom) {
			stepy=stepy*-1
			document.getElementById('ball').style.top=(parseInt(document.getElementById('ball').style.top)-10)+"px"
		}
		if (parseInt(document.getElementById('ball').style.top)<=margintop) {
			stepy=stepy*-1
			document.getElementById('ball').style.top=(parseInt(document.getElementById('ball').style.top)+10)+"px"
		}
}

document.write("<DIV id='roof' style='position: relative; width:"+imagewidth+"px; height:"+imageheight+"px'>")

if (document.all) {
	document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl[0]+"' border=0 width="+imagewidth+" height="+imageheight+"></DIV>")
	document.write("<DIV id='ball' style='position:absolute; top:-500px; width:"+peepholesize+"px;height:"+peepholesize+"px;background-color:white;filter:alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX="+peepholesize+"px,finishY="+peepholesize+"px)'></DIV>")

}
else {
	document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px;-moz-opacity:"+transpar+"'><img src='"+picurl[0]+"' border=0 width="+imagewidth+" height="+imageheight+"></DIV>")
	document.write("<DIV id='ball' style='position:absolute; top:-500px; width:"+peepholesize+"px;height:"+peepholesize+"px;'></DIV>")
}
document.write("</DIV>")
window.onload=setValues
</script>

Step 2: Go to the top of the code and configure the URLs of your background-pictures, the size of the peephole and the speed of the animation.