API tools faq
paste
Advertisement
Guest User

php

a guest
May 24th, 2016
18
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 13.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Galeria SpeedyTrans</title>
  6. <link rel="stylesheet" type="text/css" href="style.css"/>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  9. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  10. <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14. <div id="outer_container">
  15. <div id="customScrollBox">
  16.     <div class="container">
  17.         <div class="content">
  18.             <h1><span class="lightgrey">Galeria SpeedyTrans</span> <br /></h1>
  19.             <p>Oto skromna galeria firmy SpeedyTrans. Serdecznie zapraszamy do oglądania.</p>
  20.             <div id="toolbar"></div><div class="clear"></div>
  21.            
  22. <?php
  23.     $dirname = "imgs/space/";
  24.     $images = glob($dirname."*.jpg");
  25.    
  26.     foreach($images as $image) {
  27.         echo '<a href="'.$image.'" class="thumb_link"><span class="selected"></span>
  28. <img src="imgs/space/miniaturka/'.$image.'" class="thumb" /></a>';
  29.     }
  30. ?>
  31.        
  32.        
  33. <a href="pasja-informatyki.jpg" class="thumb_link"><span class="selected"></span>
  34. <img src="miniaturka/pasja-informatyki.jpg" class="thumb" /></a>
  35.  
  36.  
  37.  
  38.  
  39.             <p class="clear"></p>
  40.         </div>
  41.     </div>
  42.     <div id="dragger_container"><div id="dragger"></div></div>
  43. </div>
  44. </div>
  45. <div id="bg">
  46.     <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" title="Supremus Lucernarium" id="bgimg" />
  47.     <div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />ŁADOWANIE...</div>
  48.     <div id="arrow_indicator"><img src="sw_arrow_indicator.png" width="50" height="50"  /></div>
  49.     <div id="nextimage_tip">Klinknij, aby załadować następne zdjęcie.</div>
  50. </div>
  51. <script>
  52.     //set default view mode
  53.     $defaultViewMode="full"; //full (fullscreen background), fit (fit to window), original (no scale)
  54.     //cache vars
  55.     $bg=$("#bg");
  56.     $bgimg=$("#bg #bgimg");
  57.     $preloader=$("#preloader");
  58.     $outer_container=$("#outer_container");
  59.     $outer_container_a=$("#outer_container a.thumb_link");
  60.     $toolbar=$("#toolbar");
  61.     $nextimage_tip=$("#nextimage_tip");
  62.    
  63. $(window).load(function() {
  64.     $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
  65.     ImageViewMode($toolbar.data("imageViewMode"));
  66.     //cache vars
  67.     $customScrollBox=$("#customScrollBox");
  68.     $customScrollBox_container=$("#customScrollBox .container");
  69.     $customScrollBox_content=$("#customScrollBox .content");
  70.     $dragger_container=$("#dragger_container");
  71.     $dragger=$("#dragger");
  72.    
  73.     CustomScroller();
  74.    
  75.     function CustomScroller(){
  76.         outerMargin=0;
  77.         innerMargin=20;
  78.         $customScrollBox.height($(window).height()-outerMargin);
  79.         $dragger_container.height($(window).height()-innerMargin);
  80.         visibleHeight=$(window).height()-outerMargin;
  81.         if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
  82.             $dragger_container,$dragger.css("display","block");
  83.             totalContent=$customScrollBox_content.height();
  84.             draggerContainerHeight=$(window).height()-innerMargin;
  85.             animSpeed=400; //animation speed
  86.             easeType="easeOutCirc"; //easing type
  87.             bottomSpace=1.05; //bottom scrolling space
  88.             targY=0;
  89.             draggerHeight=$dragger.height();
  90.             $dragger.draggable({
  91.                 axis: "y",
  92.                 containment: "parent",
  93.                 drag: function(event, ui) {
  94.                     Scroll();
  95.                 },
  96.                 stop: function(event, ui) {
  97.                     DraggerOut();
  98.                 }
  99.             });
  100.  
  101.             //scrollbar click
  102.             $dragger_container.click(function(e) {
  103.                 var mouseCoord=(e.pageY - $(this).offset().top);
  104.                 var targetPos=mouseCoord+$dragger.height();
  105.                 if(targetPos<draggerContainerHeight){
  106.                     $dragger.css("top",mouseCoord);
  107.                     Scroll();
  108.                 } else {
  109.                     $dragger.css("top",draggerContainerHeight-$dragger.height());
  110.                     Scroll();
  111.                 }
  112.             });
  113.  
  114.             //mousewheel
  115.             $(function($) {
  116.                 $customScrollBox.bind("mousewheel", function(event, delta) {
  117.                     vel = Math.abs(delta*10);
  118.                     $dragger.css("top", $dragger.position().top-(delta*vel));
  119.                     Scroll();
  120.                     if($dragger.position().top<0){
  121.                         $dragger.css("top", 0);
  122.                         $customScrollBox_container.stop();
  123.                         Scroll();
  124.                     }
  125.                     if($dragger.position().top>draggerContainerHeight-$dragger.height()){
  126.                         $dragger.css("top", draggerContainerHeight-$dragger.height());
  127.                         $customScrollBox_container.stop();
  128.                         Scroll();
  129.                     }
  130.                     return false;
  131.                 });
  132.             });
  133.  
  134.             function Scroll(){
  135.                 var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
  136.                 var draggerY=$dragger.position().top;
  137.                 targY=-draggerY*scrollAmount;
  138.                 var thePos=$customScrollBox_container.position().top-targY;
  139.                 $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
  140.             }
  141.  
  142.             //dragger hover
  143.             $dragger.mouseup(function(){
  144.                 DraggerOut();
  145.             }).mousedown(function(){
  146.                 DraggerOver();
  147.             });
  148.  
  149.             function DraggerOver(){
  150.                 $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
  151.             }
  152.  
  153.             function DraggerOut(){
  154.                 $dragger.css("background", "url(round_custom_scrollbar_bg.png)");
  155.             }
  156.         } else { //hide custom scrollbar if content is short
  157.             $dragger,$dragger_container.css("display","none");
  158.         }
  159.     }
  160.  
  161.     //resize browser window functions
  162.     $(window).resize(function() {
  163.         FullScreenBackground("#bgimg"); //scale bg image
  164.         $dragger.css("top",0); //reset content scroll
  165.         $customScrollBox_container.css("top",0);
  166.         $customScrollBox.unbind("mousewheel");
  167.         CustomScroller();
  168.     });
  169.    
  170.     LargeImageLoad($bgimg);
  171. });
  172.    
  173.     //loading bg image
  174.     $bgimg.load(function() {
  175.         LargeImageLoad($(this));
  176.     });
  177.    
  178.     function LargeImageLoad($this){
  179.         $preloader.fadeOut("fast"); //hide preloader
  180.         $this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
  181.         $bg.data("originalImageWidth",$this.width()).data("originalImageHeight",$this.height());
  182.         if($bg.data("newTitle")){
  183.             $this.attr("title",$bg.data("newTitle")); //set new image title attribute
  184.         }
  185.         FullScreenBackground($this); //scale new image
  186.         $bg.data("nextImage",$($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
  187.         if(typeof itemIndex!="undefined"){
  188.             if(itemIndex==lastItemIndex){ //check if it is the last image
  189.                 $bg.data("lastImageReached","Y");
  190.                 $bg.data("nextImage",$outer_container_a.first().attr("href")); //get and store next image
  191.             } else {
  192.                 $bg.data("lastImageReached","N");
  193.             }
  194.         } else {
  195.             $bg.data("lastImageReached","N");
  196.         }
  197.         $this.fadeIn("slow"); //fadein background image
  198.         if($bg.data("nextImage") || $bg.data("lastImageReached")=="Y"){ //don't close thumbs pane on 1st load
  199.             SlidePanels("close"); //close the left pane
  200.         }
  201.         NextImageTip();
  202.     }
  203.  
  204.     //slide in/out left pane
  205.     $outer_container.hover(
  206.         function(){ //mouse over
  207.             SlidePanels("open");
  208.         },
  209.         function(){ //mouse out
  210.             SlidePanels("close");
  211.         }
  212.     );
  213.    
  214.     //Clicking on thumbnail changes the background image
  215.     $outer_container_a.click(function(event){
  216.         event.preventDefault();
  217.         var $this=this;
  218.         $bgimg.css("display","none");
  219.         $preloader.fadeIn("fast"); //show preloader
  220.         //style clicked thumbnail
  221.         $outer_container_a.each(function() {
  222.             $(this).children(".selected").css("display","none");
  223.         });
  224.         $(this).children(".selected").css("display","block");
  225.         //get and store next image and selected thumb
  226.         $outer_container.data("selectedThumb",$this);
  227.         $bg.data("nextImage",$(this).next().attr("href"));  
  228.         $bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
  229.         itemIndex=getIndex($this); //get clicked item index
  230.         lastItemIndex=($outer_container_a.length)-1; //get last item index
  231.         $bgimg.attr("src", "").attr("src", $this); //switch image
  232.     });
  233.  
  234.     //clicking on large image loads the next one
  235.     $bgimg.click(function(event){
  236.         var $this=$(this);
  237.         if($bg.data("nextImage")){ //if next image data is stored
  238.             $this.css("display","none");
  239.             $preloader.fadeIn("fast"); //show preloader
  240.             $($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
  241.             if($bg.data("lastImageReached")!="Y"){
  242.                 $($outer_container.data("selectedThumb")).next().children(".selected").css("display","block"); //select new thumb
  243.             } else {
  244.                 $outer_container_a.first().children(".selected").css("display","block"); //select new thumb - first
  245.             }
  246.             //store new selected thumb
  247.             var selThumb=$outer_container.data("selectedThumb");
  248.             if($bg.data("lastImageReached")!="Y"){
  249.                 $outer_container.data("selectedThumb",$(selThumb).next());
  250.             } else {
  251.                 $outer_container.data("selectedThumb",$outer_container_a.first());
  252.             }
  253.             $bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
  254.             if($bg.data("lastImageReached")!="Y"){
  255.                 itemIndex++;
  256.             } else {
  257.                 itemIndex=0;
  258.             }
  259.             $this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
  260.         }
  261.     });
  262.    
  263.     //function to get element index (fuck you IE!)
  264.     function getIndex(theItem){
  265.         for ( var i = 0, length = $outer_container_a.length; i < length; i++ ) {
  266.             if ( $outer_container_a[i] === theItem ) {
  267.                 return i;
  268.             }
  269.         }
  270.     }
  271.    
  272.     //toolbar (image view mode button) hover
  273.     $toolbar.hover(
  274.         function(){ //mouse over
  275.             $(this).stop().fadeTo("fast",1);
  276.         },
  277.         function(){ //mouse out
  278.             $(this).stop().fadeTo("fast",0.8);
  279.         }
  280.     );
  281.     $toolbar.stop().fadeTo("fast",0.8); //set its original state
  282.    
  283.     //Clicking on toolbar changes the image view mode
  284.     $toolbar.click(function(event){
  285.         if($toolbar.data("imageViewMode")=="full"){
  286.             ImageViewMode("fit");
  287.         } else if($toolbar.data("imageViewMode")=="fit") {
  288.             ImageViewMode("original");
  289.         } else if($toolbar.data("imageViewMode")=="original"){
  290.             ImageViewMode("full");
  291.         }
  292.     });
  293.  
  294.     //next image balloon tip
  295.     function NextImageTip(){
  296.         if($bg.data("nextImage")){ //check if this is the first image
  297.             $nextimage_tip.stop().css("right",20).fadeIn("fast").fadeOut(2000,"easeInExpo",function(){$nextimage_tip.css("right",$(window).width());});
  298.         }
  299.     }
  300.  
  301.     //slide in/out left pane function
  302.     function SlidePanels(action){
  303.         var speed=900;
  304.         var easing="easeInOutExpo";
  305.         if(action=="open"){
  306.             $("#arrow_indicator").fadeTo("fast",0);
  307.             $outer_container.stop().animate({left: 0}, speed,easing);
  308.             $bg.stop().animate({left: 585}, speed,easing);
  309.         } else {
  310.             $outer_container.stop().animate({left: -710}, speed,easing);
  311.             $bg.stop().animate({left: 0}, speed,easing,function(){$("#arrow_indicator").fadeTo("fast",1);});
  312.         }
  313.     }
  314.  
  315. //Image scale function
  316. function FullScreenBackground(theItem){
  317.     var winWidth=$(window).width();
  318.     var winHeight=$(window).height();
  319.     var imageWidth=$(theItem).width();
  320.     var imageHeight=$(theItem).height();
  321.     if($toolbar.data("imageViewMode")!="original"){ //scale
  322.         $(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
  323.         var picHeight = imageHeight / imageWidth;
  324.         var picWidth = imageWidth / imageHeight;
  325.         if($toolbar.data("imageViewMode")!="fit"){ //image view mode: full
  326.             if ((winHeight / winWidth) < picHeight) {
  327.                 $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
  328.             } else {
  329.                 $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
  330.             };
  331.         } else { //image view mode: fit
  332.             if ((winHeight / winWidth) > picHeight) {
  333.                 $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
  334.             } else {
  335.                 $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
  336.             };
  337.         }
  338.         //center it
  339.         $(theItem).css("margin-left",((winWidth - $(theItem).width())/2)).css("margin-top",((winHeight - $(theItem).height())/2));
  340.     } else { //no scale
  341.         //add extra styles for orininal view mode
  342.         $(theItem).addClass("with_border").addClass("with_shadow");
  343.         //set original dimensions
  344.         $(theItem).css("width",$bg.data("originalImageWidth")).css("height",$bg.data("originalImageHeight"));
  345.         //center it
  346.         $(theItem).css("margin-left",((winWidth-$(theItem).outerWidth())/2)).css("margin-top",((winHeight-$(theItem).outerHeight())/2));
  347.     }
  348. }
  349.  
  350. //image view mode function - full or fit
  351. function ImageViewMode(theMode){
  352.     $toolbar.data("imageViewMode", theMode); //store new mode
  353.     FullScreenBackground($bgimg); //scale bg image
  354.     //re-style button
  355.     if(theMode=="full"){
  356.         $toolbar.html("<span class='lightgrey'>METODA WYŚWIETLANIA &rsaquo;</span> PEŁNY EKRAN");
  357.     } else if(theMode=="fit") {
  358.         $toolbar.html("<span class='lightgrey'>METODA WYŚWIETLANIA &rsaquo;</span> DOPASUJ");
  359.     } else {
  360.         $toolbar.html("<span class='lightgrey'>METODA WYŚWIETLANIA &rsaquo;</span> ORYGINAŁ");
  361.     }
  362. }
  363.  
  364. //preload script images
  365. var images=["ajax-loader_dark.gif","round_custom_scrollbar_bg_over.png"];
  366. $.each(images, function(i) {
  367.   images[i] = new Image();
  368.   images[i].src = this;
  369. });
  370. </script>
  371. </body>
  372. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!