Advertisement
disinfor

Malihu Jquery Gallery Mod

Jul 24th, 2013
719
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // JavaScript Document
  2.  
  3. //config
  4. //set default images view mode
  5. $defaultViewMode="full"; //full, normal, original
  6. $tsMargin=30; //first and last thumbnail margin (for better cursor interaction)
  7. $scrollEasing=600; //scroll easing amount (0 for no easing)
  8. $scrollEasingType="easeOutCirc"; //scroll easing type
  9. $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
  10. $thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
  11. $thumbnailsOpacity=0.6; //thumbnails default opacity
  12. $nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
  13. $keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")
  14.  
  15. //cache vars
  16. $thumbnails_wrapper=$("#thumbnails_wrapper");
  17. $outer_container=$("#outer_container");
  18. $thumbScroller=$(".thumbScroller");
  19. $thumbScroller_container=$(".thumbScroller .container");
  20. $thumbScroller_content=$(".thumbScroller .content");
  21. $thumbScroller_thumb=$(".thumbScroller .thumb");
  22. $preloader=$("#preloader");
  23. $toolbar=$("#toolbar");
  24. $toolbar_a=$("#toolbar a");
  25. $bgimg=$("#bgimg");
  26. $img_title=$("#img_title");
  27. $nextImageBtn=$(".nextImageBtn");
  28. $prevImageBtn=$(".prevImageBtn");
  29. $parent_link=$('.parent-link');
  30.  
  31.  
  32. $(window).load(function() {
  33.     $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
  34.     if($defaultViewMode=="full"){
  35.         $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  36.     } else {
  37.         $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  38.     }
  39.     ShowHideNextPrev($nextPrevBtnsInitState);
  40.     //thumbnail scroller
  41.     $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
  42.     sliderLeft=$thumbScroller_container.position().left;
  43.     sliderWidth=$outer_container.width();
  44.     $thumbScroller.css("width",sliderWidth);
  45.     var totalContent=0;
  46.     fadeSpeed=200;
  47.    
  48.     var $the_outer_container=document.getElementById("outer_container");
  49.     var $placement=findPos($the_outer_container);
  50.    
  51.     $thumbScroller_content.each(function () {
  52.         var $this=$(this);
  53.         totalContent+=$this.innerWidth();
  54.         $thumbScroller_container.css("width",totalContent);
  55.         $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
  56.     });
  57.  
  58.     $thumbScroller.mousemove(function(e){
  59.         if($thumbScroller_container.width()>sliderWidth){
  60.             var mouseCoords=(e.pageX - $placement[1]);
  61.             var mousePercentX=mouseCoords/sliderWidth;
  62.             var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
  63.             var thePosA=mouseCoords-destX;
  64.             var thePosB=destX-mouseCoords;
  65.             if(mouseCoords>destX){
  66.                 $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
  67.             } else if(mouseCoords<destX){
  68.                 $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
  69.             } else {
  70.                 $thumbScroller_container.stop();  
  71.             }
  72.         }
  73.     });
  74.  
  75.     $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
  76.     $thumbnails_wrapper.hover(
  77.         function(){ //mouse over
  78.             var $this=$(this);
  79.             $this.stop().fadeTo("slow", 1);
  80.         },
  81.         function(){ //mouse out
  82.             var $this=$(this);
  83.             $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
  84.         }
  85.     );
  86.  
  87.     $thumbScroller_thumb.hover(
  88.         function(){ //mouse over
  89.             var $this=$(this);
  90.             $this.stop().fadeTo(fadeSpeed, 1);
  91.         },
  92.         function(){ //mouse out
  93.             var $this=$(this);
  94.             $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
  95.         }
  96.     );
  97.  
  98.     //on window resize scale image and reset thumbnail scroller
  99.     $(window).resize(function() {
  100.         FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
  101.         $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
  102.         var newWidth=$outer_container.width();
  103.         $thumbScroller.css("width",newWidth);
  104.         sliderWidth=newWidth;
  105.         $placement=findPos($the_outer_container);
  106.     });
  107.  
  108.     //load 1st image
  109.     var the1stImg = new Image();
  110.     the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
  111.     the1stImg.src = $bgimg.attr("src");
  112.     $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
  113.     $outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
  114. });
  115.  
  116. function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
  117.     $this.fadeOut("fast",function(){
  118.         $this.attr("src", "").attr("src", imgSrc); //change image source
  119.         FullScreenBackground($this,imageWidth,imageHeight); //scale background image
  120.         $preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
  121.         var imageTitle=$img_title.data("imageTitle");
  122.         if(imageTitle){
  123.             $this.attr("alt", imageTitle).attr("title", imageTitle);
  124.             $img_title.fadeOut("fast",function(){
  125.                 $img_title.html(imageTitle).fadeIn();
  126.             });
  127.         } else {
  128.             $img_title.fadeOut("fast",function(){
  129.                 $img_title.html($this.attr("title")).fadeIn();
  130.             });
  131.         }
  132.     });
  133. }
  134.  
  135. //mouseover toolbar
  136. if($toolbar.css("display")!="none"){
  137.     $toolbar.fadeTo("fast", 0.4);
  138. }
  139. $toolbar.hover(
  140.     function(){ //mouse over
  141.         var $this=$(this);
  142.         $this.stop().fadeTo("fast", 1);
  143.     },
  144.     function(){ //mouse out
  145.         var $this=$(this);
  146.         $this.stop().fadeTo("fast", 0.4);
  147.     }
  148. );
  149.  
  150. //Clicking on thumbnail changes the background image
  151. $("#outer_container .imagelink").click(function(event){
  152.     event.preventDefault();
  153.     var $this=$(this);
  154.     GetNextPrevImages($this);
  155.     GetImageTitle($this);
  156.     SwitchImage(this);
  157.     ShowHideNextPrev("show");
  158.     $parent_link.attr('href', $this.children('img').attr('data-link'));
  159. });
  160.  
  161. //next/prev images buttons
  162. $nextImageBtn.click(function(event){
  163.     event.preventDefault();
  164.     SwitchImage($outer_container.data("nextImage"));
  165.     var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  166.     GetNextPrevImages($this);
  167.     GetImageTitle($this);
  168.     $parent_link.attr('href', $this.children('img').attr('data-link'));
  169.  
  170. });
  171.  
  172. $prevImageBtn.click(function(event){
  173.     event.preventDefault();
  174.     SwitchImage($outer_container.data("prevImage"));
  175.     var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  176.     GetNextPrevImages($this);
  177.     GetImageTitle($this);
  178.         $parent_link.attr('href', $this.children('img').attr('data-link'));
  179.  
  180. });
  181.  
  182. //next/prev images keyboard arrows
  183. if($keyboardNavigation=="on"){
  184. $(document).keydown(function(ev) {
  185.     if(ev.keyCode == 39) { //right arrow
  186.         SwitchImage($outer_container.data("nextImage"));
  187.         var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  188.         GetNextPrevImages($this);
  189.         GetImageTitle($this);
  190.         $parent_link.attr('href', $this.children('img').attr('data-link'));
  191.         return false; // don't execute the default action (scrolling or whatever)
  192.     } else if(ev.keyCode == 37) { //left arrow
  193.         SwitchImage($outer_container.data("prevImage"));
  194.         var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  195.         GetNextPrevImages($this);
  196.         GetImageTitle($this);
  197.         $parent_link.attr('href', $this.children('img').attr('data-link'));
  198.          return false; // don't execute the default action (scrolling or whatever)
  199.     }
  200. });
  201. }
  202.  
  203. function ShowHideNextPrev(state){
  204.     if(state=="hide"){
  205.         $nextImageBtn.fadeOut();
  206.         $prevImageBtn.fadeOut();
  207.     } else {
  208.         $nextImageBtn.fadeIn();
  209.         $prevImageBtn.fadeIn();
  210.     }
  211. }
  212.  
  213. //get image title
  214. function GetImageTitle(elem){
  215.     var title_attr=elem.children("img").attr("title"); //get image title attribute
  216.     $img_title.data("imageTitle", title_attr); //store image title
  217. }
  218.  
  219. //get next/prev images
  220. function GetNextPrevImages(curr){
  221.     var nextImage=curr.parents(".content").next().find("a").attr("href");
  222.     if(nextImage==null){ //if last image, next is first
  223.         var nextImage=$(".content").first().find("a").attr("href");
  224.     }
  225.     $outer_container.data("nextImage",nextImage);
  226.     var prevImage=curr.parents(".content").prev().find("a").attr("href");
  227.     if(prevImage==null){ //if first image, previous is last
  228.         var prevImage=$(".content").last().find("a").attr("href");
  229.     }
  230.     $outer_container.data("prevImage",prevImage);
  231. }
  232.  
  233. //switch image
  234. function SwitchImage(img){
  235.     $preloader.fadeIn("fast"); //show preloader
  236.     var theNewImg = new Image();
  237.     theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
  238.     theNewImg.src = img;
  239. }
  240.  
  241. //get new image dimensions
  242. function CreateDelegate(contextObject, delegateMethod){
  243.     return function(){
  244.         return delegateMethod.apply(contextObject, arguments);
  245.     }
  246. }
  247.  
  248. //new image on load
  249. function theNewImg_onload(){
  250.     $bgimg.data("newImageW",this.width).data("newImageH",this.height);
  251.     BackgroundLoad($bgimg,this.width,this.height,this.src);
  252. }
  253.  
  254. //Image scale function
  255. function FullScreenBackground(theItem,imageWidth,imageHeight){
  256.     var winWidth=$(window).width();
  257.     var winHeight=$(window).height();
  258.     if($toolbar.data("imageViewMode")!="original"){ //scale
  259.         var picHeight = imageHeight / imageWidth;
  260.         var picWidth = imageWidth / imageHeight;
  261.         if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
  262.             if ((winHeight / winWidth) < picHeight) {
  263.                 $(theItem).attr("width",winWidth);
  264.                 $(theItem).attr("height",picHeight*winWidth);
  265.             } else {
  266.                 $(theItem).attr("height",winHeight);
  267.                 $(theItem).attr("width",picWidth*winHeight);
  268.             };
  269.         } else { //normal size image mode
  270.             if ((winHeight / winWidth) > picHeight) {
  271.                 $(theItem).attr("width",winWidth);
  272.                 $(theItem).attr("height",picHeight*winWidth);
  273.             } else {
  274.                 $(theItem).attr("height",winHeight);
  275.                 $(theItem).attr("width",picWidth*winHeight);
  276.             };
  277.         }
  278.         $(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
  279.         $(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
  280.     } else { //no scale
  281.         $(theItem).attr("width",imageWidth);
  282.         $(theItem).attr("height",imageHeight);
  283.         $(theItem).css("margin-left",(winWidth-imageWidth)/2);
  284.         $(theItem).css("margin-top",(winHeight-imageHeight)/2);
  285.     }
  286. }
  287.  
  288. //Image view mode function - fullscreen or normal size
  289. function ImageViewMode(theMode){
  290.     $toolbar.data("imageViewMode", theMode);
  291.     FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
  292.     if(theMode=="full"){
  293.         $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  294.     } else {
  295.         $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  296.     }
  297. }
  298.  
  299. //function to find element Position
  300.     function findPos(obj) {
  301.         var curleft = curtop = 0;
  302.         if (obj.offsetParent) {
  303.             curleft = obj.offsetLeft
  304.             curtop = obj.offsetTop
  305.             while (obj = obj.offsetParent) {
  306.                 curleft += obj.offsetLeft
  307.                 curtop += obj.offsetTop
  308.             }
  309.         }
  310.         return [curtop, curleft];
  311.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement