Advertisement
Guest User

I hate you Javascript

a guest
May 30th, 2016
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.56 KB | None | 0 0
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="_include/jQuery/js/jquery.easing.1.3.js"></script>
  3. <script type="text/javascript">
  4. (function($) {
  5. $.fn.parallaxSlider = function(options) {
  6. var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
  7. return this.each(function() {
  8. var $pxs_container = $(this),
  9. o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
  10.  
  11. //the main slider
  12. var $pxs_slider = $('.pxs_slider',$pxs_container),
  13. //the elements in the slider
  14. $elems = $pxs_slider.children(),
  15. //total number of elements
  16. total_elems = $elems.length,
  17. //the navigation buttons
  18. $pxs_next = $('.pxs_next',$pxs_container),
  19. $pxs_prev = $('.pxs_prev',$pxs_container),
  20. //the bg images
  21. $pxs_bg1 = $('.pxs_bg1',$pxs_container),
  22. $pxs_bg2 = $('.pxs_bg2',$pxs_container),
  23. $pxs_bg3 = $('.pxs_bg3',$pxs_container),
  24. //current image
  25. current = 0,
  26. //the thumbs container
  27. $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
  28. //the thumbs
  29. $thumbs = $pxs_thumbnails.children(),
  30. //the interval for the autoplay mode
  31. slideshow,
  32. //the loading image
  33. $pxs_loading = $('.pxs_loading',$pxs_container),
  34. $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
  35.  
  36. //first preload all the images
  37. var loaded = 0,
  38. $images = $pxs_slider_wrapper.find('img');
  39.  
  40. $images.each(function(){
  41. var $img = $(this);
  42. $('<img/>').load(function(){
  43. ++loaded;
  44.  
  45. $pxs_loading.hide();
  46. $pxs_slider_wrapper.show();
  47.  
  48. //one images width (assuming all images have the same sizes)
  49. var one_image_w = $pxs_slider.find('img:first').width();
  50.  
  51. /*
  52. need to set width of the slider,
  53. of each one of its elements, and of the
  54. navigation buttons
  55. */
  56. setWidths($pxs_slider,
  57. $elems,
  58. total_elems,
  59. $pxs_bg1,
  60. $pxs_bg2,
  61. $pxs_bg3,
  62. one_image_w,
  63. $pxs_next,
  64. $pxs_prev);
  65.  
  66. /*
  67. set the width of the thumbs
  68. and spread them evenly
  69. */
  70. $pxs_thumbnails.css({
  71. 'width' : one_image_w + 'px',
  72. 'margin-left' : -one_image_w/2 + 'px'
  73. });
  74. var spaces = one_image_w/(total_elems+1);
  75. $thumbs.each(function(i){
  76. var $this = $(this);
  77. var left = spaces*(i+1) - $this.width()/2;
  78. $this.css('left',left+'px');
  79.  
  80. if(o.thumbRotation){
  81. var angle = Math.floor(Math.random()*41)-20;
  82. $this.css({
  83. '-moz-transform' : 'rotate('+ angle +'deg)',
  84. '-webkit-transform' : 'rotate('+ angle +'deg)',
  85. 'transform' : 'rotate('+ angle +'deg)'
  86. });
  87. }
  88. //hovering the thumbs animates them up and down
  89. $this.bind('mouseenter',function(){
  90. $(this).stop().animate({top:'-10px'},100);
  91. }).bind('mouseleave',function(){
  92. $(this).stop().animate({top:'0px'},100);
  93. });
  94. });
  95.  
  96. //make the first thumb be selected
  97. highlight($thumbs.eq(0));
  98.  
  99. //slide when clicking the navigation buttons
  100. $pxs_next.bind('click',function(){
  101. ++current;
  102. if(current >= total_elems)
  103. if(o.circular)
  104. current = 0;
  105. else{
  106. --current;
  107. return false;
  108. }
  109. highlight($thumbs.eq(current));
  110. slide(current,
  111. $pxs_slider,
  112. $pxs_bg3,
  113. $pxs_bg2,
  114. $pxs_bg1,
  115. o.speed,
  116. o.easing,
  117. o.easingBg);
  118. });
  119. $pxs_prev.bind('click',function(){
  120. --current;
  121. if(current < 0)
  122. if(o.circular)
  123. current = total_elems - 1;
  124. else{
  125. ++current;
  126. return false;
  127. }
  128. highlight($thumbs.eq(current));
  129. slide(current,
  130. $pxs_slider,
  131. $pxs_bg3,
  132. $pxs_bg2,
  133. $pxs_bg1,
  134. o.speed,
  135. o.easing,
  136. o.easingBg);
  137. });
  138.  
  139. /*
  140. clicking a thumb will slide to the respective image
  141. */
  142. $thumbs.bind('click',function(){
  143. var $thumb = $(this);
  144. highlight($thumb);
  145. //if autoplay interrupt when user clicks
  146. if(o.auto)
  147. clearInterval(slideshow);
  148. current = $thumb.index();
  149. slide(current,
  150. $pxs_slider,
  151. $pxs_bg3,
  152. $pxs_bg2,
  153. $pxs_bg1,
  154. o.speed,
  155. o.easing,
  156. o.easingBg);
  157. });
  158.  
  159.  
  160.  
  161. /*
  162. activate the autoplay mode if
  163. that option was specified
  164. */
  165. if(o.auto != 0){
  166. o.circular = true;
  167. slideshow = setInterval(function(){
  168. $pxs_next.trigger('click');
  169. },o.auto);
  170. }
  171.  
  172. /*
  173. when resizing the window,
  174. we need to recalculate the widths of the
  175. slider elements, based on the new windows width.
  176. we need to slide again to the current one,
  177. since the left of the slider is no longer correct
  178. */
  179. $(window).resize(function(){
  180. w_w = $(window).width();
  181. setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
  182. slide(current,
  183. $pxs_slider,
  184. $pxs_bg3,
  185. $pxs_bg2,
  186. $pxs_bg1,
  187. 1,
  188. o.easing,
  189. o.easingBg);
  190. });
  191.  
  192. }
  193. }).error(function(){
  194. alert('here')
  195. }).attr('src',$img.attr('src'));
  196. });
  197.  
  198.  
  199.  
  200. });
  201. };
  202.  
  203. //the current windows width
  204. var w_w = $(window).width();
  205.  
  206. var slide = function(current,
  207. $pxs_slider,
  208. $pxs_bg3,
  209. $pxs_bg2,
  210. $pxs_bg1,
  211. speed,
  212. easing,
  213. easingBg){
  214. var slide_to = parseInt(-w_w * current);
  215. $pxs_slider.stop().animate({
  216. left : slide_to + 'px'
  217. },speed, easing);
  218. $pxs_bg3.stop().animate({
  219. left : slide_to/2 + 'px'
  220. },speed, easingBg);
  221. $pxs_bg2.stop().animate({
  222. left : slide_to/4 + 'px'
  223. },speed, easingBg);
  224. $pxs_bg1.stop().animate({
  225. left : slide_to/8 + 'px'
  226. },speed, easingBg);
  227. }
  228.  
  229. var highlight = function($elem){
  230. $elem.siblings().removeClass('selected');
  231. $elem.addClass('selected');
  232. }
  233.  
  234. var setWidths = function($pxs_slider,
  235. $elems,
  236. total_elems,
  237. $pxs_bg1,
  238. $pxs_bg2,
  239. $pxs_bg3,
  240. one_image_w,
  241. $pxs_next,
  242. $pxs_prev){
  243. /*
  244. the width of the slider is the windows width
  245. times the total number of elements in the slider
  246. */
  247. var pxs_slider_w = w_w * total_elems;
  248. $pxs_slider.width(pxs_slider_w + 'px');
  249. //each element will have a width = windows width
  250. $elems.width(w_w + 'px');
  251. /*
  252. we also set the width of each bg image div.
  253. The value is the same calculated for the pxs_slider
  254. */
  255. $pxs_bg1.width(pxs_slider_w + 'px');
  256. $pxs_bg2.width(pxs_slider_w + 'px');
  257. $pxs_bg3.width(pxs_slider_w + 'px');
  258.  
  259. /*
  260. both the right and left of the
  261. navigation next and previous buttons will be:
  262. windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
  263. */
  264. var position_nav = w_w/2 - one_image_w/2 + 3;
  265. $pxs_next.css('right', position_nav + 'px');
  266. $pxs_prev.css('left', position_nav + 'px');
  267. }
  268.  
  269. $.fn.parallaxSlider.defaults = {
  270. auto : 0, //how many seconds to periodically slide the content.
  271. //If set to 0 then autoplay is turned off.
  272. speed : 1000,//speed of each slide animation
  273. easing : 'jswing',//easing effect for the slide animation
  274. easingBg : 'jswing',//easing effect for the background animation
  275. circular : true,//circular slider
  276. thumbRotation : true//the thumbs will be randomly rotated
  277. };
  278. //easeInOutExpo,easeInBack
  279. })(jQuery);
  280. </script>
  281.  
  282. <script type="text/javascript">
  283. $(function() {
  284. var $pxs_container = $('#pxs_container');
  285. $pxs_container.parallaxSlider();
  286. });
  287. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement