daily pastebin goal
58%
SHARE
TWEET

Malihu Jquery Gallery Mod

disinfor Jul 24th, 2013 415 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
  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.         }
RAW Paste Data
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
 
Top