first commit
This commit is contained in:
Julieñ
@@ -0,0 +1,303 @@
|
||||
(function($) {
|
||||
|
||||
$(function() {
|
||||
|
||||
var $window = $(window),
|
||||
$body = $('body'),
|
||||
$wrapper = $('#wrapper');
|
||||
|
||||
// Add (and later, on load, remove) "loading" class.
|
||||
$body.addClass('loading');
|
||||
if( document.readyState != 'loading' ) {
|
||||
window.setTimeout(function() {
|
||||
$body.removeClass('loading');
|
||||
}, 100);
|
||||
} else {
|
||||
$window.on('load', function() {
|
||||
window.setTimeout(function() {
|
||||
$body.removeClass('loading');
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Prevent transitions/animations on resize.
|
||||
var resizeTimeout;
|
||||
|
||||
$window.on('resize', function() {
|
||||
|
||||
window.clearTimeout(resizeTimeout);
|
||||
|
||||
$body.addClass('resizing');
|
||||
|
||||
resizeTimeout = window.setTimeout(function() {
|
||||
$body.removeClass('resizing');
|
||||
}, 100);
|
||||
|
||||
});
|
||||
|
||||
// Scroll back to top.
|
||||
$window.scrollTop(0);
|
||||
|
||||
// Fix: Placeholder polyfill.
|
||||
$('form').placeholder();
|
||||
|
||||
// Panels.
|
||||
var $panels = $('.panel');
|
||||
|
||||
$panels.each(function() {
|
||||
|
||||
var $this = $(this),
|
||||
$toggles = $('[href="#' + $this.attr('id') + '"]'),
|
||||
$closer = $('<div class="closer" />').appendTo($this);
|
||||
|
||||
// Closer.
|
||||
$closer
|
||||
.on('click', function(event) {
|
||||
$this.trigger('---hide');
|
||||
});
|
||||
|
||||
// Events.
|
||||
$this
|
||||
.on('click', function(event) {
|
||||
event.stopPropagation();
|
||||
})
|
||||
.on('---toggle', function() {
|
||||
|
||||
if ($this.hasClass('active'))
|
||||
$this.triggerHandler('---hide');
|
||||
else
|
||||
$this.triggerHandler('---show');
|
||||
|
||||
})
|
||||
.on('---show', function() {
|
||||
|
||||
// Hide other content.
|
||||
if ($body.hasClass('content-active'))
|
||||
$panels.trigger('---hide');
|
||||
|
||||
// Activate content, toggles.
|
||||
$this.addClass('active');
|
||||
$toggles.addClass('active');
|
||||
|
||||
// Activate body.
|
||||
$body.addClass('content-active');
|
||||
|
||||
})
|
||||
.on('---hide', function() {
|
||||
|
||||
// Deactivate content, toggles.
|
||||
$this.removeClass('active');
|
||||
$toggles.removeClass('active');
|
||||
|
||||
// Deactivate body.
|
||||
$body.removeClass('content-active');
|
||||
|
||||
});
|
||||
|
||||
// Toggles.
|
||||
$toggles
|
||||
.removeAttr('href')
|
||||
.css('cursor', 'pointer')
|
||||
.on('click', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$this.trigger('---toggle');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Global events.
|
||||
$body
|
||||
.on('click', function(event) {
|
||||
|
||||
if ($body.hasClass('content-active')) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$panels.trigger('---hide');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$window
|
||||
.on('keyup', function(event) {
|
||||
|
||||
if (event.keyCode == 27
|
||||
&& $body.hasClass('content-active')) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$panels.trigger('---hide');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Footer.
|
||||
var $footer = $('#footer');
|
||||
|
||||
// Main.
|
||||
var $main = $('#main');
|
||||
|
||||
// Thumbs.
|
||||
$main.children('.thumb').each(function() {
|
||||
|
||||
var $this = $(this),
|
||||
$image = $this.find('.image'), $image_img = $image.children('img'),
|
||||
x;
|
||||
|
||||
// No image? Bail.
|
||||
if ($image.length == 0)
|
||||
return;
|
||||
|
||||
// Image.
|
||||
// This sets the background of the "image" <span> to the image pointed to by its child
|
||||
// <img> (which is then hidden). Gives us way more flexibility.
|
||||
|
||||
// Set background.
|
||||
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
|
||||
|
||||
// Set background position.
|
||||
if (x = $image_img.data('position'))
|
||||
$image.css('background-position', x);
|
||||
|
||||
// Hide original img.
|
||||
$image_img.hide();
|
||||
|
||||
});
|
||||
|
||||
// Thumbs Index.
|
||||
$main.children('.thumb').each(function() {
|
||||
|
||||
var $this = $(this),
|
||||
$link = $this.find('.link'), $link_img = $link.children('img'),
|
||||
x;
|
||||
|
||||
// No link? Bail.
|
||||
if ($link.length == 0)
|
||||
return;
|
||||
|
||||
// link.
|
||||
// This sets the background of the "link" <span> to the link pointed to by its child
|
||||
// <img> (which is then hidden). Gives us way more flexibility.
|
||||
|
||||
// Set background.
|
||||
$link.css('background-image', 'url(' + $link_img.attr('src') + ')');
|
||||
|
||||
// Set background position.
|
||||
if (x = $link_img.data('position'))
|
||||
$link.css('background-position', x);
|
||||
|
||||
// Hide original img.
|
||||
$link_img.hide();
|
||||
});
|
||||
|
||||
var gallery_items = $(".gallery-item").sort(
|
||||
function(item_a, item_b){
|
||||
return item_a.getAttribute("gallery_index") -
|
||||
item_b.getAttribute("gallery_index");
|
||||
}
|
||||
);
|
||||
gallery_items.magnificPopup({
|
||||
type: "image",
|
||||
mainClass: "mfp-img-mobile",
|
||||
image: {
|
||||
titleSrc: function(item) {
|
||||
let caption = '';
|
||||
if(item.el.attr("downloadable") == "true"){
|
||||
caption += '<div title="Download" ' +
|
||||
'class="download-button"><a href="' +
|
||||
item.el.attr("download_file") + '" download="' +
|
||||
item.el.attr("orig_name") +
|
||||
'"><i class="fa fa-download"></i></a></div>';
|
||||
}
|
||||
caption += '<div class="caption-surround">';
|
||||
if( item.el.attr("phototitle") != "" ) {
|
||||
caption += "<h2>" + item.el.attr("phototitle") + "</h2>";
|
||||
}
|
||||
if( item.el.attr("description") != "" ) {
|
||||
caption += '<div class="description">' +
|
||||
item.el.attr("description") + "</div>";
|
||||
}
|
||||
let tax_elem = item.el.parent().find(".caption_tax");
|
||||
if( tax_elem.length > 0 ) {
|
||||
caption += tax_elem[0].outerHTML;
|
||||
}
|
||||
caption += "</div>";
|
||||
return caption;
|
||||
},
|
||||
},
|
||||
gallery:{
|
||||
enabled:true,
|
||||
arrowMarkup: '<button title="%title%" class="nav-%dir%"></button>',
|
||||
},
|
||||
callbacks: {
|
||||
change: function() {
|
||||
// Replace the current history state with a URL with
|
||||
// a new hash part. The hash part tells the site to load
|
||||
// a specific image in fullscreen. Replacing the history
|
||||
// causes the back and forward buttons to now go to the
|
||||
// URL with the hash version... Simply changing the URL
|
||||
// will instead cause a browser to add a new URL to the
|
||||
// history with the hash part. Then if you look at a ton
|
||||
// of images on one page, they'll all clutter up your history
|
||||
// and you'll have to back through them all to get back to
|
||||
// what seems like the previous page. I think this
|
||||
// replaceState version is a better behavior.
|
||||
const hash = "#" + this.currItem.el.attr("id");
|
||||
window.history.replaceState(undefined, undefined, hash);
|
||||
},
|
||||
close: function() {
|
||||
// Clear the hash part without adding new things to the history
|
||||
window.history.replaceState(undefined, undefined, "");
|
||||
},
|
||||
},
|
||||
fixedContentPos: true,
|
||||
});
|
||||
|
||||
// If there's a fragment id, see if it's an image index
|
||||
// If it is, and it's really a gallery_item then click on it
|
||||
let click_hash = function () {
|
||||
let fid = $(window.location.hash);
|
||||
if( fid.length == 1 &&
|
||||
(
|
||||
fid[0].classList.contains("gallery-item") ||
|
||||
fid[0].classList.contains("gallery-item-marker")
|
||||
)
|
||||
) {
|
||||
let curr_item = $.magnificPopup.instance.currItem;
|
||||
if( curr_item &&
|
||||
curr_item.el.attr("id") == fid[0].id )
|
||||
{
|
||||
// Nothing needs to happen in this case...
|
||||
return false;
|
||||
} else
|
||||
{
|
||||
// Otherwise we need to update the popup, so click it
|
||||
fid.click();
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// Some other hash was present, let the browser handle it
|
||||
$.magnificPopup.close();
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check the fragment id at load
|
||||
if( window.location.hash != "" ) {
|
||||
click_hash();
|
||||
}
|
||||
|
||||
// Check the fragment id on hashchange
|
||||
$(window).on("hashchange", click_hash);
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user