« »

As the name loosely implies, Book Flip is an image slideshow that simulates a page being turned to reveal two new slides at once. Some other impressive features of this slideshow are: + Slideshow can be set to either flip horizontally or vertically. + Each image can have an optional JavaScript link associated with it. + Slideshow pauses on mouseover. A DOM based script that works in modern DHTML browsers- IE5+, NS6+, Opera 7+.

Label: Book Flip Slideshow

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
/***********************************************
* Book Flip slideshow script- Â© Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
	Create a div with transparent place holder in your html	
	<div id="Book" style="position:relative">
		<img src="placeholder.gif" width="144" height="227">
	</div>
	width = 2*book image width +4 height = book image height+2

	Insert onload in body tag
		<body onload="ImageBook()">	
*********************************************************/

// 7 variables to control behavior
	var Book_Image_Width=140;
	var Book_Image_Height=225;
	var Book_Border=true;
	var Book_Border_Color="gray";
	var Book_Speed=15;
	var Book_NextPage_Delay=1500; //1 second=1000
	var Book_Vertical_Turn=0;	

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

	Book_Image_Sources=new Array(
		"logojs.gif","http://javascriptbank.com",
		"backgr13.jpg","http://javascriptbank.com",
		"backgr14.jpg","http://javascriptbank.com", //this slide isn't linked
		"pupils.gif","http://javascriptbank.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
	var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

	function ImageBook(){
		if(document.getElementById){
			for(i=0;i<Book_Image_Sources.length;i+=2){
				B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
			Book_Div=document.getElementById("Book");
			B_LI=document.createElement("img");Book_Div.appendChild(B_LI);	
			B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
			B_MI=document.createElement("img");Book_Div.appendChild(B_MI);	
			B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
			B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
			B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
			B_LI.style.left=0+"px";
			B_MI.style.top=0+"px";
			B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_RI.style.top=0+"px";
			B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_LI.style.height=Book_Image_Height+"px";
			B_MI.style.height=Book_Image_Height+"px";
			B_RI.style.height=Book_Image_Height+"px";
			B_LI.style.width=Book_Image_Width+"px";
			B_MI.style.width=Book_Image_Width+"px";
			B_RI.style.width=Book_Image_Width+"px";
			if(Book_Border){
				B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
				B_LI.style.borderWidth=1+"px";
				B_MI.style.borderWidth=1+"px";
				B_RI.style.borderWidth=1+"px";
				B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
			B_LI.src=B_Pre_Img[0].src;
			B_LI.lnk=Book_Image_Sources[1];
			B_MI.src=B_Pre_Img[2].src;
			B_MI.lnk=Book_Image_Sources[3];
			B_RI.src=B_Pre_Img[4].src;
			B_RI.lnk=Book_Image_Sources[5];
			B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
			B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
			B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
			BookImages()}}

	function BookImages(){
		if(!B_Stppd){
			if(Book_Vertical_Turn){
				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
				MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
				B_MI.style.top=MidOffset+"px";
				B_MI.style.height=B_MSz+"px"}
			else{	B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
				MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
				B_MI.style.left=MidOffset+"px";
				B_MI.style.width=B_MSz+"px"}
			B_Angle+=Book_Speed/720*Math.PI;
			if(B_Angle>=Math.PI/2&&B_Direction){
				B_Direction=0;
				if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
				B_MI.src=B_Pre_Img[B_CrImg].src;
				B_MI.lnk=Book_Image_Sources[B_CrImg+1];
				B_CrImg+=2}
			if(B_Angle>=Math.PI){
				B_Direction=1;
				B_TI=B_LI;
				B_LI=B_MI;
				B_MI=B_TI;
				if(Book_Vertical_Turn)B_MI.style.top=0+"px";
				else B_MI.style.left=Book_Image_Width+1+"px";			
				B_MI.src=B_RI.src;
				B_MI.lnk=B_RI.lnk;

				setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("BookImages()",50)}
		else setTimeout("BookImages()",50)}

	function Book_Next_Delay(){
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_Image_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookImages()",50)}

	function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	function B_Rstrt(){B_Stppd=false}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onload="ImageBook()"> 
<div id="Book" style="position:relative">

		<img src="placeholder.gif" width="144" height="227">
	</div>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Ger Versluis [more]
5,464
0
0
0
7.07 KBytes

JavaScript Book Flip Slideshow

0/5 0 votes / 5,464 previews / 0 comment 30/01/2007 As the name loosely implies, Book Flip is an image slideshow that simulates a page bein...JavaScript Book Flip Slideshow - Book Flip Slideshow

Let's be first member to do this

forsaken hieuhuynh01 thaonguyen_36 anhtiep tigerintel

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Book Flip Slideshow

Label: Book Flip Slideshow (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Book Flip Slideshow