Created
March 28, 2013 14:16
-
-
Save laurendavissmith/5263440 to your computer and use it in GitHub Desktop.
clicking images inside albums to launch lightbox for the Boulevard theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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( '/ ' + $(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( '/ ' + $('#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; | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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