API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 3rd, 2012
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.85 KB | None | 0 0
raw download clone embed print report
  1. /**
  2. * jQuery lightBox plugin
  3. * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
  4. * and adapted to me for use like a plugin from jQuery.
  5. * @name jquery-lightbox-0.5.js
  6. * @author Leandro Vieira Pinho - http://leandrovieira.com
  7. * @version 0.5
  8. * @date April 11, 2008
  9. * @category jQuery plugin
  10. * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
  11. * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
  12. * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
  13. */
  14.  
  15. // Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
  16. (function($) {
  17. /**
  18. * $ is an alias to jQuery object
  19. *
  20. */
  21. $.fn.lightBox = function(settings) {
  22. // Settings to configure the jQuery lightBox plugin how you like
  23. settings = jQuery.extend({
  24. // Configuration related to overlay
  25. overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
  26. overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
  27. // Configuration related to navigation
  28. fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
  29. // Configuration related to images
  30. imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
  31. imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
  32. imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
  33. imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
  34. imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
  35. // Configuration related to container image box
  36. containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
  37. containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
  38. // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
  39. txtImage: 'Image', // (string) Specify text "Image"
  40. txtOf: 'of', // (string) Specify text "of"
  41. // Configuration related to keyboard navigation
  42. keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
  43. keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image
  44. keyToNext: 'n', // (string) (n = next) Letter to show the next image.
  45. // Don¥t alter these variables in any way
  46. imageArray: [],
  47. activeImage: 0
  48. },settings);
  49. // Caching the jQuery object with all elements matched
  50. var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
  51. /**
  52. * Initializing the plugin calling the start function
  53. *
  54. * @return boolean false
  55. */
  56. function _initialize() {
  57. _start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
  58. return false; // Avoid the browser following the link
  59. }
  60. /**
  61. * Start the jQuery lightBox plugin
  62. *
  63. * @param object objClicked The object (link) whick the user have clicked
  64. * @param object jQueryMatchedObj The jQuery object with all elements matched
  65. */
  66. function _start(objClicked,jQueryMatchedObj) {
  67. // Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
  68. $('embed, object, select').css({ 'visibility' : 'hidden' });
  69. // Call the function to create the markup structure; style some elements; assign events in some elements.
  70. _set_interface();
  71. // Unset total images in imageArray
  72. settings.imageArray.length = 0;
  73. // Unset image active information
  74. settings.activeImage = 0;
  75. // We have an image set? Or just an image? Let¥s see it.
  76. if ( jQueryMatchedObj.length == 1 ) {
  77. settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
  78. } else {
  79. // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
  80. for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
  81. settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
  82. }
  83. }
  84. while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
  85. settings.activeImage++;
  86. }
  87. // Call the function that prepares image exibition
  88. _set_image_to_view();
  89. }
  90. /**
  91. * Create the jQuery lightBox plugin interface
  92. *
  93. * The HTML markup will be like that:
  94. <div id="jquery-overlay"></div>
  95. <div id="jquery-lightbox">
  96. <div id="lightbox-container-image-box">
  97. <div id="lightbox-container-image">
  98. <img src="../fotos/XX.jpg" id="lightbox-image">
  99. <div id="lightbox-nav">
  100. <a href="#" id="lightbox-nav-btnPrev"></a>
  101. <a href="#" id="lightbox-nav-btnNext"></a>
  102. </div>
  103. <div id="lightbox-loading">
  104. <a href="#" id="lightbox-loading-link">
  105. <img src="../images/lightbox-ico-loading.gif">
  106. </a>
  107. </div>
  108. </div>
  109. </div>
  110. <div id="lightbox-container-image-data-box">
  111. <div id="lightbox-container-image-data">
  112. <div id="lightbox-image-details">
  113. <span id="lightbox-image-details-caption"></span>
  114. <span id="lightbox-image-details-currentNumber"></span>
  115. </div>
  116. <div id="lightbox-secNav">
  117. <a href="#" id="lightbox-secNav-btnClose">
  118. <img src="../images/lightbox-btn-close.gif">
  119. </a>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. *
  125. */
  126. function _set_interface() {
  127. // Apply the HTML markup into body tag
  128. $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
  129. // Get page sizes
  130. var arrPageSizes = ___getPageSize();
  131. // Style overlay and show it
  132. $('#jquery-overlay').css({
  133. backgroundColor: settings.overlayBgColor,
  134. opacity: settings.overlayOpacity,
  135. width: arrPageSizes[0],
  136. height: arrPageSizes[1]
  137. }).fadeIn();
  138. // Get page scroll
  139. var arrPageScroll = ___getPageScroll();
  140. // Calculate top and left offset for the jquery-lightbox div object and show it
  141. $('#jquery-lightbox').css({
  142. top: arrPageScroll[1] + (arrPageSizes[3] / 10),
  143. left: arrPageScroll[0]
  144. }).show();
  145. // Assigning click events in elements to close overlay
  146. $('#jquery-overlay,#jquery-lightbox').click(function() {
  147. _finish();
  148. });
  149. // Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
  150. $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
  151. _finish();
  152. return false;
  153. });
  154. // If window was resized, calculate the new overlay dimensions
  155. $(window).resize(function() {
  156. // Get page sizes
  157. var arrPageSizes = ___getPageSize();
  158. // Style overlay and show it
  159. $('#jquery-overlay').css({
  160. width: arrPageSizes[0],
  161. height: arrPageSizes[1]
  162. });
  163. // Get page scroll
  164. var arrPageScroll = ___getPageScroll();
  165. // Calculate top and left offset for the jquery-lightbox div object and show it
  166. $('#jquery-lightbox').css({
  167. top: arrPageScroll[1] + (arrPageSizes[3] / 10),
  168. left: arrPageScroll[0]
  169. });
  170. });
  171. }
  172. /**
  173. * Prepares image exibition; doing a image¥s preloader to calculate it¥s size
  174. *
  175. */
  176. function _set_image_to_view() { // show the loading
  177. // Show the loading
  178. $('#lightbox-loading').show();
  179. if ( settings.fixedNavigation ) {
  180. $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
  181. } else {
  182. // Hide some elements
  183. $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
  184. }
  185. // Image preload process
  186. var objImagePreloader = new Image();
  187. objImagePreloader.onload = function() {
  188. $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
  189. // Perfomance an effect in the image container resizing it
  190. _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
  191. // clear onLoad, IE behaves irratically with animated gifs otherwise
  192. objImagePreloader.onload=function(){};
  193. };
  194. objImagePreloader.src = settings.imageArray[settings.activeImage][0];
  195. };
  196. /**
  197. * Perfomance an effect in the image container resizing it
  198. *
  199. * @param integer intImageWidth The image¥s width that will be showed
  200. * @param integer intImageHeight The image¥s height that will be showed
  201. */
  202. function _resize_container_image_box(intImageWidth,intImageHeight) {
  203. // Get current width and height
  204. var intCurrentWidth = $('#lightbox-container-image-box').width();
  205. var intCurrentHeight = $('#lightbox-container-image-box').height();
  206. // Get the width and height of the selected image plus the padding
  207. var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image¥s width and the left and right padding value
  208. var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image¥s height and the left and right padding value
  209. // Diferences
  210. var intDiffW = intCurrentWidth - intWidth;
  211. var intDiffH = intCurrentHeight - intHeight;
  212. // Perfomance the effect
  213. $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
  214. if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
  215. if ( $.browser.msie ) {
  216. ___pause(250);
  217. } else {
  218. ___pause(100);
  219. }
  220. }
  221. $('#lightbox-container-image-data-box').css({ width: intImageWidth });
  222. $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
  223. };
  224. /**
  225. * Show the prepared image
  226. *
  227. */
  228. function _show_image() {
  229. $('#lightbox-loading').hide();
  230. $('#lightbox-image').fadeIn(function() {
  231. _show_image_data();
  232. _set_navigation();
  233. });
  234. _preload_neighbor_images();
  235. };
  236. /**
  237. * Show the image information
  238. *
  239. */
  240. function _show_image_data() {
  241. $('#lightbox-container-image-data-box').slideDown('fast');
  242. $('#lightbox-image-details-caption').hide();
  243. if ( settings.imageArray[settings.activeImage][1] ) {
  244. $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
  245. }
  246. // If we have a image set, display 'Image X of X'
  247. if ( settings.imageArray.length > 1 ) {
  248. $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
  249. }
  250. }
  251. /**
  252. * Display the button navigations
  253. *
  254. */
  255. function _set_navigation() {
  256. $('#lightbox-nav').show();
  257.  
  258. // Instead to define this configuration in CSS file, we define here. And it¥s need to IE. Just.
  259. $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
  260.  
  261. // Show the prev button, if not the first image in set
  262. if ( settings.activeImage != 0 ) {
  263. if ( settings.fixedNavigation ) {
  264. $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
  265. .unbind()
  266. .bind('click',function() {
  267. settings.activeImage = settings.activeImage - 1;
  268. _set_image_to_view();
  269. return false;
  270. });
  271. } else {
  272. // Show the images button for Next buttons
  273. $('#lightbox-nav-btnPrev').unbind().hover(function() {
  274. $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
  275. },function() {
  276. $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
  277. }).show().bind('click',function() {
  278. settings.activeImage = settings.activeImage - 1;
  279. _set_image_to_view();
  280. return false;
  281. });
  282. }
  283. }
  284.  
  285. // Show the next button, if not the last image in set
  286. if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
  287. if ( settings.fixedNavigation ) {
  288. $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
  289. .unbind()
  290. .bind('click',function() {
  291. settings.activeImage = settings.activeImage + 1;
  292. _set_image_to_view();
  293. return false;
  294. });
  295. } else {
  296. // Show the images button for Next buttons
  297. $('#lightbox-nav-btnNext').unbind().hover(function() {
  298. $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
  299. },function() {
  300. $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
  301. }).show().bind('click',function() {
  302. settings.activeImage = settings.activeImage + 1;
  303. _set_image_to_view();
  304. return false;
  305. });
  306. }
  307. }
  308. // Enable keyboard navigation
  309. _enable_keyboard_navigation();
  310. }
  311. /**
  312. * Enable a support to keyboard navigation
  313. *
  314. */
  315. function _enable_keyboard_navigation() {
  316. $(document).keydown(function(objEvent) {
  317. _keyboard_action(objEvent);
  318. });
  319. }
  320. /**
  321. * Disable the support to keyboard navigation
  322. *
  323. */
  324. function _disable_keyboard_navigation() {
  325. $(document).unbind();
  326. }
  327. /**
  328. * Perform the keyboard actions
  329. *
  330. */
  331. function _keyboard_action(objEvent) {
  332. // To ie
  333. if ( objEvent == null ) {
  334. keycode = event.keyCode;
  335. escapeKey = 27;
  336. // To Mozilla
  337. } else {
  338. keycode = objEvent.keyCode;
  339. escapeKey = objEvent.DOM_VK_ESCAPE;
  340. }
  341. // Get the key in lower case form
  342. key = String.fromCharCode(keycode).toLowerCase();
  343. // Verify the keys to close the ligthBox
  344. if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
  345. _finish();
  346. }
  347. // Verify the key to show the previous image
  348. if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
  349.  
  350. // If we¥re not showing the first image, call the previous
  351. var something134123123 = function () {
  352.  
  353. if ( settings.activeImage != 0 ) {
  354. settings.activeImage = settings.activeImage - 1;
  355. _set_image_to_view();
  356. _disable_keyboard_navigation();
  357. };
  358. }
  359. }
  360. // Verify the key to show the next image
  361. if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
  362.  
  363. // If we¥re not showing the last image, call the next
  364. if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
  365. settings.activeImage = settings.activeImage + 1;
  366. _set_image_to_view();
  367. _disable_keyboard_navigation();
  368. }
  369. }
  370. }
  371. /**
  372. * Preload prev and next images being showed
  373. *
  374. */
  375. function _preload_neighbor_images() {
  376. if ( (settings.imageArray.length -1) > settings.activeImage ) {
  377. objNext = new Image();
  378. objNext.src = settings.imageArray[settings.activeImage + 1][0];
  379. }
  380. if ( settings.activeImage > 0 ) {
  381. objPrev = new Image();
  382. objPrev.src = settings.imageArray[settings.activeImage -1][0];
  383. }
  384. }
  385. /**
  386. * Remove jQuery lightBox plugin HTML markup
  387. *
  388. */
  389. function _finish() {
  390. $('#jquery-lightbox').remove();
  391. $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
  392. // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
  393. $('embed, object, select').css({ 'visibility' : 'visible' });
  394. }
  395. /**
  396. / THIRD FUNCTION
  397. * getPageSize() by quirksmode.com
  398. *
  399. * @return Array Return an array with page width, height and window width, height
  400. */
  401. function ___getPageSize() {
  402. var xScroll, yScroll;
  403. if (window.innerHeight && window.scrollMaxY) {
  404. xScroll = window.innerWidth + window.scrollMaxX;
  405. yScroll = window.innerHeight + window.scrollMaxY;
  406. } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  407. xScroll = document.body.scrollWidth;
  408. yScroll = document.body.scrollHeight;
  409. } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  410. xScroll = document.body.offsetWidth;
  411. yScroll = document.body.offsetHeight;
  412. }
  413. var windowWidth, windowHeight;
  414. if (self.innerHeight) { // all except Explorer
  415. if(document.documentElement.clientWidth){
  416. windowWidth = document.documentElement.clientWidth;
  417. } else {
  418. windowWidth = self.innerWidth;
  419. }
  420. windowHeight = self.innerHeight;
  421. } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  422. windowWidth = document.documentElement.clientWidth;
  423. windowHeight = document.documentElement.clientHeight;
  424. } else if (document.body) { // other Explorers
  425. windowWidth = document.body.clientWidth;
  426. windowHeight = document.body.clientHeight;
  427. }
  428. // for small pages with total height less then height of the viewport
  429. if(yScroll < windowHeight){
  430. pageHeight = windowHeight;
  431. } else {
  432. pageHeight = yScroll;
  433. }
  434. // for small pages with total width less then width of the viewport
  435. if(xScroll < windowWidth){
  436. pageWidth = xScroll;
  437. } else {
  438. pageWidth = windowWidth;
  439. }
  440. arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
  441. return arrayPageSize;
  442. };
  443. /**
  444. / THIRD FUNCTION
  445. * getPageScroll() by quirksmode.com
  446. *
  447. * @return Array Return an array with x,y page scroll values.
  448. */
  449. function ___getPageScroll() {
  450. var xScroll, yScroll;
  451. if (self.pageYOffset) {
  452. yScroll = self.pageYOffset;
  453. xScroll = self.pageXOffset;
  454. } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
  455. yScroll = document.documentElement.scrollTop;
  456. xScroll = document.documentElement.scrollLeft;
  457. } else if (document.body) {// all other Explorers
  458. yScroll = document.body.scrollTop;
  459. xScroll = document.body.scrollLeft;
  460. }
  461. arrayPageScroll = new Array(xScroll,yScroll);
  462. return arrayPageScroll;
  463. };
  464. /**
  465. * Stop the code execution from a escified time in milisecond
  466. *
  467. */
  468. function ___pause(ms) {
  469. var date = new Date();
  470. curDate = null;
  471. do { var curDate = new Date(); }
  472. while ( curDate - date < ms);
  473. };
  474. // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
  475. return this.unbind('click').click(_initialize);
  476. };
  477. })(jQuery); // Call and execute the function immediately passing the jQuery object
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!