demo.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /*
  2. * blueimp Gallery Demo JS
  3. * https://github.com/blueimp/Gallery
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* global blueimp, $ */
  12. $(function () {
  13. 'use strict'
  14. // Load demo images from flickr:
  15. $.ajax({
  16. url: 'https://api.flickr.com/services/rest/',
  17. data: {
  18. format: 'json',
  19. method: 'flickr.interestingness.getList',
  20. // eslint-disable-next-line camelcase
  21. api_key: '7617adae70159d09ba78cfec73c13be3'
  22. },
  23. dataType: 'jsonp',
  24. jsonp: 'jsoncallback'
  25. }).done(function (result) {
  26. var carouselLinks = []
  27. var linksContainer = $('#links')
  28. var baseUrl
  29. // Add the demo images as links with thumbnails to the page:
  30. $.each(result.photos.photo, function (index, photo) {
  31. baseUrl =
  32. 'https://farm' +
  33. photo.farm +
  34. '.static.flickr.com/' +
  35. photo.server +
  36. '/' +
  37. photo.id +
  38. '_' +
  39. photo.secret
  40. $('<a/>')
  41. .append($('<img>').prop('src', baseUrl + '_s.jpg'))
  42. .prop('href', baseUrl + '_b.jpg')
  43. .prop('title', photo.title)
  44. .attr('data-gallery', '')
  45. .appendTo(linksContainer)
  46. carouselLinks.push({
  47. href: baseUrl + '_c.jpg',
  48. title: photo.title
  49. })
  50. })
  51. // Initialize the Gallery as image carousel:
  52. // eslint-disable-next-line new-cap
  53. blueimp.Gallery(carouselLinks, {
  54. container: '#blueimp-image-carousel',
  55. carousel: true
  56. })
  57. })
  58. // Initialize the Gallery as video carousel:
  59. // eslint-disable-next-line new-cap
  60. blueimp.Gallery(
  61. [
  62. {
  63. title: 'Sintel',
  64. href: 'https://archive.org/download/Sintel/sintel-2048-surround.mp4',
  65. type: 'video/mp4',
  66. poster: 'https://i.imgur.com/MUSw4Zu.jpg'
  67. },
  68. {
  69. title: 'Big Buck Bunny',
  70. href:
  71. 'https://upload.wikimedia.org/wikipedia/commons/c/c0/' +
  72. 'Big_Buck_Bunny_4K.webm',
  73. type: 'video/webm',
  74. poster:
  75. 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/' +
  76. 'Big_Buck_Bunny_4K.webm/4000px--Big_Buck_Bunny_4K.webm.jpg'
  77. },
  78. {
  79. title: 'Elephants Dream',
  80. href:
  81. 'https://upload.wikimedia.org/wikipedia/commons/8/83/' +
  82. 'Elephants_Dream_%28high_quality%29.ogv',
  83. type: 'video/ogg',
  84. poster:
  85. 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/' +
  86. 'Elephants_Dream_s1_proog.jpg/800px-Elephants_Dream_s1_proog.jpg'
  87. },
  88. {
  89. title: 'LES TWINS - An Industry Ahead',
  90. type: 'text/html',
  91. youtube: 'zi4CIXpx7Bg'
  92. },
  93. {
  94. title: 'KN1GHT - Last Moon',
  95. type: 'text/html',
  96. vimeo: '73686146',
  97. poster: 'https://secure-a.vimeocdn.com/ts/448/835/448835699_960.jpg'
  98. }
  99. ],
  100. {
  101. container: '#blueimp-video-carousel',
  102. carousel: true
  103. }
  104. )
  105. })