235 lines
5.9 KiB
JavaScript
235 lines
5.9 KiB
JavaScript
$( function()
|
|
{
|
|
// ACTIVITY INDICATOR
|
|
|
|
var activityIndicatorOn = function()
|
|
{
|
|
$( '<div id="imagelightbox-loading"><div></div></div>' ).appendTo( 'body' );
|
|
},
|
|
activityIndicatorOff = function()
|
|
{
|
|
$( '#imagelightbox-loading' ).remove();
|
|
},
|
|
|
|
|
|
// OVERLAY
|
|
|
|
overlayOn = function()
|
|
{
|
|
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
|
|
},
|
|
overlayOff = function()
|
|
{
|
|
$( '#imagelightbox-overlay' ).remove();
|
|
},
|
|
|
|
|
|
// CLOSE BUTTON
|
|
|
|
closeButtonOn = function( instance )
|
|
{
|
|
$( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
|
|
},
|
|
closeButtonOff = function()
|
|
{
|
|
$( '#imagelightbox-close' ).remove();
|
|
},
|
|
|
|
|
|
// CAPTION
|
|
|
|
captionOn = function()
|
|
{
|
|
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
|
|
if( description.length > 0 )
|
|
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
|
|
},
|
|
captionOff = function()
|
|
{
|
|
$( '#imagelightbox-caption' ).remove();
|
|
},
|
|
|
|
|
|
// NAVIGATION
|
|
|
|
navigationOn = function( instance, selector )
|
|
{
|
|
var images = $( selector );
|
|
if( images.length )
|
|
{
|
|
var nav = $( '<div id="imagelightbox-nav"></div>' );
|
|
for( var i = 0; i < images.length; i++ )
|
|
nav.append( '<button type="button"></button>' );
|
|
|
|
nav.appendTo( 'body' );
|
|
nav.on( 'click touchend', function(){ return false; });
|
|
|
|
var navItems = nav.find( 'button' );
|
|
navItems.on( 'click touchend', function()
|
|
{
|
|
var $this = $( this );
|
|
if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
|
|
instance.switchImageLightbox( $this.index() );
|
|
|
|
navItems.removeClass( 'active' );
|
|
navItems.eq( $this.index() ).addClass( 'active' );
|
|
|
|
return false;
|
|
})
|
|
.on( 'touchend', function(){ return false; });
|
|
}
|
|
},
|
|
navigationUpdate = function( selector )
|
|
{
|
|
var items = $( '#imagelightbox-nav button' );
|
|
items.removeClass( 'active' );
|
|
items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
|
|
},
|
|
navigationOff = function()
|
|
{
|
|
$( '#imagelightbox-nav' ).remove();
|
|
},
|
|
|
|
|
|
// ARROWS
|
|
|
|
arrowsOn = function( instance, selector )
|
|
{
|
|
var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );
|
|
|
|
$arrows.appendTo( 'body' );
|
|
|
|
$arrows.on( 'click touchend', function( e )
|
|
{
|
|
e.preventDefault();
|
|
|
|
var $this = $( this ),
|
|
$target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
|
|
index = $target.index( selector );
|
|
|
|
if( $this.hasClass( 'imagelightbox-arrow-left' ) )
|
|
{
|
|
index = index - 1;
|
|
if( !$( selector ).eq( index ).length )
|
|
index = $( selector ).length;
|
|
}
|
|
else
|
|
{
|
|
index = index + 1;
|
|
if( !$( selector ).eq( index ).length )
|
|
index = 0;
|
|
}
|
|
|
|
instance.switchImageLightbox( index );
|
|
return false;
|
|
});
|
|
},
|
|
arrowsOff = function()
|
|
{
|
|
$( '.imagelightbox-arrow' ).remove();
|
|
};
|
|
|
|
// ALL COMBINED
|
|
|
|
var selector = 'a[data-imagelightbox="combined"]';
|
|
var instance = $( selector ).imageLightbox(
|
|
{
|
|
onStart: function() { overlayOn(); navigationOn( instance, selector );closeButtonOn( instance ); arrowsOn( instance, selector ); },
|
|
onEnd: function() { overlayOff(); navigationOff(); captionOff(); closeButtonOff(); arrowsOff(); activityIndicatorOff(); },
|
|
onLoadStart: function() { captionOff(); activityIndicatorOn(); },
|
|
onLoadEnd: function() { navigationUpdate( selector ); captionOn(); activityIndicatorOff(); $( '.imagelightbox-arrow' ).css( 'display', 'block' ); }
|
|
});
|
|
|
|
});
|
|
|
|
/*
|
|
* Splitter
|
|
*/
|
|
(function($) {
|
|
$.fn.sorted = function(customOptions) {
|
|
var options = {
|
|
reversed: false,
|
|
by: function(a) {
|
|
return a.text();
|
|
}
|
|
};
|
|
$.extend(options, customOptions);
|
|
|
|
$data = $(this);
|
|
arr = $data.get();
|
|
arr.sort(function(a, b) {
|
|
|
|
var valA = options.by($(a));
|
|
var valB = options.by($(b));
|
|
if (options.reversed) {
|
|
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
|
|
} else {
|
|
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
|
|
}
|
|
});
|
|
return $(arr);
|
|
};
|
|
|
|
})(jQuery);
|
|
|
|
$(function() {
|
|
var $preferences = {
|
|
duration: 800,
|
|
easing: 'easeInOutQuad',
|
|
adjustHeight: false
|
|
};
|
|
|
|
var $list = $('#list');
|
|
var $data = $list.clone();
|
|
|
|
var $controls = $('nav.splitter ul');
|
|
|
|
$controls.each(function(i) {
|
|
|
|
var $control = $(this);
|
|
var $buttons = $control.find('a');
|
|
|
|
$buttons.on('click', function(e) {
|
|
|
|
var $button_container = $(this).parent();
|
|
var selected = $button_container.hasClass('active');
|
|
var button_segment = $button_container.attr('data-segment');
|
|
|
|
if (!selected) {
|
|
|
|
$buttons.parent().removeClass('active');
|
|
$button_container.addClass('active');
|
|
|
|
var sorting_type = $controls.eq(1).find('.active a').attr('data-value');
|
|
var sorting_kind = $controls.eq(0).find('.active a').attr('data-value');
|
|
|
|
if (sorting_kind == 'all') {
|
|
var $filtered_data = $data.find('li');
|
|
} else {
|
|
var $filtered_data = $data.find('li.' + sorting_kind);
|
|
}
|
|
|
|
if (sorting_type == 'size') {
|
|
var $sorted_data = $filtered_data.sorted({
|
|
by: function(v) {
|
|
return parseFloat($(v).find('span').text());
|
|
}
|
|
});
|
|
} else {
|
|
var $sorted_data = $filtered_data.sorted({
|
|
by: function(v) {
|
|
return $(v).find('strong').text().toLowerCase();
|
|
}
|
|
});
|
|
}
|
|
|
|
$list.quicksand($sorted_data, $preferences);
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
});
|
|
|
|
});
|
|
});
|
|
|