141 lines
3.8 KiB
JavaScript
141 lines
3.8 KiB
JavaScript
/*
|
|
* blueimp Gallery Demo JS
|
|
* https://github.com/blueimp/Gallery
|
|
*
|
|
* Copyright 2013, Sebastian Tschan
|
|
* https://blueimp.net
|
|
*
|
|
* Licensed under the MIT license:
|
|
* https://opensource.org/licenses/MIT
|
|
*/
|
|
|
|
/* global blueimp, $ */
|
|
|
|
$(function () {
|
|
'use strict'
|
|
|
|
// Flickr image types:
|
|
var imageTypes = [
|
|
// https://www.flickr.com/services/api/misc.urls.html
|
|
'sq', // 75x75
|
|
'q', // 150x150
|
|
't', // 100 on longest side
|
|
's', // 240 on longest side
|
|
'n', // 320 on longest side
|
|
'm', // 500 on longest side
|
|
'z', // 640 on longest side
|
|
'c', // 800 on longest side
|
|
'l', // 1024 on longest side
|
|
'h', // 1600 on longest side
|
|
'k', // 2048 on longest side
|
|
'o' // original dimensions
|
|
]
|
|
|
|
// Load demo images from Flickr:
|
|
$.ajax({
|
|
url: 'https://api.flickr.com/services/rest/',
|
|
data: {
|
|
// https://www.flickr.com/services/api/flickr.interestingness.getList.html
|
|
method: 'flickr.interestingness.getList',
|
|
format: 'json',
|
|
extras: 'url_' + imageTypes.join(',url_'),
|
|
// eslint-disable-next-line camelcase
|
|
api_key: '7617adae70159d09ba78cfec73c13be3'
|
|
},
|
|
dataType: 'jsonp',
|
|
jsonp: 'jsoncallback'
|
|
}).done(function (result) {
|
|
var maxWidth = $(document.body).css('max-width')
|
|
var sizes = '(min-width: ' + maxWidth + ') ' + maxWidth + ', 100vw'
|
|
var carouselLinks = []
|
|
var linksContainer = $('#links')
|
|
// Add the demo images as links with thumbnails to the page:
|
|
$.each(result.photos.photo, function (_, photo) {
|
|
var thumbnail = $('<img>')
|
|
.prop('loading', 'lazy')
|
|
.prop('width', photo.width_sq)
|
|
.prop('height', photo.height_sq)
|
|
.prop('src', photo.url_sq)
|
|
.prop('alt', photo.title)
|
|
var srcset = []
|
|
$.each(imageTypes, function (_, type) {
|
|
var url = photo['url_' + type]
|
|
var width = photo['width_' + type]
|
|
if (url) {
|
|
srcset.push(url + ' ' + width + 'w')
|
|
}
|
|
})
|
|
srcset = srcset.join(',')
|
|
$('<a></a>')
|
|
.append(thumbnail)
|
|
.prop('title', photo.title)
|
|
.prop('href', photo.url_l)
|
|
.attr('data-srcset', srcset)
|
|
.attr('data-gallery', '')
|
|
.appendTo(linksContainer)
|
|
carouselLinks.push({
|
|
title: photo.title,
|
|
href: photo.url_l,
|
|
sizes: sizes,
|
|
srcset: srcset
|
|
})
|
|
})
|
|
// Initialize the Gallery as image carousel:
|
|
// eslint-disable-next-line new-cap
|
|
blueimp.Gallery(carouselLinks, {
|
|
container: '#blueimp-image-carousel',
|
|
carousel: true
|
|
})
|
|
})
|
|
|
|
// Initialize the Gallery as video carousel:
|
|
// eslint-disable-next-line new-cap
|
|
blueimp.Gallery(
|
|
[
|
|
{
|
|
title: 'Sintel',
|
|
type: 'video',
|
|
sources: [
|
|
{
|
|
type: 'video/webm',
|
|
src:
|
|
'https://upload.wikimedia.org/wikipedia/commons/f/f1/' +
|
|
'Sintel_movie_4K.webm'
|
|
},
|
|
{
|
|
type: 'video/mp4',
|
|
src: 'https://archive.org/download/Sintel/sintel-2048-surround.mp4'
|
|
},
|
|
{
|
|
type: 'video/ogg',
|
|
src: 'https://archive.org/download/Sintel/sintel-2048-stereo.ogv'
|
|
}
|
|
],
|
|
poster:
|
|
'https://upload.wikimedia.org/wikipedia/commons/d/dc/' +
|
|
'Sintel_1920x1080.png'
|
|
},
|
|
{
|
|
title: 'LES TWINS - An Industry Ahead',
|
|
type: 'text/html',
|
|
youtube: 'zi4CIXpx7Bg'
|
|
},
|
|
{
|
|
title: 'KN1GHT - Last Moon',
|
|
type: 'text/html',
|
|
vimeo: '73686146',
|
|
poster: 'https://secure-a.vimeocdn.com/ts/448/835/448835699_960.jpg'
|
|
}
|
|
],
|
|
{
|
|
container: '#blueimp-video-carousel',
|
|
carousel: true,
|
|
startSlideshow: false
|
|
}
|
|
)
|
|
|
|
$('#fullscreen').change(function () {
|
|
$('#blueimp-gallery').data('fullscreen', this.checked)
|
|
})
|
|
})
|