supersized.3.0.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. /*
  2. Supersized - Fullscreen Slideshow jQuery Plugin
  3. Version 3.0
  4. By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
  5. Version: supersized.3.0.js
  6. Website: www.buildinternet.com/project/supersized
  7. */
  8. (function($){
  9. //Resize image on ready or resize
  10. $.fn.supersized = function() {
  11. $.inAnimation = false;
  12. $.paused = false;
  13. var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
  14. $.currentSlide = options.start_slide - 1;
  15. /******Set up initial images -- Add class doesnt work*****/
  16. //Set previous image
  17. var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
  18. $("<img/>").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");//Doesnt account for start slide
  19. //Set current image
  20. imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : "";
  21. $("<img/>").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap("<a class=\"activeslide\" " + imageLink + "></a>");
  22. //Set next image
  23. imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : "";
  24. $("<img/>").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
  25. $(window).bind("load", function(){
  26. $('#loading').hide();
  27. $('#supersized').fadeIn('fast');
  28. $('#controls-wrapper').show();
  29. if (options.thumbnail_navigation == 1){
  30. /*****Set up thumbnails****/
  31. //Load previous thumbnail
  32. $.currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
  33. $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));
  34. //Load next thumbnail
  35. $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
  36. $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));
  37. }
  38. $('#supersized').resizenow();
  39. if (options.slide_captions == 1) $('#slidecaption').html(options.slides[$.currentSlide].title);//*********Pull caption from array
  40. if (options.navigation == 0) $('#navigation').hide();
  41. if (options.thumbnail_navigation == 0){ $('#nextthumb').hide(); $('#prevthumb').hide(); }
  42. //Slideshow
  43. if (options.slideshow == 1){
  44. if (options.slide_counter == 1){ //Initiate slide counter if active
  45. $('#slidecounter .slidenumber').html(options.start_slide);
  46. $('#slidecounter .totalslides').html(options.slides.length); //*******Pull total from length of array
  47. }
  48. slideshow_interval = setInterval(nextslide, options.slide_interval);
  49. if (options.thumbnail_navigation == 1){
  50. //Thumbnail Navigation
  51. $('#nextthumb').click(function() {
  52. if($.inAnimation) return false;
  53. clearInterval(slideshow_interval);
  54. nextslide();
  55. if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
  56. return false;
  57. });
  58. $('#prevthumb').click(function() {
  59. if($.inAnimation) return false;
  60. clearInterval(slideshow_interval);
  61. prevslide();
  62. if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
  63. return false;
  64. });
  65. }
  66. if (options.navigation == 1){ //Skip if no navigation
  67. $('#navigation a').click(function(){
  68. $(this).blur();
  69. return false;
  70. });
  71. //Slide Navigation
  72. $('#nextslide').click(function() {
  73. if($.inAnimation) return false;
  74. clearInterval(slideshow_interval);
  75. nextslide();
  76. if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
  77. return false;
  78. });
  79. $('#prevslide').click(function() {
  80. if($.inAnimation) return false;
  81. clearInterval(slideshow_interval);
  82. prevslide();
  83. if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
  84. return false;
  85. });
  86. $('#nextslide').mousedown(function() {
  87. $(this).attr("src", "images/forward.png");
  88. });
  89. $('#nextslide').mouseup(function() {
  90. $(this).attr("src", "images/forward_dull.png");
  91. });
  92. $('#nextslide').mouseout(function() {
  93. $(this).attr("src", "images/forward_dull.png");
  94. });
  95. $('#prevslide').mousedown(function() {
  96. $(this).attr("src", "images/back.png");
  97. });
  98. $('#prevslide').mouseup(function() {
  99. $(this).attr("src", "images/back_dull.png");
  100. });
  101. $('#prevslide').mouseout(function() {
  102. $(this).attr("src", "images/back_dull.png");
  103. });
  104. //Play/Pause Button
  105. $('#pauseplay').click(function() {
  106. if($.inAnimation) return false;
  107. var src = ($(this).attr("src") === "images/play.png") ? "images/pause.png" : "images/play.png";
  108. if (src == "images/pause.png"){
  109. $(this).attr("src", "images/play.png");
  110. $.paused = false;
  111. slideshow_interval = setInterval(nextslide, options.slide_interval);
  112. }else{
  113. $(this).attr("src", "images/pause.png");
  114. clearInterval(slideshow_interval);
  115. $.paused = true;
  116. }
  117. $(this).attr("src", src);
  118. return false;
  119. });
  120. $('#pauseplay').mouseover(function() {
  121. var imagecheck = ($(this).attr("src") === "images/play_dull.png");
  122. if (imagecheck){
  123. $(this).attr("src", "images/play.png");
  124. }else{
  125. $(this).attr("src", "images/pause.png");
  126. }
  127. });
  128. $('#pauseplay').mouseout(function() {
  129. var imagecheck = ($(this).attr("src") === "images/play.png");
  130. if (imagecheck){
  131. $(this).attr("src", "images/play_dull.png");
  132. }else{
  133. $(this).attr("src", "images/pause_dull.png");
  134. }
  135. return false;
  136. });
  137. }
  138. }
  139. });
  140. $(document).ready(function() {
  141. $('#supersized').resizenow();
  142. });
  143. //Pause when hover on image
  144. $('#supersized').hover(function() {
  145. if (options.slideshow == 1 && options.pause_hover == 1){
  146. if(!($.paused) && options.navigation == 1){
  147. $('#pauseplay').attr("src", "images/pause.png");
  148. clearInterval(slideshow_interval);
  149. }
  150. }
  151. if($.inAnimation) return false; //*******Pull title from array
  152. }, function() {
  153. if (options.slideshow == 1 && options.pause_hover == 1){
  154. if(!($.paused) && options.navigation == 1){
  155. $('#pauseplay').attr("src", "images/pause_dull.png");
  156. slideshow_interval = setInterval(nextslide, options.slide_interval);
  157. }
  158. }
  159. //*******Pull title from array
  160. });
  161. $(window).bind("resize", function(){
  162. $('#supersized').resizenow();
  163. });
  164. $('#supersized').hide();
  165. $('#controls-wrapper').hide();
  166. };
  167. //Adjust image size
  168. $.fn.resizenow = function() {
  169. var t = $(this);
  170. var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
  171. return t.each(function() {
  172. //Define image ratio
  173. var ratio = options.startheight/options.startwidth;
  174. //Gather browser and current image size
  175. var imagewidth = t.width();
  176. var imageheight = t.height();
  177. var browserwidth = $(window).width();
  178. var browserheight = $(window).height();
  179. var offset;
  180. //Resize image to proper ratio
  181. if ((browserheight/browserwidth) > ratio){
  182. t.height(browserheight);
  183. t.width(browserheight / ratio);
  184. t.children().height(browserheight);
  185. t.children().width(browserheight / ratio);
  186. } else {
  187. t.width(browserwidth);
  188. t.height(browserwidth * ratio);
  189. t.children().width(browserwidth);
  190. t.children().height(browserwidth * ratio);
  191. }
  192. if (options.vertical_center == 1){
  193. t.children().css('left', (browserwidth - t.width())/2);
  194. t.children().css('top', (browserheight - t.height())/2);
  195. }
  196. return false;
  197. });
  198. };
  199. //Slideshow Next Slide
  200. function nextslide() {
  201. if($.inAnimation) return false;
  202. else $.inAnimation = true;
  203. var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
  204. var currentslide = $('#supersized .activeslide');
  205. currentslide.removeClass('activeslide');
  206. if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array?
  207. var nextslide = currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array
  208. var prevslide = nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array
  209. $('.prevslide').removeClass('prevslide');
  210. prevslide.addClass('prevslide');
  211. //Get the slide number of new slide
  212. $.currentSlide + 1 == options.slides.length ? $.currentSlide = 0 : $.currentSlide++;
  213. /**** Image Loading ****/
  214. //Load next image
  215. loadSlide=false;
  216. $.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1;
  217. imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
  218. $("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
  219. if (options.thumbnail_navigation == 1){
  220. //Load previous thumbnail
  221. $.currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
  222. $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
  223. //Load next thumbnail
  224. nextThumb = loadSlide;
  225. $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
  226. }
  227. currentslide.prev().remove(); //Remove Old Image
  228. /**** End Image Loading ****/
  229. //Display slide counter
  230. if (options.slide_counter == 1){
  231. $('#slidecounter .slidenumber').html($.currentSlide + 1);//**display current slide after checking if last
  232. }
  233. //Captions
  234. if (options.slide_captions == 1){
  235. (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
  236. }
  237. nextslide.hide().addClass('activeslide')
  238. if (options.transition == 0){
  239. nextslide.show(); $.inAnimation = false;
  240. }
  241. if (options.transition == 1){
  242. nextslide.fadeIn(750, function(){$.inAnimation = false;});
  243. }
  244. if (options.transition == 2){
  245. nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
  246. }
  247. if (options.transition == 3){
  248. nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
  249. }
  250. if (options.transition == 4){
  251. nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
  252. }
  253. if (options.transition == 5){
  254. nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
  255. }
  256. $('#supersized').resizenow();
  257. }
  258. //Slideshow Previous Slide
  259. function prevslide() {
  260. if($.inAnimation) return false;
  261. else $.inAnimation = true;
  262. var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
  263. var currentslide = $('#supersized .activeslide');
  264. currentslide.removeClass('activeslide');
  265. if ( currentslide.length == 0 ) currentslide = $('#supersized a:first');
  266. var nextslide = currentslide.prev().length ? currentslide.prev() : $('#supersized a:last'); //****** If equal to total length of array
  267. var prevslide = nextslide.next().length ? nextslide.next() : $('#supersized a:first');
  268. //Get current slide number
  269. $.currentSlide == 0 ? $.currentSlide = options.slides.length - 1 : $.currentSlide-- ;
  270. /**** Image Loading ****/
  271. //Load next image
  272. loadSlide=false;
  273. $.currentSlide - 1 < 0 ? loadSlide = options.slides.length - 1 : loadSlide = $.currentSlide - 1;
  274. imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
  275. $("<img/>").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap("<a " + imageLink + "></a>");
  276. if (options.thumbnail_navigation == 1){
  277. //Load previous thumbnail
  278. prevThumb = loadSlide;
  279. $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
  280. //Load next thumbnail
  281. $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
  282. $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
  283. }
  284. currentslide.next().remove(); //Remove Old Image
  285. /**** End Image Loading ****/
  286. //Display slide counter
  287. if (options.slide_counter == 1){
  288. $('#slidecounter .slidenumber').html($.currentSlide + 1);
  289. }
  290. $('.prevslide').removeClass('prevslide');
  291. prevslide.addClass('prevslide');
  292. //Captions
  293. if (options.slide_captions == 1){
  294. (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
  295. }
  296. nextslide.hide().addClass('activeslide')
  297. if (options.transition == 0){
  298. nextslide.show(); $.inAnimation = false;
  299. }
  300. if (options.transition == 1){
  301. nextslide.fadeIn(750, function(){$.inAnimation = false;});
  302. }
  303. if (options.transition == 2){
  304. nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
  305. }
  306. if (options.transition == 3){
  307. nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
  308. }
  309. if (options.transition == 4){
  310. nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
  311. }
  312. if (options.transition == 5){
  313. nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
  314. }
  315. $('#supersized').resizenow();//Fix for resize mid-transition
  316. }
  317. $.fn.supersized.defaults = {
  318. startwidth: 4,
  319. startheight: 3,
  320. vertical_center: 1,
  321. slideshow: 1,
  322. navigation:1,
  323. thumbnail_navigation: 0,
  324. transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
  325. pause_hover: 0,
  326. slide_counter: 1,
  327. slide_captions: 1,
  328. slide_interval: 5000,
  329. start_slide: 1
  330. };
  331. })(jQuery);