Changeset 24764

Timestamp:

17.10.2011 09:13:34 (8 years ago)

Author:

papitha

Message:

Added Dual Link to Collage and Flip Photo.

Location:

main/trunk/model-cols-dev/peijones/transform/pages

Files:

• about.xsl (modified) (5 diffs)
• document.xsl (modified) (3 diffs)

main/trunk/model-cols-dev/peijones/transform/pages/about.xsl

@@ -14 +14 @@
         and if some services are available then create a list
         of links for each service within a <ul id="servicelist"> element.-->
-    <table><tbody><tr><td style="width:60%;"><gslib:collectionDescriptionTextAndServicesLinks/></td>
+    <table><tbody>
+    <tr><td style="width:60%;"><gslib:collectionDescriptionTextAndServicesLinks/></td>
     <td>
     
@@ -22 +23 @@
 <script language="javascript" type="text/javascript">
 <xsl:text disable-output-escaping="yes">
+
+    var Book_Image_Sources = new Array();
+    var Book_Image_Width=200;
+    var Book_Image_Height=280;
+    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;
+
+    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();
+
+    function ImageBook()
+    {
+        if(document.getElementById)
+        {
+            for(i=0;i&lt;Book_Image_Sources.length;i+=1)
+            {
+                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:-Book_Image_Height/3)+"px";
+            B_LI.style.left=0+"px";
+            B_MI.style.top=-Book_Image_Height/3+"px";
+            B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
+            B_RI.style.top=-Book_Image_Height/3+"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&gt;=Math.PI/2&amp;&amp;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];
+                B_CrImg+=1
+            }
+            if(B_Angle&gt;=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];
+        B_MI.style.zIndex=2;
+        B_LI.style.zIndex=1;
+        B_Angle=0;
+        B_CrImg+=1;
+        
+        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
+    }
+    
 
   var collageDelayMsec = 2000;
@@ -45 +200 @@
         var j = (colframeNum+1+i) % numCollageImages;
 
-        console.log("j = " + j);
         var zindex = collagelet[j].style.zIndex;
         if (zindex &gt; 0) {
@@ -147 +301 @@
 
 
-    <div id="collagewrapper"  
-        style="background: #ffffd0; 
-            width: 600px;
-            height: 500px;
-            position: relative; left: 0px; top: 0px;">
+    <div id="collagewrapper" style="background: #ffffd0; width: 600px; height: 500px; position: relative; left: 0px; top: 0px;"><xsl:text> </xsl:text>
     </div>
-        
-    
-    </td></tr></tbody></table>
+
+    <div id="Book" style="position:relative;">
+        <img src="placeholder.png" width="404"><xsl:text> </xsl:text></img>
+    </div>
+    
+    </td></tr>
+    <tr><td><button id="switchImageDisplay" style="display:none; float:right;">Flip Photos</button></td></tr>
+    </tbody></table>
 
     <script type="text/javascript">
 <xsl:text disable-output-escaping="yes">
-
-    var Book_Image_Sources = new Array();
 
 function getImages()
@@ -186 +339 @@
             if(Book_Image_Sources.length &gt; 0)
             {
+                var button = document.getElementById("switchImageDisplay");
+                var BookDiv = document.getElementById("Book");
+                var CollDiv = document.getElementById("collagewrapper");
+
+                button.style.display = "block";
+                button.onclick = function()
+                {
+                    if(button.innerHTML == "Flip Book")
+                    {
+                        BookDiv.style.display = "block";
+                        CollDiv.style.display = "none";
+                        button.innerHTML = "Collage";
+                    }
+                    else
+                    {
+                        BookDiv.style.display = "none";
+                        CollDiv.style.display = "block";
+                        button.innerHTML = "Flip Book";
+                    }
+                }
                 initCollage();
                 collageNextImage(1);
+                ImageBook();
+                BookDiv.style.display = "none";
             }
         },

main/trunk/model-cols-dev/peijones/transform/pages/document.xsl

@@ -35 +35 @@
         <script type="text/javascript" src="sites/localsite/collect/peijones/js/documentmaker/PhotoNotes-1.5.js"><xsl:text> </xsl:text></script>
         <link rel="stylesheet" type="text/css" href="sites/localsite/collect/peijones/style/PhotoNotes-1.5.css"/>
+        
+        <!--
         <div class="Photo fn-container" id="PhotoContainer">
             <img src="sites/localsite/collect/peijones/images/photo/0_PAColl-0671-01korokijones.jpg" />
@@ -40 +42 @@
 
         <input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
+        -->
+        
         <script type="text/javascript">
             <xsl:text disable-output-escaping="yes">
@@ -144 +148 @@
                     newNote.Select();
                 }
-                //window.onload = function(){getNotes(); readyImagesForZoom();};
+                window.onload = function(){getNotes(); readyImagesForZoom(); initAnnotator();};
             </xsl:text>
         </script>