silverstripe-gallery 

silverstripe-gallery Commit Details

Date:2014-09-26 22:24:42 (6 years 2 months ago)
Author:Nicola Fontana
Branch:dev, master
Commit:880793573a10ce3cccca76b706eae7dcf09ce31b
Parents: afbcba0505010e3d7782b521fcc9d8a37203ec7a
Message:Add support for Colorbox

Allow to zoom the images with a click if Colorbox is present.
Changes:
Ajs/gallery.js (full)
Mtemplates/Includes/ContentGallery.ss (1 diff)
Mtemplates/Includes/Fotorama.ss (1 diff)

File differences

js/gallery.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Avoid data tracking, enabled by default in Fotorama
blockFotoramaData = true;
$(document).ready(function () {
var click = true;
// Add colorbox support to the frames, if possible
if ($.isFunction($.colorbox)) {
var transition;
$('#ss-gallery')
.on('fotorama:show', function () {
transition = true;
})
.on('fotorama:showend', function () {
transition = false;
})
.on('fotorama:load', function (ev, fotorama, extra) {
extra.frame['$stageFrame'].find('.fotorama__img').not('.fotorama__img--full')
.css('cursor', 'zoom-in')
.on('click', function () {
if (transition) return;
$.colorbox({
href: extra.frame.full,
title: extra.frame.caption
});
});
});
click = false;
}
// Enable the Fotorama gallery
$('#ss-gallery').fotorama({
nav: 'thumbs',
click: click,
allowfullscreen: 'native',
width: '100%'
});
});
templates/Includes/ContentGallery.ss
11
22
33
4
5
4
5
66
77
88
<% if $SortedImages %>
<% include Fotorama %>
<div class="row">
<div class="fotorama" data-nav="thumbs" data-width="100%" data-captions="$Captions" data-height="$Top.SlideHeight" data-thumbheight="$Top.StripHeight" data-allowfullscreen="native"><% loop $SortedImages %>
<a data-caption="$Title.ATT" href="$SetHeight($Top.SlideHeight).Link"><img <% with $SetHeight($Top.StripHeight) %>width="$Width" height="$Height" src="$Link"<% end_with %> data-full="$Link"></a><% end_loop %>
<div id="ss-gallery" class="fotorama" data-auto="false" data-captions="$Captions" data-height="$Top.SlideHeight" data-thumbheight="$Top.StripHeight"><% loop $SortedImages %>
<a data-caption="$Title.ATT" data-full="$Link.ATT" href="$SetHeight($Top.SlideHeight).Link.ATT"><% with $SetHeight($Top.StripHeight) %><img width="$Width" height="$Height" src="$Link"><% end_with %></a><% end_loop %>
</div>
</div>
<% end_if %>
templates/Includes/Fotorama.ss
11
2
23
34
<% require javascript(//oss.maxcdn.com/jquery/1.11/jquery.min.js) %>
<% require javascript(gallery/js/gallery.js) %>
<% require javascript(//fotorama.s3.amazonaws.com/4.6.2/fotorama.js) %>
<% require CSS(//fotorama.s3.amazonaws.com/4.6.2/fotorama.css) %>

Archive Download the corresponding diff file