[mod] update example

example/build/first_gallery/index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
   <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
+  <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
 
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -111,8 +112,16 @@
   </div>
 
   <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
     baguetteBox.run(".baguette", {});
+    $(".panorama").panorama_viewer({
+        repeat: false,
+        direction: "horizontal",
+        animationTime: 700,
+        easing: "ease-out",
+        overlay: true
+      });
   </script>
   <footer>
       <p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>

example/build/static/css/style-page.css

@@ -12,7 +12,14 @@ body {
 }
 
 section {
-    margin-bottom: 4em;
+    margin-bottom: 64px;
+}
+
+a {
+    text-decoration: none;
+    font-weight: bold;
+    color: #222;
+    font-style: italic;
 }
 
 .full-picture {
@@ -69,7 +76,6 @@ section {
     width: 80%;
     margin-left: 10%;
     margin-right: 10%;
-    margin-top: 3em;
 }
 
 .pictures-line {
@@ -96,7 +102,6 @@ section {
     margin-left: 15%;
     margin-right: 15%;
     color: #333;
-    margin-bottom: 3em;
 }
 
 footer {

example/build/static/js/jquery.panorama_viewer.min.js

@@ -0,0 +1 @@
+!function(e){function n(e,t){var n,r,i=t;this.pause=function(){window.clearTimeout(n);i-=new Date-r};this.resume=function(){r=new Date;n=window.setTimeout(e,i)};this.resume()}function r(e){var t=e.changedTouches,n=t[0],r="";switch(e.type){case"touchstart":r="mousedown";break;case"touchmove":r="mousemove";break;case"touchend":r="mouseup";break;default:return}var i=document.createEvent("MouseEvent");var s=2;if(navigator.userAgent.match(/Android/i)){s=10}i.initMouseEvent(r,true,true,window,1,n.screenX,n.screenY,n.clientX*s,n.clientY*s,false,false,false,false,0,null);n.target.dispatchEvent(i)}var t={repeat:false,direction:"horizontal",animationTime:700,easing:"ease-out",overlay:true};e.fn.panorama_viewer=function(n){document.addEventListener("touchstart",r,true);document.addEventListener("touchmove",r,true);document.addEventListener("touchend",r,true);document.addEventListener("touchcancel",r,true);return this.each(function(){var r=e.extend({},t,n),i=e(this);i.find("> img").load(function(){function l(t){var n={x:false,y:false},i={x:a.x-(u.x-t.clientX),y:a.y-(u.y-t.clientY)};if(r.direction=="horizontal"){if(r.repeat==true){n.x=true}else{n.x=i.x<0&&i.x*-1<o.w}if(f&&n.x){a.x=i.x;a.y=0}}else{if(r.repeat==true){n.y=true}else{n.y=i.y<0&&i.y*-1<o.h}if(f&&n.y){a.y=i.y;a.x=0}}e(this).css("background-position",a.x+"px "+a.y+"px");u.x=t.clientX;u.y=t.clientY;t.stopPropagation();return false}function c(t){f=false;n.unbind("mousemove",l);if(t.type=="mousedown"){u.x=t.clientX;u.y=t.clientY;f=true;n.bind("mousemove",l)}else{e(document.body).focus()}t.stopPropagation();return false}function h(){a={x:0,y:0};e(this).css("backgroundPosition","0 0")}i.find("> img").addClass("pv-pano");i.addClass("pv-container").wrapInner("<div class='pv-inner pv-animating'></div>");if(r.direction=="vertical"){i.addClass("pv-vertical")}i.find(".pv-animating").css({"-webkit-transition":"all "+r.animationTime+"ms "+r.easing,"-moz-transition":"all "+r.animationTime+"ms "+r.easing,"-ms-transition":"all "+r.animationTime+"ms "+r.easing,transition:"all "+r.animationTime+"ms "+r.easing});imgSrc=i.find(".pv-pano").attr("src");width=i.find(".pv-pano").width();height=i.find(".pv-pano").height();var t="no-repeat";if(r.repeat==true){t="repeat"}i.find(".pv-inner").css({height:height,width:width,background:"url("+imgSrc+") "+t,"background-size":"cover"});if(r.overlay==true){e("<div class='pv-overlay'><i class='pvicon-overlay'></i></div>").appendTo(i.find(".pv-inner"));i.find(".pv-inner").bind("mouseenter",function(){e(this).find(".pv-overlay ").fadeOut("fast")}).bind("mouseleave",function(){e(this).find(".pv-overlay ").fadeIn("fast")})}var n=i.find(".pv-inner"),s={w:parseInt(n.parent().width()),h:parseInt(n.parent().height())},o={w:width-s.w,h:height-s.h},u={x:0,y:0},a={x:0,y:0},f=false;n.bind("mousedown mouseup mouseleave",c);n.bind("dblclick",h);i.find(".pv-pano").hide()})})}}(window.jQuery)