Results 1 to 3 of 3

Thread: Two Modifications to the Book Flip Slideshow Script

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Two Modifications to the Book Flip Slideshow Script

    1) Script Title:
    Book Flip Slideshow

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

    3) Describe problem:

    This isn't a problem because the script rocks, here's a question I had. Really two questions regarding modifications.

    First of all, is it possible to add an "alt" tag to the pictures, so when you hover over them you get the image alt name, like you do on a regular image?

    If this is possible how?

    Second of all, instead of having the script flip automatically and stop when you mouseover, would it be possible to make it so you have a click button like on other slide shows. So you click the button marked << or >> and it moves back and forth on user clicks. Just wondering on that, I reckon that might be a major rewrite, but it'd be nice


    As always thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The author has made a version of this script that supports buttons:

    http://www.burmees.nl/menu/bookextended.html

    There are other differences, particularly in the syntax for the array of images. So, be sure to follow the installation for this 'extended' version from scratch. Don' try to paste parts of your code from the old one into it.

    Now, when you say:

    "alt" tag to the pictures, so when you hover over them you get the image alt name
    This is not what the alt attribute is for. And, only IE will treat it that way. All images should have an alt attribute but, it is only meant to be used if the image is unavailable. There is another attribute, the title attribute. That attribute gives these mouseover tips in IE and in all other browsers as well.

    All that said, there is no simple way to add title or alt attributes to this script but, it can be done. I will play with it a bit to see what might be the best way.
    Last edited by jscheuer1; 04-15-2007 at 08:03 AM. Reason: Clarity
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, working from the extended script, additions red:

    Code:
    	Book_Image_Sources=new Array(
    		"photo1.jpg","","",
    		"photo2.jpg","","",
    		"photo3.jpg","","",
    		"photo4.jpg","","",
    		"photo5.jpg","","",
    		"photo6.jpg","","",
    		"photo7.jpg","","",
    		"photo8.jpg","",""	// NOTE No comma after last line
    		);
    
    	Book_Titles=new Array(
    		"Kissing Fools",
    		"Seated Woman",
    		"The Dog Lovers",
    		"Standing Woman",
    		"Jesus, Mary and John",
    		"Crucifix",
    		"Alter Boys",
    		"Young Pan"	// NOTE No comma after last line
    		);
    
    /********************************** DO NOT EDIT BELOW *******************************************************/
    
    	var B_LI,B_MI,B_RI,B_TI;
    	var B_Angle=0,B_CrMImg,B_CrSImg,B_MaxW,B_Drctn=true,B_DirChngd=false;
    	var B_Srcs=Book_Image_Sources,B_SrcL=B_Srcs.length,B_ChngDirFlg=false;
    	var B_MSz,B_Stppd=Book_Auto?false:true;B_Pre_Img=new Array(B_SrcL);
    
    	function findTitle(e){
    	var im=window.event? window.event.srcElement : e.target;
    	for (var i_tem = 0; i_tem < B_Srcs.length; i_tem+=3)
    		if(im&&im.src&&im.src.indexOf(B_Srcs[i_tem])>-1){
    		im.title=Book_Titles[i_tem/3];
    		im.alt='Slide Show Image #'+i_tem/3;
    		}
    	}
    
    	function ImageBook(){
    		if(document.getElementById){
    			for(var i=0;i<B_SrcL;i+=3){B_Pre_Img[i]=new Image();B_Pre_Img[i].src=B_Srcs[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);
    			var B_IMS=[B_LI,B_RI,B_MI];
    			for (var i_tem = 0; i_tem < B_IMS.length; i_tem++)
    			if ( typeof window.addEventListener != "undefined" )
    			    B_IMS[i_tem].addEventListener( "mouseover", findTitle, false );
    			else if ( typeof window.attachEvent != "undefined" )
    			    B_IMS[i_tem].attachEvent( "onmouseover", findTitle );
    			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=B_LI.style.left=B_MI.style.top=B . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •