Skip to content

Instantly share code, notes, and snippets.

@laurendavissmith
Created March 28, 2013 14:16
Show Gist options
  • Save laurendavissmith/5263440 to your computer and use it in GitHub Desktop.
Save laurendavissmith/5263440 to your computer and use it in GitHub Desktop.
clicking images inside albums to launch lightbox for the Boulevard theme
<koken:if false="pjax">
<koken:include file="inc/head.html" />
</koken:not>
<koken:load infinite="true">
<koken:head>
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:title" content="{{ album.title strip_html="true" }}" />
<meta property="og:description" content="{{ album.summary strip_html="true" }}" />
<meta property="og:type" content="website" />
<koken:loop data="album.covers">
<meta property="og:image" content="{{ content.presets.medium.url }}" />
</koken:loop>
</koken:head>
<koken:if false="pjax">
<koken:include file="inc/header-album.html" />
<div id="lane">
</koken:not>
<koken:if true="settings.album_show_intro">
<div id="album-intro" class="cell">
<div class="wrap">
<h1>
{{ album.title }}
</h1>
{{ album.description paragraphs="true" }}
</div>
</div>
</koken:if>
<koken:loop>
<div class="cell">
<koken:link lightbox="true"><koken:img lazy="true" fade="true" respond_to="height" /></koken:link>
<koken:if true="settings.show_image_caption">
<span class="caption">
{{ content.title }}
</span>
</koken:if>
</div>
</koken:loop>
<koken:if false="pjax">
</div>
</koken:not>
</koken:load>
<koken:if false="pjax">
<koken:include file="inc/footer.html" />
</koken:not>
$(function() {
$('nav ul').tinyNav({ header: 'Navigation' });
$('#lane').css({
top: ( $('header').css('display') === 'none' || $('header').css('visibility') === 'hidden' ) ? '0px' : $('header').height() + 'px',
width: '99999px' // prevents jumpiness when defining width after images load
});
window.addEventListener( 'orientationchange', function() {
window.setTimeout(function() {
$('#lane').css( 'top', ( $('header').css('display') === 'none' || $('header').css('visibility') === 'hidden' ) ? '0px' : $('header').height() + 'px' );
},500)
return false;
});
var imgsLoaded = [],
totalImgs = $('#lane img').length,
totalWidth = 0,
imgViewing = 0,
imgOffsets = [],
firstRun = true,
allImagesLoaded = false;
if ($.support.pjax) {
if ($('#album-intro').length <= 0) {
$(document).on('click', '#lane a', function() {
if ($('#lane').length) {
var self = $(this);
// Write the album title or remove it
if ( $(this).closest('#lane').length > 0 ) {
$('hgroup h2').html( '/&nbsp;' + $(this).text().trim());
} else {
$('hgroup h2').html('');
}
//
$.pjax({
url: self.attr('href'),
container: '#lane',
success: function() {
window.scrollTo(0,0);
imgsLoaded = [];
totalImgs = $('#lane img').length;
totalWidth = 0;
imgViewing = 0;
imgOffsets = [];
firstRun = true;
allImagesLoaded = false;
$K.ready();
setupLaneHandler();
}
});
return false;
}
});
}
}
$(document).on('pjax:complete', function() {
if ($('#album-intro').length > 0) {
$('hgroup h2').html( '/&nbsp;' + $('#album-intro h1').text().trim());
}
});
var scrollTo = function() {
if ( imgViewing >= totalImgs ) {
imgViewing = ( totalImgs - 1 );
} else if ( imgViewing < 0 ) {
imgViewing = 0;
}
var newLeftPos = $('#lane img:eq(' + imgViewing + ')').closest('.cell').offset().left;
$('html,body').stop().animate({
scrollLeft: ( newLeftPos - 80 )
}, 400, function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
});
}
var updateLaneWidth = function(width) {
var width = 0,
offset = ( $('#album-intro').length <= 0 ) ? 0 : $('#album-intro').outerWidth(true); // Adjust for albums which have a text box at the beginning
$('#lane img').each(function() {
width += $(this).closest('.cell').outerWidth(true);
});
$('#lane').css( 'width', (width+offset) + 'px' );
}
var setupLaneHandler = function() {
window.setTimeout(function() {
$('#lane img')
.each(function(i,img) {
if ( !this.complete ) {
$(this).on('load', function() {
if ( i === ($('#lane img').length-1) ) {
updateLaneWidth();
}
});
} else {
if ( i === ($('#lane img').length-1) ) { updateLaneWidth(); }
}
});
$(window).trigger('resize');
},1); // Do not use 0 here
}
setupLaneHandler();
$(window).on('k-infinite-loaded', function() {
window.setTimeout(function() {
setupLaneHandler();
},1);
});
$(document).scroll(function() {
$('#lane img').each(function(i,img) {
if ( $(this).closest('.cell').offset().left > $(window).scrollLeft() ) {
imgViewing = i;
return false;
}
});
});
$('#next,#prev').on('click', function() {
var id = $(this).attr('id');
imgViewing += ( id === 'next' ) ? 1 : -1;
scrollTo();
return false;
});
});
@rdewind
Copy link

rdewind commented May 16, 2013

Tried this but sadly enough because of the "prev. and next" script, even though the links have changed all i get when clicking on the image is that it either goes to the next or previous image in place of opening the clicked image in lightbox.
using koken 0.8.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment