Results 1 to 3 of 3

Thread: flip live images

  1. #1
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default flip live images

    hi, please take look one of DHTML sample at
    http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

    It is possible to do that from top to down instead of right to left!

    what i'm looking for, let say that i have color Square image, forground will be color of red and back will be color of green, so when person click on that is flip five times from top to down, and while flip you can see live background green or red, just like that link at http://www.dynamicdrive.com/dynamicindex14/bookflip.htm.

    i have tried with that link and didn't works that way. please help.

    thanks.

  2. #2
    Join Date
    Apr 2006
    Location
    London
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Alidad View Post
    hi, please take look one of DHTML sample at
    http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

    It is possible to do that from top to down instead of right to left!
    Just change
    Code:
    var Book_Vertical_Turn=0;
    to
    Code:
    var Book_Vertical_Turn=1;

    full code:

    Code:
    <body onload="ImageBook()">
    
    <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;
    var Book_Vertical_Turn=1; 
    
    // array to specify images and optional links. At least 4
    // If Link is not needed keep it ""
    
    Book_Image_Sources=new Array(
    "photo1.jpg","http://www.dynamicdrive.com",
    "photo2.jpg","http://www.javascriptkit.com",
    "photo3.jpg","", //this slide isn't linked
    "photo4.jpg","http://www.codingforums.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>
    
    <div id="Book" style="position:relative">
    <img src="placeholder.gif" width="144" height="227">
    </div>
    
    <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
    </body>


    VatsaL

  3. #3
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi, thank you so much for your help, I'm sorry I mis-wrote what i looking for. after i tested that is works great but is not what i was looking for.

    What I was looking for is that they are two images, and instead of flip over, just turn around. let say that i have two images of dog and horse, and when click on that image is turn over not flip over like book, but turn over, and while turn over you see live second background.

    And when turn over then turn over five times.

    I hope you can help me that thanks.

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
  •