/* Supersized - Fullscreen Slideshow jQuery Plugin Version 3.0 By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) Version: supersized.3.0.js Website: www.buildinternet.com/project/supersized */ (function($){ //Resize image on ready or resize $.fn.supersized = function() { $.inAnimation = false; $.paused = false; var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options); $.currentSlide = options.start_slide - 1; /******Set up initial images -- Add class doesnt work*****/ //Set previous image var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : ""; $("").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("");//Doesnt account for start slide //Set current image imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : ""; $("").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap(""); //Set next image imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : ""; $("").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap(""); $(window).bind("load", function(){ $('#loading').hide(); $('#supersized').fadeIn('fast'); $('#controls-wrapper').show(); if (options.thumbnail_navigation == 1){ /*****Set up thumbnails****/ //Load previous thumbnail $.currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1; $('#prevthumb').show().html($("").attr("src", options.slides[prevThumb].image)); //Load next thumbnail $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1; $('#nextthumb').show().html($("").attr("src", options.slides[nextThumb].image)); } $('#supersized').resizenow(); if (options.slide_captions == 1) $('#slidecaption').html(options.slides[$.currentSlide].title);//*********Pull caption from array if (options.navigation == 0) $('#navigation').hide(); if (options.thumbnail_navigation == 0){ $('#nextthumb').hide(); $('#prevthumb').hide(); } //Slideshow if (options.slideshow == 1){ if (options.slide_counter == 1){ //Initiate slide counter if active $('#slidecounter .slidenumber').html(options.start_slide); $('#slidecounter .totalslides').html(options.slides.length); //*******Pull total from length of array } slideshow_interval = setInterval(nextslide, options.slide_interval); if (options.thumbnail_navigation == 1){ //Thumbnail Navigation $('#nextthumb').click(function() { if($.inAnimation) return false; clearInterval(slideshow_interval); nextslide(); if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval); return false; }); $('#prevthumb').click(function() { if($.inAnimation) return false; clearInterval(slideshow_interval); prevslide(); if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval); return false; }); } if (options.navigation == 1){ //Skip if no navigation $('#navigation a').click(function(){ $(this).blur(); return false; }); //Slide Navigation $('#nextslide').click(function() { if($.inAnimation) return false; clearInterval(slideshow_interval); nextslide(); if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval); return false; }); $('#prevslide').click(function() { if($.inAnimation) return false; clearInterval(slideshow_interval); prevslide(); if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval); return false; }); $('#nextslide').mousedown(function() { $(this).attr("src", "images/forward.png"); }); $('#nextslide').mouseup(function() { $(this).attr("src", "images/forward_dull.png"); }); $('#nextslide').mouseout(function() { $(this).attr("src", "images/forward_dull.png"); }); $('#prevslide').mousedown(function() { $(this).attr("src", "images/back.png"); }); $('#prevslide').mouseup(function() { $(this).attr("src", "images/back_dull.png"); }); $('#prevslide').mouseout(function() { $(this).attr("src", "images/back_dull.png"); }); //Play/Pause Button $('#pauseplay').click(function() { if($.inAnimation) return false; var src = ($(this).attr("src") === "images/play.png") ? "images/pause.png" : "images/play.png"; if (src == "images/pause.png"){ $(this).attr("src", "images/play.png"); $.paused = false; slideshow_interval = setInterval(nextslide, options.slide_interval); }else{ $(this).attr("src", "images/pause.png"); clearInterval(slideshow_interval); $.paused = true; } $(this).attr("src", src); return false; }); $('#pauseplay').mouseover(function() { var imagecheck = ($(this).attr("src") === "images/play_dull.png"); if (imagecheck){ $(this).attr("src", "images/play.png"); }else{ $(this).attr("src", "images/pause.png"); } }); $('#pauseplay').mouseout(function() { var imagecheck = ($(this).attr("src") === "images/play.png"); if (imagecheck){ $(this).attr("src", "images/play_dull.png"); }else{ $(this).attr("src", "images/pause_dull.png"); } return false; }); } } }); $(document).ready(function() { $('#supersized').resizenow(); }); //Pause when hover on image $('#supersized').hover(function() { if (options.slideshow == 1 && options.pause_hover == 1){ if(!($.paused) && options.navigation == 1){ $('#pauseplay').attr("src", "images/pause.png"); clearInterval(slideshow_interval); } } if($.inAnimation) return false; //*******Pull title from array }, function() { if (options.slideshow == 1 && options.pause_hover == 1){ if(!($.paused) && options.navigation == 1){ $('#pauseplay').attr("src", "images/pause_dull.png"); slideshow_interval = setInterval(nextslide, options.slide_interval); } } //*******Pull title from array }); $(window).bind("resize", function(){ $('#supersized').resizenow(); }); $('#supersized').hide(); $('#controls-wrapper').hide(); }; //Adjust image size $.fn.resizenow = function() { var t = $(this); var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options); return t.each(function() { //Define image ratio var ratio = options.startheight/options.startwidth; //Gather browser and current image size var imagewidth = t.width(); var imageheight = t.height(); var browserwidth = $(window).width(); var browserheight = $(window).height(); var offset; //Resize image to proper ratio if ((browserheight/browserwidth) > ratio){ t.height(browserheight); t.width(browserheight / ratio); t.children().height(browserheight); t.children().width(browserheight / ratio); } else { t.width(browserwidth); t.height(browserwidth * ratio); t.children().width(browserwidth); t.children().height(browserwidth * ratio); } if (options.vertical_center == 1){ t.children().css('left', (browserwidth - t.width())/2); t.children().css('top', (browserheight - t.height())/2); } return false; }); }; //Slideshow Next Slide function nextslide() { if($.inAnimation) return false; else $.inAnimation = true; var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options); var currentslide = $('#supersized .activeslide'); currentslide.removeClass('activeslide'); if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array? var nextslide = currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array var prevslide = nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array $('.prevslide').removeClass('prevslide'); prevslide.addClass('prevslide'); //Get the slide number of new slide $.currentSlide + 1 == options.slides.length ? $.currentSlide = 0 : $.currentSlide++; /**** Image Loading ****/ //Load next image loadSlide=false; $.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1; imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; $("").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap(""); if (options.thumbnail_navigation == 1){ //Load previous thumbnail $.currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1; $('#prevthumb').html($("").attr("src", options.slides[prevThumb].image)); //Load next thumbnail nextThumb = loadSlide; $('#nextthumb').html($("").attr("src", options.slides[nextThumb].image)); } currentslide.prev().remove(); //Remove Old Image /**** End Image Loading ****/ //Display slide counter if (options.slide_counter == 1){ $('#slidecounter .slidenumber').html($.currentSlide + 1);//**display current slide after checking if last } //Captions if (options.slide_captions == 1){ (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array } nextslide.hide().addClass('activeslide') if (options.transition == 0){ nextslide.show(); $.inAnimation = false; } if (options.transition == 1){ nextslide.fadeIn(750, function(){$.inAnimation = false;}); } if (options.transition == 2){ nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 3){ nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 4){ nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 5){ nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;}); } $('#supersized').resizenow(); } //Slideshow Previous Slide function prevslide() { if($.inAnimation) return false; else $.inAnimation = true; var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options); var currentslide = $('#supersized .activeslide'); currentslide.removeClass('activeslide'); if ( currentslide.length == 0 ) currentslide = $('#supersized a:first'); var nextslide = currentslide.prev().length ? currentslide.prev() : $('#supersized a:last'); //****** If equal to total length of array var prevslide = nextslide.next().length ? nextslide.next() : $('#supersized a:first'); //Get current slide number $.currentSlide == 0 ? $.currentSlide = options.slides.length - 1 : $.currentSlide-- ; /**** Image Loading ****/ //Load next image loadSlide=false; $.currentSlide - 1 < 0 ? loadSlide = options.slides.length - 1 : loadSlide = $.currentSlide - 1; imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; $("").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap(""); if (options.thumbnail_navigation == 1){ //Load previous thumbnail prevThumb = loadSlide; $('#prevthumb').html($("").attr("src", options.slides[prevThumb].image)); //Load next thumbnail $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1; $('#nextthumb').html($("").attr("src", options.slides[nextThumb].image)); } currentslide.next().remove(); //Remove Old Image /**** End Image Loading ****/ //Display slide counter if (options.slide_counter == 1){ $('#slidecounter .slidenumber').html($.currentSlide + 1); } $('.prevslide').removeClass('prevslide'); prevslide.addClass('prevslide'); //Captions if (options.slide_captions == 1){ (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array } nextslide.hide().addClass('activeslide') if (options.transition == 0){ nextslide.show(); $.inAnimation = false; } if (options.transition == 1){ nextslide.fadeIn(750, function(){$.inAnimation = false;}); } if (options.transition == 2){ nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 3){ nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 4){ nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;}); } if (options.transition == 5){ nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;}); } $('#supersized').resizenow();//Fix for resize mid-transition } $.fn.supersized.defaults = { startwidth: 4, startheight: 3, vertical_center: 1, slideshow: 1, navigation:1, thumbnail_navigation: 0, transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left pause_hover: 0, slide_counter: 1, slide_captions: 1, slide_interval: 5000, start_slide: 1 }; })(jQuery);