Update all assets
This commit is contained in:
@@ -1,140 +1,140 @@
|
||||
/*
|
||||
* 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)
|
||||
})
|
||||
})
|
||||
/*
|
||||
* 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)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user