Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

ngg.slideshow.min.js

By: a guest on Oct 16th, 2012  |  syntax: JavaScript  |  size: 4.96 KB  |  views: 186  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*!
  2.  * NextGEN Slideshow based on jQuery Cycle Plugin
  3.  * Copyright (c) 2010-2012 Alex Rabe
  4.  * Version: 1.0.6
  5.  * Requires: jQuery v1.2.6 or later
  6.  */
  7. jQuery.fn.nggSlideshow = function ( args ) {
  8.    
  9.     var defaults = { id:    1,
  10.                      width: 320,
  11.                      height: 240,
  12.                      fx:        'fade',
  13.                      domain: '',
  14.                      timeout: 5000 };
  15.                      
  16.     var s = jQuery.extend( {}, defaults, args);
  17.    
  18.     var obj = this.selector;
  19.     var stack = [];
  20.         var desc = []; //MOD: stack for alt text
  21.     var url = s.domain + 'index.php?callback=json&api_key=true&format=json&method=gallery&id=' + s.id;
  22.         /*  
  23.                 the stackLength var will store stack length for ref - it is quicker to ref memory than make a call to find an obj property
  24.                 stack length is first collected in jQuery.getJSON(); stack length is auto-decremented in loadImage() + jCycle_onBefore()
  25.         */
  26.         var stackLength = 0;
  27.  
  28.         jQuery.getJSON(url, function(r){
  29.                
  30.                 if (r.stat == "ok"){
  31.            
  32.             for (img in r.images) {
  33.                                 var photo = r.images[img];
  34.                 //populate images into an array
  35.                 stack.push( decodeURI( photo['imageURL'] ) );
  36.                                 desc.push( decodeURI( photo['alttext'] ) ); //MOD: get alttext
  37.             }
  38.                         stackLength = stack.length;
  39.                         // init loading first 3 images (param 1 in func is first pass)
  40.                         loadImage(1);
  41.                 }
  42.         });
  43.        
  44.         // load image and bind appendImage() to the img load - here we are making sure the loads do not get displaced
  45.         function loadImage(num){
  46.          // check that stack is not empty and we haven't alreay loaded 3 images    
  47.          if(stackLength > 0 && num <= 3) {
  48.             var img = new Image();
  49.             img.src = stack.shift();
  50.                         img.alt = desc.shift(); //MOD: append alt text
  51.                         stackLength--;
  52.                         // wait to append image until the load is complete
  53.                 jQuery( img ).one('load', function() { appendImage(img, num); }).each(function(){
  54.                         // IE browser : in case it's already cached
  55.                         if(this.complete) jQuery(this).trigger('load');
  56.                 });
  57.          }
  58.         }
  59.        
  60.         // append image to obj
  61.         function appendImage(img, num){
  62.              // Hide them first, Cycle plugin will show them
  63.          jQuery( img ).hide();           
  64.          // Add the image now and resize after loaded
  65.                  jQuery( obj ).append( imageResize(img, s.width , s.height) );
  66.          // start slideshow with third image, load next image if not
  67.                  if (num == 3 || stackLength == 0 ) {
  68.                 startSlideshow();
  69.                  } else {
  70.                         loadImage(++num); // increase index and load next image
  71.          }
  72.                  
  73.         }
  74.  
  75.     function startSlideshow() {
  76.                
  77.                
  78.                 jQuery( 'div#ngg-js-slideshow-caption' ).text( obj.alt ); //MOD: (init) sets alt text to desired object
  79.  
  80.         // hide the loader icon
  81.         jQuery( obj + '-loader' ).empty().remove();
  82.         // Start the slideshow
  83.         jQuery(obj + ' img:first').fadeIn(1000, function() {
  84.             // Start the cycle plugin
  85.                        
  86.                 jQuery( obj ).cycle( {
  87.                         fx:     s.fx,
  88.                 containerResize: 1,
  89.                 fit: 1,
  90.                 timeout: s.timeout,
  91.                 next:   obj,
  92.                 before: jCycle_onBefore
  93.                 });
  94.                        
  95.         });
  96.        
  97.     }
  98.  
  99.     //Resize Image and keep ratio on client side, better move to server side later
  100.     function imageResize(img, maxWidth , maxHeight) {
  101.  
  102.         // we need to wait until the image is loaded
  103.         if ( !img.complete )
  104.             jQuery( img ).bind('load', function() { imageResize(img, maxWidth , maxHeight) });
  105.  
  106.         // in some cases the image is not loaded, we can't resize them
  107.         if (img.height == 0 || img.width == 0)
  108.             return img;
  109.  
  110.         var width, height;
  111.  
  112.         if (img.width * maxHeight > img.height * maxWidth) {
  113.             // img has a wider ratio than target size, make width fit
  114.                 if (img.width > maxWidth) {
  115.                         width = maxWidth;
  116.                         height = Math.round(img.height / img.width * maxWidth);
  117.                 }
  118.         } else {
  119.             // img has a less wide ratio than target size, make height fit
  120.                 if (img.height > maxHeight) {
  121.                         height = maxHeight;
  122.                         width = Math.round(img.width / img.height * maxHeight);
  123.                 }
  124.         }
  125.  
  126.         jQuery( img ).css({
  127.           'height': height,
  128.           'width': width
  129.         });
  130.                
  131.         return img;
  132.         };
  133.  
  134.     // add images to slideshow step by step
  135.     function jCycle_onBefore(curr, next, opts) {
  136.         if (opts.addSlide)
  137.             if (stackLength > 0){ // check that stack is not empty
  138.                 var img = new Image();
  139.                 img.src = stack.shift();
  140.                                 stackLength--;
  141.                 jQuery( img ).bind('load', function() {
  142.                     opts.addSlide( imageResize(this, s.width , s.height) );                    
  143.                 });
  144.             }
  145.                 jQuery( 'div#ngg-js-slideshow-caption' ).text( next.alt ); //MOD: (cycle) sets alt text to desired object
  146.     };
  147. }