Bootstrap Image Gallery
Sebastian Tschan
Wersja: 3.1.1
Numer wersji wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Strona wtyczki
Oficjalna witryna wtyczki
Github
Repozytorium Github
Wersja jQuery: jquery >=1.9.0
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Demo
Oficjalne demo wtyczki
Zobacz więcej
Bootstrap Image Gallery
Autor | Sebastian Tschan |
Wersja: | 3.1.1 |
Dokumentacja: | Dokumentacja |
Strona wtyczki: | Strona wtyczki |
Github: | Github |
Wersja jQuery: | jquery >=1.9.0 |
Licencja: | MIT |
Demo: | Demo |
Wymagane wtyczki: | blueimp-gallery >=2.12.0 |
Zgłoś błąd: | Zgłoś błąd |
Data opublikowania: | 2014-07-02 |
Historia wersji
Wersja | Data publikacji |
---|---|
3.1.1 | 2014-07-02 |
3.1.0 | 2013-11-12 |
3.0.1 | 2013-10-18 |
3.0.0 | 2013-10-12 |
Plugin wyświetla obrazy i wideo w oknie modalnym, które może być dostosowane, aby wyświetlić różne typy zawartości w tym obrazy i wideo.
Posiada obsługę myszy i klawiatury dla łatwiejszej nawigacji.
Tagi
Instalacja
- Biblioteki
- HTML
- JS
<link href="bootstrap-image-gallery.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="bootstrap-image-gallery.min.js"></script>
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
$(function () {
'use strict'
// Load demo images from flickr:
$.ajax({
// Flickr API is SSL only:
// https://code.flickr.net/2014/04/30/flickr-api-going-ssl-only-on-june-27th-2014/
url: 'https://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: '7617adae70159d09ba78cfec73c13be3' // jshint ignore:line
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (result) {
var linksContainer = $('#links')
var baseUrl
// Add the demo images as links with thumbnails to the page:
$.each(result.photos.photo, function (index, photo) {
baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret
$('<a/>')
.append($('<img>').prop('src', baseUrl + '_s.jpg'))
.prop('href', baseUrl + '_b.jpg')
.prop('title', photo.title)
.attr('data-gallery', '')
.appendTo(linksContainer)
})
})
$('#borderless-checkbox').on('change', function () {
var borderless = $(this).is(':checked')
$('#blueimp-gallery').data('useBootstrapModal', !borderless)
$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', borderless)
})
$('#fullscreen-checkbox').on('change', function () {
$('#blueimp-gallery').data('fullScreen', $(this).is(':checked'))
})
$('#image-gallery-button').on('click', function (event) {
event.preventDefault()
blueimp.Gallery($('#links a'), $('#blueimp-gallery').data())
})
$('#video-gallery-button').on('click', function (event) {
event.preventDefault()
blueimp.Gallery([
{
title: 'Sintel',
href: 'https://archive.org/download/Sintel/sintel-2048-surround_512kb.mp4',
type: 'video/mp4',
poster: 'https://i.imgur.com/MUSw4Zu.jpg'
},
{
title: 'Big Buck Bunny',
href: 'https://upload.wikimedia.org/wikipedia/commons/7/75/' +
'Big_Buck_Bunny_Trailer_400p.ogg',
type: 'video/ogg',
poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/' +
'Big.Buck.Bunny.-.Opening.Screen.png/' +
'800px-Big.Buck.Bunny.-.Opening.Screen.png'
},
{
title: 'Elephants Dream',
href: 'https://upload.wikimedia.org/wikipedia/commons/transcoded/8/83/' +
'Elephants_Dream_%28high_quality%29.ogv/' +
'Elephants_Dream_%28high_quality%29.ogv.360p.webm',
type: 'video/webm',
poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/' +
'Elephants_Dream_s1_proog.jpg/800px-Elephants_Dream_s1_proog.jpg'
},
{
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'
}
], $('#blueimp-gallery').data())
})
})
Inne tego autora