nice bubble preview in photo index view

git-svn-id: file:///var/lib/svn/phpfspot/trunk@33 fa6a889d-dae6-447d-9e79-4ba9a3039384

diff --git a/bubble.js b/bubble.js
new file mode 100644 (file)
index 0000000..39ae03e
--- /dev/null
+++ b/bubble.js
@@ -0,0 +1,261 @@
+/*\r
+    WebSnapr - Preview Bubble Javascript\r
+    Written by Juan Xavier Larrea \r
+    http://www.websnapr.com - xavier@websnapr.com   \r
+    \r
+*/\r
+\r
+// Point this variable to the correct location of the bg.png file\r
+var bubbleImagePath = 'resources/bubble_bg.png';\r
+\r
+if(typeof Array.prototype.push!="function"){\r
+   Array.prototype.push=ArrayPush;\r
+\r
+   function ArrayPush(_1){\r
+      this[this.length]=_1;\r
+   }\r
+}\r
+\r
+function WSR_getElementsByClassName(_2,_3,_4){\r
+\r
+   var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);\r
+   var _6=new Array();\r
+   _4=_4.replace(/\-/g,"\\-");\r
+   var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");\r
+   var _8;\r
+   for(var i=0;i<_5.length;i++){\r
+      _8=_5[i];\r
+      if(_7.test(_8.className)){\r
+         _6.push(_8);\r
+      }\r
+   }\r
+   return (_6);\r
+}\r
+\r
+function bindBubbles(e){\r
+   lbActions=WSR_getElementsByClassName(document,"a","bubble");\r
+   for(i=0;i<lbActions.length;i++){\r
+      if(window.addEventListener){\r
+         lbActions[i].addEventListener("mouseover",attachBubble,false);\r
+         lbActions[i].addEventListener("mouseout",detachBubble,false);\r
+      }else{\r
+         lbActions[i].attachEvent("onmouseover",attachBubble);\r
+         lbActions[i].attachEvent("onmouseout",detachBubble);\r
+      }\r
+   }\r
+}\r
+\r
+function attachBubble(_b){\r
+   var _c;\r
+   if(_b["srcElement"]){\r
+      _c=_b["srcElement"];\r
+   }else{\r
+      _c=_b["target"];\r
+   }\r
+   if (_c.href == undefined){\r
+      _c=_c.parentNode;\r
+   }\r
+\r
+   var _d=_c.href;\r
+   var _e=findPos(_c)[0]+5;\r
+   var _f=findPos(_c)[1]+17;\r
+   var _10=document.createElement("div");\r
+   document.getElementsByTagName("body")[0].appendChild(_10);\r
+   _10.className="bubble";\r
+\r
+   if (BrowserDetect.browser == 'Explorer') {\r
+      _10.style.width="240px";\r
+      _10.style.position="absolute";\r
+      _10.style.top=_f;\r
+      _10.style.zIndex=99999;\r
+      _10.style.left=_e;\r
+      _10.style.textAlign="left";\r
+      _10.style.height="190px";\r
+      _10.style.paddingTop="0";\r
+      _10.style.paddingLeft="0";\r
+      _10.style.paddingBottom="0";\r
+      _10.style.paddingRight="0";\r
+      _10.style.marginTop="0";\r
+      _10.style.marginLeft="0";\r
+      _10.style.marginBottom="0";\r
+      _10.style.marginRight="0";\r
+      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImagePath + "',sizingMethod='image')";\r
+   } else {\r
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+   }\r
+\r
+   if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
+\r
+      var _height = _f;\r
+    \r
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+    \r
+   }\r
+\r
+   var img=document.createElement("img");\r
+   _10.appendChild(img);\r
+\r
+   if (BrowserDetect.browser == 'Explorer') {\r
+      img.style.paddingTop="0";\r
+      img.style.paddingLeft="0";\r
+      img.style.paddingBottom="0";\r
+      img.style.paddingRight="0";\r
+      img.style.margin="auto";\r
+      img.style.marginTop="27px";\r
+      img.style.marginLeft="25px";\r
+      img.style.marginBottom="0";\r
+      img.style.marginRight="0";\r
+      img.style.borderTop="0";\r
+      img.style.borderLeft="0";\r
+      img.style.borderBottom="0";\r
+      img.style.borderRight="0";\r
+   } else {\r
+      img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 27px; margin-left: 12px; margin-bottom: 0; margin-right: 0; border: 0");\r
+   }\r
+   img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");\r
+   img.setAttribute("width",202);\r
+   img.setAttribute("height",152);\r
+   img.setAttribute("alt","Snapshot");\r
+}\r
+\r
+function detachBubble(_12){\r
+   lbActions=WSR_getElementsByClassName(document,"div","bubble");\r
+   for(i=0;i<lbActions.length;i++){\r
+      lbActions[i].parentNode.removeChild(lbActions[i]);\r
+   }\r
+}\r
+\r
+/*if(window.addEventListener){\r
+   addEventListener("load",bindBubbles,false);\r
+}else{\r
+   attachEvent("onload",bindBubbles);\r
+}*/\r
+\r
+function findPos(obj){\r
+   var _14=curtop=0;\r
+   if(obj.offsetParent){\r
+      _14=obj.offsetLeft;\r
+      curtop=obj.offsetTop;\r
+      while(obj=obj.offsetParent){\r
+         _14+=obj.offsetLeft;\r
+         curtop+=obj.offsetTop;\r
+      }\r
+   }\r
+   return [_14,curtop];\r
+}\r
+\r
+var BrowserDetect = {\r
+       init: function () {\r
+               this.browser = this.searchString(this.dataBrowser) || "An unknown browser";\r
+               this.version = this.searchVersion(navigator.userAgent)\r
+                       || this.searchVersion(navigator.appVersion)\r
+                       || "an unknown version";\r
+               this.OS = this.searchString(this.dataOS) || "an unknown OS";\r
+       },\r
+       searchString: function (data) {\r
+               for (var i=0;i<data.length;i++) {\r
+                       var dataString = data[i].string;\r
+                       var dataProp = data[i].prop;\r
+                       this.versionSearchString = data[i].versionSearch || data[i].identity;\r
+                       if (dataString) {\r
+                               if (dataString.indexOf(data[i].subString) != -1)\r
+                                       return data[i].identity;\r
+                       }\r
+                       else if (dataProp)\r
+                               return data[i].identity;\r
+               }\r
+       },\r
+       searchVersion: function (dataString) {\r
+               var index = dataString.indexOf(this.versionSearchString);\r
+               if (index == -1) return;\r
+               return parseFloat(dataString.substring(index+this.versionSearchString.length+1));\r
+       },\r
+       dataBrowser: [\r
+               {       string: navigator.userAgent,\r
+                       subString: "OmniWeb",\r
+                       versionSearch: "OmniWeb/",\r
+                       identity: "OmniWeb"\r
+               },\r
+               {\r
+                       string: navigator.vendor,\r
+                       subString: "Apple",\r
+                       identity: "Safari"\r
+               },\r
+               {\r
+                       prop: window.opera,\r
+                       identity: "Opera"\r
+               },\r
+               {\r
+                       string: navigator.vendor,\r
+                       subString: "iCab",\r
+                       identity: "iCab"\r
+               },\r
+               {\r
+                       string: navigator.vendor,\r
+                       subString: "KDE",\r
+                       identity: "Konqueror"\r
+               },\r
+               {\r
+                       string: navigator.userAgent,\r
+                       subString: "Firefox",\r
+                       identity: "Firefox"\r
+               },\r
+               {\r
+                       string: navigator.vendor,\r
+                       subString: "Camino",\r
+                       identity: "Camino"\r
+               },\r
+               {               // for newer Netscapes (6+)\r
+                       string: navigator.userAgent,\r
+                       subString: "Netscape",\r
+                       identity: "Netscape"\r
+               },\r
+               {\r
+                       string: navigator.userAgent,\r
+                       subString: "MSIE",\r
+                       identity: "Explorer",\r
+                       versionSearch: "MSIE"\r
+               },\r
+               {\r
+                       string: navigator.userAgent,\r
+                       subString: "Gecko",\r
+                       identity: "Mozilla",\r
+                       versionSearch: "rv"\r
+               },\r
+               {               // for older Netscapes (4-)\r
+                       string: navigator.userAgent,\r
+                       subString: "Mozilla",\r
+                       identity: "Netscape",\r
+                       versionSearch: "Mozilla"\r
+               }\r
+       ],\r
+       dataOS : [\r
+               {\r
+                       string: navigator.platform,\r
+                       subString: "Win",\r
+                       identity: "Windows"\r
+               },\r
+               {\r
+                       string: navigator.platform,\r
+                       subString: "Mac",\r
+                       identity: "Mac"\r
+               },\r
+               {\r
+                       string: navigator.platform,\r
+                       subString: "Linux",\r
+                       identity: "Linux"\r
+               }\r
+       ]\r
+\r
+};\r
+\r
+function var_dump(obj) {\r
+   if(typeof obj == "object") {\r
+      return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;\r
+   } else {\r
+      return "Type: "+typeof(obj)+"\nValue: "+obj;\r
+   }\r
+}//end function var_dump\r
+\r
+\r
+BrowserDetect.init();\r

diff --git a/phpfspot.js b/phpfspot.js
index ce49f350eeac7380fc43451c8fe1c3b9c239d177..c2fe0d6f41e8e546ebf3750985e68fd05d3a54e7 100644 (file)
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -39,6 +39,8 @@ function refreshSelectedTags()
 
 function showPhotoIndex()
 {
-   content = document.getElementById("content");
-   content.innerHTML = HTML_AJAX.grab('rpc.php?action=show_photo_index');
+   HTML_AJAX.replace(document.getElementById("content"), 'rpc.php?action=show_photo_index');
+
+//   content = document.getElementById("content");
+//   content.innerHTML = HTML_AJAX.grab('rpc.php?action=show_photo_index');
 }

diff --git a/resources/bubble_bg.png b/resources/bubble_bg.png
new file mode 100644 (file)
index 0000000..bb0bec2
Binary files /dev/null and b/resources/bubble_bg.png differ

diff --git a/templates/header.tpl b/templates/header.tpl
index 9f1e85a63b2d0203a7e31c9c7e256f490e3a286a..ce88ff086df9a8327226c18761ddc26ce9ba8aca 100644 (file)
--- a/templates/header.tpl
+++ b/templates/header.tpl
@@ -6,4 +6,5 @@
   <link href="stylesheet.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="rpc.php?mode=init&amp;client=all"></script>
   <script type="text/javascript" src="phpfspot.js"></script>
+  <script type="text/javascript" src="bubble.js"></script>
  </head>                                                                                                      

diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl
index 3172547d6794287c884747c147453e3e7ef187e6..1647f5a9040d8170df823f83092a6aacd7284f98 100644 (file)
--- a/templates/photo_index.tpl
+++ b/templates/photo_index.tpl
@@ -21,7 +21,7 @@
       {if $images[row][col] }
       <div id="outter">
       <div id="inner">
-       <a href="javascript:showImage({$images[row][col]});">
+       <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" class="bubble">
         <img class="thumb" src="phpfspot_img.php?idx={$images[row][col]}&amp;width={$width}" />
        </a>
       </div>
@@ -38,4 +38,9 @@
   </td>
  </tr>
 </table>
+<script type="text/javascript">
+<!--
+   bindBubbles();
+-->
+</script>
 <!-- /Image Matrix -->