examples.lightbox.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. (function( $ ) {
  2. 'use strict';
  3. /*
  4. Single Image
  5. */
  6. $('.image-popup-vertical-fit').magnificPopup({
  7. type: 'image',
  8. closeOnContentClick: true,
  9. mainClass: 'mfp-img-mobile',
  10. image: {
  11. verticalFit: true
  12. }
  13. });
  14. $('.image-popup-no-margins').magnificPopup({
  15. type: 'image',
  16. closeOnContentClick: true,
  17. closeBtnInside: false,
  18. fixedContentPos: true,
  19. mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
  20. image: {
  21. verticalFit: true
  22. },
  23. zoom: {
  24. enabled: true,
  25. duration: 300 // don't foget to change the duration also in CSS
  26. }
  27. });
  28. /*
  29. Gallery
  30. */
  31. $('.popup-gallery').magnificPopup({
  32. delegate: 'a',
  33. type: 'image',
  34. tLoading: 'Loading image #%curr%...',
  35. mainClass: 'mfp-img-mobile',
  36. gallery: {
  37. enabled: true,
  38. navigateByImgClick: true,
  39. preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  40. },
  41. image: {
  42. tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
  43. }
  44. });
  45. /*
  46. Zoom Gallery
  47. */
  48. $('.zoom-gallery').magnificPopup({
  49. delegate: 'a',
  50. type: 'image',
  51. closeOnContentClick: false,
  52. closeBtnInside: false,
  53. mainClass: 'mfp-with-zoom mfp-img-mobile',
  54. image: {
  55. verticalFit: true,
  56. titleSrc: function(item) {
  57. return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
  58. }
  59. },
  60. gallery: {
  61. enabled: true
  62. },
  63. zoom: {
  64. enabled: true,
  65. duration: 300, // don't foget to change the duration also in CSS
  66. opener: function(element) {
  67. return element.find('img');
  68. }
  69. }
  70. });
  71. /*
  72. Popup with video or map
  73. */
  74. $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
  75. disableOn: 700,
  76. type: 'iframe',
  77. mainClass: 'mfp-fade',
  78. removalDelay: 160,
  79. preloader: false,
  80. fixedContentPos: false
  81. });
  82. /*
  83. Dialog with CSS animation
  84. */
  85. $('.popup-with-zoom-anim').magnificPopup({
  86. type: 'inline',
  87. fixedContentPos: false,
  88. fixedBgPos: true,
  89. overflowY: 'auto',
  90. closeBtnInside: true,
  91. preloader: false,
  92. midClick: true,
  93. removalDelay: 300,
  94. mainClass: 'my-mfp-zoom-in'
  95. });
  96. $('.popup-with-move-anim').magnificPopup({
  97. type: 'inline',
  98. fixedContentPos: false,
  99. fixedBgPos: true,
  100. overflowY: 'auto',
  101. closeBtnInside: true,
  102. preloader: false,
  103. midClick: true,
  104. removalDelay: 300,
  105. mainClass: 'my-mfp-slide-bottom'
  106. });
  107. /*
  108. Form
  109. */
  110. $('.popup-with-form').magnificPopup({
  111. type: 'inline',
  112. preloader: false,
  113. focus: '#name',
  114. // When elemened is focused, some mobile browsers in some cases zoom in
  115. // It looks not nice, so we disable it:
  116. callbacks: {
  117. beforeOpen: function() {
  118. if($(window).width() < 700) {
  119. this.st.focus = false;
  120. } else {
  121. this.st.focus = '#name';
  122. }
  123. }
  124. }
  125. });
  126. /*
  127. Ajax
  128. */
  129. $('.simple-ajax-popup').magnificPopup({
  130. type: 'ajax'
  131. });
  132. }).apply( this, [ jQuery ]);