jquery.fancybox-buttons.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /*!
  2. * Buttons helper for fancyBox
  3. * version: 1.0.5 (Mon, 15 Oct 2012)
  4. * @requires fancyBox v2.0 or later
  5. *
  6. * Usage:
  7. * $(".fancybox").fancybox({
  8. * helpers : {
  9. * buttons: {
  10. * position : 'top'
  11. * }
  12. * }
  13. * });
  14. *
  15. */
  16. (function ($) {
  17. //Shortcut for fancyBox object
  18. var F = $.fancybox;
  19. var angle = 0;
  20. //Add helper object
  21. F.helpers.buttons = {
  22. defaults : {
  23. skipSingle : false, // disables if gallery contains single image
  24. position : 'top', // 'top' or 'bottom'
  25. tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnLeftRotate" title="左旋转" href="javascript:;"></a></li><li><a class="btnRightRotate" title="右旋转" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
  26. },
  27. list : null,
  28. buttons: null,
  29. beforeLoad: function (opts, obj) {
  30. //Remove self if gallery do not have at least two items
  31. if (opts.skipSingle && obj.group.length < 2) {
  32. obj.helpers.buttons = false;
  33. obj.closeBtn = true;
  34. return;
  35. }
  36. //Increase top margin to give space for buttons
  37. obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
  38. },
  39. onPlayStart: function () {
  40. if (this.buttons) {
  41. this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
  42. }
  43. },
  44. onPlayEnd: function () {
  45. if (this.buttons) {
  46. this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
  47. }
  48. },
  49. afterShow: function (opts, obj) {
  50. var buttons = this.buttons;
  51. if (!buttons) {
  52. this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
  53. var w_width = $(window).width();
  54. var ml = parseInt((w_width - 250) / 2);
  55. $('#fancybox-buttons').css('left', ml + 'px');
  56. buttons = {
  57. prev : this.list.find('.btnPrev').click( F.prev ),
  58. next : this.list.find('.btnNext').click( F.next ),
  59. play : this.list.find('.btnPlay').click( F.play ),
  60. toggle : this.list.find('.btnToggle').click( F.toggle ),
  61. left : this.list.find('.btnLeftRotate').click(function(){
  62. angle -= 90;
  63. $('.fancybox-image').css({
  64. '-webkit-transform' : 'rotate(' + angle + 'deg)'
  65. })
  66. }),
  67. right : this.list.find('.btnRightRotate').click(function(){
  68. angle += 90;
  69. $('.fancybox-image').css({
  70. '-webkit-transform' : 'rotate(' + angle + 'deg)'
  71. })
  72. })
  73. }
  74. }
  75. //Prev
  76. if (obj.index > 0 || obj.loop) {
  77. buttons.prev.removeClass('btnDisabled');
  78. } else {
  79. buttons.prev.addClass('btnDisabled');
  80. }
  81. //Next / Play
  82. if (obj.loop || obj.index < obj.group.length - 1) {
  83. buttons.next.removeClass('btnDisabled');
  84. buttons.play.removeClass('btnDisabled');
  85. } else {
  86. buttons.next.addClass('btnDisabled');
  87. buttons.play.addClass('btnDisabled');
  88. }
  89. this.buttons = buttons;
  90. this.onUpdate(opts, obj);
  91. },
  92. onUpdate: function (opts, obj) {
  93. var toggle;
  94. angle = 0;
  95. if (!this.buttons) {
  96. return;
  97. }
  98. toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
  99. //Size toggle button
  100. if (obj.canShrink) {
  101. toggle.addClass('btnToggleOn');
  102. } else if (!obj.canExpand) {
  103. toggle.addClass('btnDisabled');
  104. }
  105. },
  106. beforeClose: function () {
  107. if (this.list) {
  108. this.list.remove();
  109. }
  110. this.list = null;
  111. this.buttons = null;
  112. }
  113. };
  114. }(jQuery));