Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*!
- * NextGEN Slideshow based on jQuery Cycle Plugin
- * Copyright (c) 2010-2012 Alex Rabe
- * Version: 1.0.6
- * Requires: jQuery v1.2.6 or later
- */
- jQuery.fn.nggSlideshow = function ( args ) {
- var defaults = { id: 1,
- width: 320,
- height: 240,
- fx: 'fade',
- domain: '',
- timeout: 5000 };
- var s = jQuery.extend( {}, defaults, args);
- var obj = this.selector;
- var stack = [];
- var desc = []; //MOD: stack for alt text
- var url = s.domain + 'index.php?callback=json&api_key=true&format=json&method=gallery&id=' + s.id;
- /*
- the stackLength var will store stack length for ref - it is quicker to ref memory than make a call to find an obj property
- stack length is first collected in jQuery.getJSON(); stack length is auto-decremented in loadImage() + jCycle_onBefore()
- */
- var stackLength = 0;
- jQuery.getJSON(url, function(r){
- if (r.stat == "ok"){
- for (img in r.images) {
- var photo = r.images[img];
- //populate images into an array
- stack.push( decodeURI( photo['imageURL'] ) );
- desc.push( decodeURI( photo['alttext'] ) ); //MOD: get alttext
- }
- stackLength = stack.length;
- // init loading first 3 images (param 1 in func is first pass)
- loadImage(1);
- }
- });
- // load image and bind appendImage() to the img load - here we are making sure the loads do not get displaced
- function loadImage(num){
- // check that stack is not empty and we haven't alreay loaded 3 images
- if(stackLength > 0 && num <= 3) {
- var img = new Image();
- img.src = stack.shift();
- img.alt = desc.shift(); //MOD: append alt text
- stackLength--;
- // wait to append image until the load is complete
- jQuery( img ).one('load', function() { appendImage(img, num); }).each(function(){
- // IE browser : in case it's already cached
- if(this.complete) jQuery(this).trigger('load');
- });
- }
- }
- // append image to obj
- function appendImage(img, num){
- // Hide them first, Cycle plugin will show them
- jQuery( img ).hide();
- // Add the image now and resize after loaded
- jQuery( obj ).append( imageResize(img, s.width , s.height) );
- // start slideshow with third image, load next image if not
- if (num == 3 || stackLength == 0 ) {
- startSlideshow();
- } else {
- loadImage(++num); // increase index and load next image
- }
- }
- function startSlideshow() {
- jQuery( 'div#ngg-js-slideshow-caption' ).text( obj.alt ); //MOD: (init) sets alt text to desired object
- // hide the loader icon
- jQuery( obj + '-loader' ).empty().remove();
- // Start the slideshow
- jQuery(obj + ' img:first').fadeIn(1000, function() {
- // Start the cycle plugin
- jQuery( obj ).cycle( {
- fx: s.fx,
- containerResize: 1,
- fit: 1,
- timeout: s.timeout,
- next: obj,
- before: jCycle_onBefore
- });
- });
- }
- //Resize Image and keep ratio on client side, better move to server side later
- function imageResize(img, maxWidth , maxHeight) {
- // we need to wait until the image is loaded
- if ( !img.complete )
- jQuery( img ).bind('load', function() { imageResize(img, maxWidth , maxHeight) });
- // in some cases the image is not loaded, we can't resize them
- if (img.height == 0 || img.width == 0)
- return img;
- var width, height;
- if (img.width * maxHeight > img.height * maxWidth) {
- // img has a wider ratio than target size, make width fit
- if (img.width > maxWidth) {
- width = maxWidth;
- height = Math.round(img.height / img.width * maxWidth);
- }
- } else {
- // img has a less wide ratio than target size, make height fit
- if (img.height > maxHeight) {
- height = maxHeight;
- width = Math.round(img.width / img.height * maxHeight);
- }
- }
- jQuery( img ).css({
- 'height': height,
- 'width': width
- });
- return img;
- };
- // add images to slideshow step by step
- function jCycle_onBefore(curr, next, opts) {
- if (opts.addSlide)
- if (stackLength > 0){ // check that stack is not empty
- var img = new Image();
- img.src = stack.shift();
- stackLength--;
- jQuery( img ).bind('load', function() {
- opts.addSlide( imageResize(this, s.width , s.height) );
- });
- }
- jQuery( 'div#ngg-js-slideshow-caption' ).text( next.alt ); //MOD: (cycle) sets alt text to desired object
- };
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement