Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2014
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.84 KB | None | 0 0
  1. /*
  2. * Author: Marco Kuiper (http://www.marcofolio.net/)
  3. * Sylvain Papet (http://www.com-ocean.com/)
  4. * Toxic Web (http://www.toxic-web.co.uk/) - v1.0.1
  5. */
  6.  
  7. (function($) {
  8.  
  9.  
  10.  
  11. $.bgimgSlideshow = {version: '1.0.1'};
  12. $.fn.bgimgSlideshow = function(options) {
  13. options = jQuery.extend({
  14. slideshowSpeed: slideshowSpeed,
  15. method : slideEffect, /* slide or fade, default is fade */
  16. fadeSpeed :1600, /* how quickly one image fades/slides into the next */
  17.  
  18. photos : [],
  19.  
  20. },options);
  21.  
  22. var interval;
  23. var activeContainer = 1;
  24. var currentImg = 0;
  25. var started = false;
  26. var animating = false;
  27. var currentZindex = -1;
  28.  
  29.  
  30.  
  31. var image_cache = [];
  32.  
  33.  
  34. $.bgimgSlideshow.preLoadImage = function() {
  35. var args_len = arguments.length;
  36. for (var i = args_len; i--;) {
  37. var cacheImage = document.createElement('img');
  38. cacheImage.src = arguments[i];
  39. image_cache.push(cacheImage);
  40. }
  41. }
  42.  
  43. $.bgimgSlideshow.preLoadPhotoObjects = function(photoObjects) {
  44. for(i in photoObjects)
  45. {
  46. $.bgimgSlideshow.preLoadImage(photoObjects[i].image, photoObjects[i].image);
  47. }
  48. }
  49.  
  50. $.bgimgSlideshow.initialize = function() {
  51. $.bgimgSlideshow.preLoadPhotoObjects(options.photos);
  52.  
  53. // Backwards navigation
  54. $("#back").click(function() {
  55. $.bgimgSlideshow.stopSlideshow();
  56. $.bgimgSlideshow.navigate("back");
  57. });
  58.  
  59. // Forward navigation
  60. $("#next").click(function() {
  61. $.bgimgSlideshow.stopSlideshow();
  62. $.bgimgSlideshow.navigate("next");
  63. });
  64.  
  65. $("#control").click(function(){
  66. if(started)
  67. {
  68. $.bgimgSlideshow.stopSlideshow();
  69. }
  70. else
  71. {
  72. $.bgimgSlideshow.startSlideshow();
  73. }
  74. });
  75. $.bgimgSlideshow.startSlideshow();
  76. };
  77.  
  78. $.bgimgSlideshow.navigate = function(direction) {
  79. // Check if no animation is running. If it is, prevent the action
  80. if(animating) {
  81. return;
  82. }
  83. // Check which current image we need to show
  84. if(direction == "next") {
  85. currentImg++;
  86. if(currentImg == options.photos.length + 1) {
  87. currentImg = 1;
  88. }
  89. } else {
  90. currentImg--;
  91. if(currentImg == 0) {
  92. currentImg = options.photos.length;
  93. }
  94. }
  95.  
  96. // Check which container we need to use
  97. var currentContainer = activeContainer;
  98. if(activeContainer == 1) {
  99. activeContainer = 2;
  100. } else {
  101. activeContainer = 1;
  102. }
  103.  
  104. $.bgimgSlideshow.showImage((currentImg - 1), currentContainer, activeContainer);
  105. };
  106.  
  107. $.bgimgSlideshow.showImage = function(numImg, currentContainer, activeContainer) {
  108. var photoObject = options.photos[numImg];
  109. animating = true;
  110.  
  111. // Make sure the new container is always on the background
  112. currentZindex--;
  113.  
  114. // Set the background image of the new active container
  115. $("#headerimg" + activeContainer).css({
  116. "background-image" : "url(" + photoObject.image + ")",
  117. "display" : "block",
  118. "z-index" : currentZindex,
  119. "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + photoObject.image + ", sizingMethod='scale')",
  120. "-ms-filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + photoObject.image + ", sizingMethod='scale')"
  121. });
  122.  
  123. // Hide the header text
  124.  
  125.  
  126. // Set the new header text
  127. $("#firstline").html(photoObject.firstline);
  128. $("#secondline")
  129. .attr("href", photoObject.url)
  130. .html(photoObject.secondline);
  131. $("#link")
  132. .attr("href", photoObject.url)
  133. .html(photoObject.link);
  134.  
  135. // Fade out the current container
  136. // and display the header text when animation is complete
  137.  
  138. if(options.method == "slide"){
  139. $("#headerimg" + currentContainer).animate({width: 'toggle'},options.fadeSpeed,function() {
  140. $("#headertxt").css({"display" : "block"});
  141. animating = false;
  142. });
  143. }
  144. if(options.method == "slideup"){
  145. $("#headerimg" + currentContainer).animate({height: 'toggle'},options.fadeSpeed,function() {
  146. $("#headertxt").css({"display" : "block"});
  147. animating = false;
  148. });
  149. }
  150. if(options.method == "swing"){
  151. $("#headerimg" + currentContainer).animate({height: 'toggle', width: 'toggle'},options.fadeSpeed,function() {
  152. $("#headertxt").css({"display" : "block"});
  153. animating = false;
  154. });
  155. }
  156. if(options.method == "none"){
  157. $("#headerimg" + currentContainer).fadeOut(0,function() {
  158. $("#headertxt").css({"display" : "block"});
  159. animating = false;
  160. });
  161. }
  162. if(options.method == "fade"){
  163. $("#headerimg" + currentContainer).fadeOut(options.fadeSpeed,function() {
  164. $("#headertxt").css({"display" : "block"});
  165. animating = false;
  166. });
  167. }
  168. else{
  169. $("#headerimg" + currentContainer).fadeOut(options.fadeSpeed,function() {
  170. $("#headertxt").css({"display" : "block"});
  171. animating = false;
  172. });
  173. }
  174. };
  175.  
  176.  
  177. var fullscreen = true;
  178.  
  179. $.bgimgSlideshow.stopSlideshow = function() {
  180.  
  181. // Change the background image to "play"
  182. $("#control").css({ "background-image" : "url(images/play.png)" });
  183. // Clear the interval
  184. clearInterval(interval);
  185. started = false;
  186. };
  187.  
  188. $.bgimgSlideshow.startSlideshow = function() {
  189. $("#control").css({ "background-image" : "url(images/pause.png)" });
  190. $.bgimgSlideshow.navigate("next");
  191. interval = setInterval(function() { $.bgimgSlideshow.navigate("next"); }, options.slideshowSpeed);
  192. started = true;
  193. };
  194.  
  195.  
  196.  
  197. $.bgimgSlideshow.initialize();
  198.  
  199.  
  200.  
  201.  
  202.  
  203. $("#headertxt").addClass("headertxt");
  204.  
  205.  
  206. $("#fullscreen").css({ "background-image" : "url(images/fullscreen.png)" });
  207.  
  208.  
  209. $("#fullscreen").click(function(){
  210. if(fullscreen)
  211. {
  212. $.bgimgSlideshow.fullScreen();
  213. }
  214. else
  215. {
  216. $.bgimgSlideshow.fullScreenExit();
  217. }
  218. });
  219.  
  220. $.bgimgSlideshow.fullScreen = function() {
  221.  
  222.  
  223.  
  224. showdesc = function() {
  225. $("#header-wrap").css("display","none" );
  226. $("#footer-area").css("display","none" );
  227. $("#primary").css("display","none" );
  228. $("#firstline, #secondline, #link").css("float","right" );
  229. $("#headertxt").animate( { opacity: 1} , 800 );
  230. $("#headertxt").removeClass("headertxt").addClass("headertxt_fscreen");
  231. }
  232. $("#headertxt").animate( { opacity: 0} , 300 );
  233. $("#header-wrap").delay(300).animate( { opacity: 0, "margin-top":"-200"} , 300);
  234. $("#footer-area").delay(300).animate( { opacity: 0, "bottom":"-500"} , 300 );
  235. $("#primary").delay(300).animate( { opacity: 0, "bottom":"-1000"} , 300 );
  236.  
  237. setTimeout(showdesc, 1000);
  238. fullscreen = false;
  239. $("#fullscreen").css({ "background-image" : "url(images/fullscreen-exit.png)" });
  240. };
  241.  
  242. $.bgimgSlideshow.fullScreenExit = function() {
  243.  
  244.  
  245.  
  246. hideshowdesc = function() {
  247. $("#header-wrap").css("display","inherit" );
  248. $("#footer-area").css("display","inherit" );
  249. $("#primary").css("display","inherit" );
  250. $("#firstline, #secondline, #link").css("float","left" );
  251. $("#headertxt").animate( { opacity: 1});
  252. $("#headertxt").removeClass("headertxt_fscreen").addClass("headertxt");
  253. }
  254.  
  255. $("#headertxt").animate( { opacity: 1} , 300 );
  256. $("#header-wrap").animate( { opacity: 1, "margin-top":"0"} , 300);
  257. $("#footer-area").animate( { opacity: 1, "bottom":"0"} , 300 );
  258. $("#primary").animate( { opacity: 1, "bottom":"0"} , 300 );
  259.  
  260. setTimeout(hideshowdesc, 100);
  261.  
  262. fullscreen = true;
  263. $("#fullscreen").css({ "background-image" : "url(images/fullscreen.png)" });
  264. };
  265.  
  266.  
  267. return this;
  268. }
  269.  
  270.  
  271.  
  272. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement