Advertisement
Guest User

Untitled

a guest
Oct 8th, 2012
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.55 KB | None | 0 0
  1. /**
  2. * jQuery Gallery Plugin
  3. * http://code.google.com/p/jquery-gallery-plugin/
  4. *
  5. * Copyright (c) 2009 Yusuke Horie
  6. *
  7. * Released under the MIT License:
  8. * http://www.opensource.org/licenses/mit-license.php
  9. *
  10. * Since : 0.1.0 - 08/02/2009
  11. * Version: 0.3.0 - 08/25/2009
  12. */
  13. (function(jQuery) {
  14.  
  15. /** private properties **/
  16.  
  17. var _inc = 0;
  18.  
  19. /** public methods **/
  20.  
  21. jQuery.fn.gallery = function (options) {
  22. var options = jQuery.extend({}, jQuery.fn.gallery.defaults, options);
  23.  
  24. return this.each(function(i, e) {
  25. var
  26. $this = jQuery(e),
  27. id = options.prefix + _inc,
  28. i = 0,
  29. n = 0,
  30. limit = 5,
  31. step = 1,
  32. duration = Math.ceil(options.interval*0.3),
  33. timeId = null;
  34.  
  35. var height;
  36. if (!options.height) {
  37. if (!parseInt($this.css('height'), 10)) {
  38. height = '450px';
  39. } else {
  40. height = $this.height();
  41. }
  42. } else {
  43. height = options.height;
  44. }
  45.  
  46. var
  47. width = (!options.width) ? $this.width(): options.width,
  48. paddingTop = parseInt($this.css('padding-top'), 10),
  49. paddingBottom = parseInt($this.css('padding-bottom'), 10),
  50. pheight = parseInt(height, 10),
  51. contentHeight = pheight - options.thumbHeight + paddingTop,
  52. o = $this.offset(),
  53. barWidth = jQuery(window).width() - o.left;
  54.  
  55. // thumbnail bar
  56. var barTop = (options.barPosition == 'top') ? paddingTop: contentHeight;
  57.  
  58. if (options.toggleBar) {
  59. if (options.barPosition == 'top') {
  60. $this.hover(
  61. function() {
  62. $('#thumbnails_' + id).animate({top: paddingTop}, {queue: false, duration: 300});
  63. },
  64. function() {
  65. $('#thumbnails_' + id).animate({top: barTop}, {queue: false, duration: 300});
  66. });
  67. barTop = (options.thumbHeight + paddingTop) * (-1);
  68. } else {
  69. var outerHeight = pheight + paddingTop + paddingBottom;
  70. $this.hover(
  71. function() {
  72. $('#thumbnails_' + id).animate({top: contentHeight}, {queue: false, duration: 300});
  73. },
  74. function() {
  75. $('#thumbnails_' + id).animate({top: outerHeight}, {queue: false, duration: 300});
  76. });
  77. barTop = outerHeight;
  78. }
  79. }
  80.  
  81. $this
  82. .css({
  83. width: width,
  84. height: height,
  85. zIndex: options.zIndex
  86. })
  87. .prepend('<div id="' + id + '"></div>')
  88. .find('ul')
  89. .attr('id', 'thumbnails_' + id)
  90. .addClass(options.barClass)
  91. .css({
  92. top: barTop,
  93. height: options.thumbHeight + 'px',
  94. width: barWidth + 'px',
  95. zIndex: options.zIndex + 2000
  96. })
  97. .find('li')
  98. .css({
  99. width: options.thumbWidth + 'px',
  100. height: options.thumbHeight + 'px'
  101. })
  102. .each(function (index) {
  103. jQuery.data(this, 'index', index);
  104. })
  105. .click(function (event) {
  106. event.preventDefault();
  107. if (options.slideshow) clearInterval(timeId);
  108.  
  109. if ($.isFunction(options.onSelect))
  110. options.onSelect.apply(this, [event]);
  111.  
  112. var $e = this;
  113. bar.find('li').each(function (index, e) {
  114. if (e == $e) {
  115. step = index;
  116. return false;
  117. }
  118. });
  119.  
  120. i = jQuery.data(this, 'index');
  121.  
  122. // pre load
  123. for (var j=i; j<i+limit; j++) {
  124. var o = pictures.eq(j);
  125. if (o.length > 0 && typeof o.data('loaded') == 'undefined') {
  126. preLoad(o.attr('href'));
  127. o.data('loaded', true);
  128. }
  129. }
  130.  
  131. display();
  132. if (options.slideshow)
  133. timeId = setInterval(display, options.interval);
  134. });
  135.  
  136. if (options.showOverlay) {
  137. var
  138. itop = pheight*(1-options.ratio) + paddingTop,
  139. ileft = $this.css('padding-left'),
  140. iheight = (pheight*options.ratio) + paddingTop;
  141.  
  142. // screen
  143. $('<div />')
  144. .addClass(options.screenClass)
  145. .css({
  146. opacity: 0.5,
  147. top: itop,
  148. left: 0,
  149. height: iheight,
  150. width: $this.outerWidth(),
  151. zIndex: options.zIndex + 1000
  152. })
  153. .insertAfter('#' + id);
  154.  
  155. $('<div />')
  156. .addClass(options.infoClass)
  157. .html('<div id="gtitle_' + id + '" class="' + options.titleClass + '" style="display:none;"></div>' +
  158. '<div id="gdesc_' + id + '" class="' + options.descClass + '" style="display:none;"></div>')
  159. .css({
  160. top: itop,
  161. left: 0,
  162. height: iheight,
  163. zIndex: options.zIndex + 1500
  164. })
  165. .insertAfter('#' + id);
  166. }
  167.  
  168. // content container
  169. var c = jQuery('#' + id).css({
  170. position: 'relative',
  171. width: width,
  172. height: height,
  173. overflow: 'hidden'
  174. }).addClass(options.contentClass);
  175.  
  176. var
  177. bar = $this.find('ul').show(),
  178. thumbnails = bar.find('img'),
  179. pictures = $this.find('a').bind('click.gallery', function (e) { e.preventDefault(); }),
  180. gtitle = $('#gtitle_' + id),
  181. gdesc = $('#gdesc_' + id),
  182. len = thumbnails.length,
  183. w = $this.find('li:first').outerWidth(true);
  184.  
  185. var display = function () {
  186. var t = thumbnails.eq(i);
  187. var pict = pictures.eq(i);
  188. var p = pict.attr('href');
  189. var pid = id + '_' + i;
  190.  
  191. // pre load
  192. var next = pictures.eq(i+limit);
  193. if (next.length > 0 && typeof next.data('loaded') == 'undefined') {
  194. preLoad(next.attr('href'));
  195. }
  196.  
  197. // delete previous picture
  198. c.find('img').animate({opacity: 0.0}, {
  199. queue: false,
  200. duration: duration,
  201. easing: 'linear',
  202. complete: function() { jQuery(this).remove(); }
  203. });
  204.  
  205. // append new picture
  206. jQuery('<img />')
  207. .attr('src', p)
  208. .attr('id', pid)
  209. .css({
  210. position: 'absolute',
  211. top: 0,
  212. left: 0,
  213. opacity: 0.0
  214. })
  215. .bind('click.gallery', function (event) {
  216. options.onClick.apply(this, [event, pict.get()]);
  217. })
  218. .appendTo('#' + id)
  219. .animate({opacity: 1.0}, {
  220. queue: false,
  221. duration: duration,
  222. easing: 'linear'
  223. })
  224. .load(function () {
  225. pict.data('loaded', true);
  226. });
  227.  
  228. var title = t.attr('title');
  229. var id_of_desc = pict.attr('rel');
  230. var desc = (id_of_desc && $('#' + id_of_desc).length > 0)
  231. ? $('#' + id_of_desc).html(): pict.attr('title');
  232.  
  233. if (n != 0) {
  234. // title
  235. if (typeof title != 'undefined')
  236. gtitle.fadeOut(duration*0.3, function () {
  237. jQuery(this).html(title).show();
  238. });
  239.  
  240. // description
  241. if (typeof desc != 'undefined')
  242. gdesc.fadeOut(duration*0.3, function () {
  243. jQuery(this).html(desc).show();
  244. });
  245.  
  246. // scrolle
  247. bar.animate({left: w*(-1)*step}, {
  248. queue: false,
  249. duration: 300,
  250. easing: options.easing,
  251. complete: function () {
  252. var $t = jQuery(this).css({left: 0});
  253. var f = $t.find('li').slice(0, step);
  254. var indexes = f.map(function () {
  255. return jQuery.data(this, 'index');
  256. });
  257. var cln = f.clone(true).each(function (j) {
  258. jQuery.data(this, 'index', indexes[j]);
  259. }).hide().appendTo(this).fadeIn(duration);
  260. f.remove();
  261. step = 1;
  262. }
  263. });
  264. } else {
  265. // title & description
  266. if (typeof title != 'undefined') gtitle.html(title).show();
  267. if (typeof desc != 'undefined') gdesc.html(desc).show();
  268. }
  269.  
  270. options.onChange.apply($this.get(), [i, pict.get()]);
  271.  
  272. if (i < (len-1)) {
  273. i++;
  274. } else {
  275. i = 0;
  276. }
  277. n++;
  278. };
  279.  
  280. // pre load
  281. for (var j=0; j<limit; j++) {
  282. var o = pictures.eq(j);
  283. if (o.length > 0) {
  284. preLoad(o.attr('href'));
  285. o.data('loaded', true);
  286. }
  287. }
  288.  
  289. display();
  290. if (options.slideshow)
  291. timeId = setInterval(display, options.interval);
  292.  
  293. _inc++;
  294. });
  295. };
  296.  
  297. jQuery.fn.gallery.defaults = {
  298. width: null,
  299. height: null,
  300. thumbWidth: 55,
  301. thumbHeight: 55,
  302. zIndex: 1000,
  303. interval: 4500,
  304. prefix: 'gallery_',
  305. easing: 'linear',
  306. ratio: 0.35,
  307. slideshow: true,
  308. toggleBar: true,
  309. showOverlay: true,
  310. barPosition: null,
  311. barClass: 'galleryBar',
  312. contentClass: 'galleryContent',
  313. infoClass: 'galleryInfo',
  314. screenClass: 'galleryScreen',
  315. titleClass: 'galleryTitle',
  316. descClass: 'galleryDesc',
  317. onClick: function () { return; },
  318. onSelect: function () { return; },
  319. onChange: function () { return; }
  320. };
  321.  
  322. /** private methods **/
  323.  
  324. var preLoad = function (url) {
  325. jQuery('<img />').attr('src', url);
  326. };
  327.  
  328. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement