demo.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. api_key: '7617adae70159d09ba78cfec73c13be3' // jshint ignore:line
  21. },
  22. dataType: 'jsonp',
  23. jsonp: 'jsoncallback'
  24. }).done(function (result) {
  25. var carouselLinks = []
  26. var linksContainer = $('#links')
  27. var baseUrl
  28. // Add the demo images as links with thumbnails to the page:
  29. $.each(result.photos.photo, function (index, photo) {
  30. baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
  31. photo.server + '/' + photo.id + '_' + photo.secret
  32. $('<a/>')
  33. .append($('<img>').prop('src', baseUrl + '_s.jpg'))
  34. .prop('href', baseUrl + '_b.jpg')
  35. .prop('title', photo.title)
  36. .attr('data-gallery', '')
  37. .appendTo(linksContainer)
  38. carouselLinks.push({
  39. href: baseUrl + '_c.jpg',
  40. title: photo.title
  41. })
  42. })
  43. // Initialize the Gallery as image carousel:
  44. blueimp.Gallery(carouselLinks, {
  45. container: '#blueimp-image-carousel',
  46. carousel: true
  47. })
  48. })
  49. // Initialize the Gallery as video carousel:
  50. blueimp.Gallery([
  51. {
  52. title: 'Sintel',
  53. href: 'https://archive.org/download/Sintel/' +
  54. 'sintel-2048-surround.mp4',
  55. type: 'video/mp4',
  56. poster: 'https://i.imgur.com/MUSw4Zu.jpg'
  57. },
  58. {
  59. title: 'Big Buck Bunny',
  60. href: 'https://upload.wikimedia.org/wikipedia/commons/c/c0/' +
  61. 'Big_Buck_Bunny_4K.webm',
  62. type: 'video/webm',
  63. poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/' +
  64. 'Big_Buck_Bunny_4K.webm/4000px--Big_Buck_Bunny_4K.webm.jpg'
  65. },
  66. {
  67. title: 'Elephants Dream',
  68. href: 'https://upload.wikimedia.org/wikipedia/commons/8/83/' +
  69. 'Elephants_Dream_%28high_quality%29.ogv',
  70. type: 'video/ogg',
  71. poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/' +
  72. 'Elephants_Dream_s1_proog.jpg/800px-Elephants_Dream_s1_proog.jpg'
  73. },
  74. {
  75. title: 'LES TWINS - An Industry Ahead',
  76. type: 'text/html',
  77. youtube: 'zi4CIXpx7Bg'
  78. },
  79. {
  80. title: 'KN1GHT - Last Moon',
  81. type: 'text/html',
  82. vimeo: '73686146',
  83. poster: 'https://secure-a.vimeocdn.com/ts/448/835/448835699_960.jpg'
  84. }
  85. ], {
  86. container: '#blueimp-video-carousel',
  87. carousel: true
  88. })
  89. })