Skip to content

Instantly share code, notes, and snippets.

@sinky
Last active Aug 29, 2015
Embed
What would you like to do?
my-azur.de image gallery in JavaScript
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML 5 Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<p>Das Foto Grid besteht im Grunde aus einfachen Vorschaubildern die mit dem Original verlink sind. Diese Foto-Links sind von einem DIV umgeben welches eine bestimmte CSS Klasse zur Identifizierung hat. Über das Attribute data-layout kann ich jedes mal festlegen welche Zeile wie viele Bilder beinhalten soll und das JS Script macht den Rest. Hier also Zeile Eins 3 Bilder, Zeile Zwei 2 Fotos usw. </p>
<div class="hentry"> <!-- vereinfachter Wordpress Beitrag -->
<h2>Überschrift</h2>
<div class="photoset-grid wide" data-layout="3221">
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130432_0688_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130432_0688_NX3000-720x480.jpg" alt="Tampa Ybor City Cigars" class="alignnone size-large wp-image-14637"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131216_0694_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131216_0694_NX3000-720x480.jpg" alt="20150423131216_0694_NX3000" class="alignnone size-large wp-image-14632"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130050_0685_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130050_0685_NX3000-1440x961.jpg" alt="Tampa Ybor City The Brass Tap" class="alignnone size-large wp-image-14635"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131024_0692_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131024_0692_NX3000-720x480.jpg" alt="Tampa Ybor City Muvico Theaters" class="alignnone size-large wp-image-14638"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131133_0693_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131133_0693_NX3000-720x480.jpg" alt="20150423131133_0693_NX3000" class="alignnone size-large wp-image-14631"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130212_0687_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423130212_0687_NX3000-720x480.jpg" alt="20150423130212_0687_NX3000" class="alignnone size-large wp-image-14636"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131306_0696_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423131306_0696_NX3000-720x480.jpg" alt="Tampa Ybor City 17th Street" class="alignnone size-large wp-image-14633"></a>
<a href="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423132335_0702_NX3000.jpg"><img src="https://s3-eu-central-1.amazonaws.com/myazur-blog/blog/wp-content/uploads/2015/08/20150423132335_0702_NX3000-720x480.jpg" alt="Tampa Ybor City 9/11 Memorial" class="alignnone size-large wp-image-14634"></a>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function loadJS(src, cb) {
"use strict";
var ref = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = src;
script.async = true;
ref.parentNode.insertBefore(script, ref);
if (cb && typeof (cb) === "function") {
script.onload = cb;
}
return script;
}
// jQuery Stuff
$(function () {
// Hat die aktuelle Seite ein Element mit der passenden CSS Klasse und data-layout Attribut?
if ($('.photoset-grid[data-layout]').length) {
// Script Laden und Callback Funktion aufrufen
loadJS("https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js", function () {
// Hier hätte man auch auf das "each" verzichten können und direkt $('.photoset-grid[data-layout]').photosetGrid(... aufrufen können. Aber ich wollte eine Referenz zum DIV haben, um sie in den nachfolgenden Funktionen zu verwenden.
$('.photoset-grid[data-layout]').each(function () {
$thatPhotoset = $(this);
// photosetGrid Aufruf
$thatPhotoset.photosetGrid({
gutter: '5px',
highresLinks: true,
onInit: function () {
$thatPhotoset.find('br').remove();
// Das Script erwartet nur Bilder im DIV. Also ohne Link und die URL zum großen Bild kann im Attribute data-highres stehen. Durch den oben gesetzten Parameter highresLinks verlinkt das Script die Bilder dann selbst. Da ich die Bilder aber schon selbst verlinkt habe (bzw. die WP Mediathek) muss ich die URL aus dem Link in das Attribut des Bildes übertragen und den Link vom Bild mittel unwrap löschen.
$thatPhotoset.find('> a').each(function () {
$(this).find('img').attr('data-highres', $(this).attr('href')).unwrap();
});
},
onComplete: function () {
// Element Style vom DIV entfernen
$thatPhotoset.attr('style', '');
}
}); // Ende: photosetGrid
}); // Ende: each .photoset-grid[data-layout]
}); // Ende: Callback loadJS
} // Ende: IF
// auch hier wieder nur JS nachladen wenn es verlinkte Bilder gibt.
if ($('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').length) {
loadJS("https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js", function () {
// hierfür laden wir noch ein Stylesheet
$('<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.css" />').appendTo('head');
// für jeden Wordpress Beitrag einen magnificPopup aufruf. Damit kann man nur die Bilder eines Beitrags durchklicken.
$('.hentry').each(function () { // add event listener to links
$(this).magnificPopup({
delegate: 'a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]',
type: 'image',
gallery: {
enabled: true,
},
fixedContentPos: true,
removalDelay: 300,
mainClass: 'mfp-fade'
}); // Ende: magnificPopup
}); // Ende: each .hentry
});
} // Ende: If
}); // Ende: jQuery
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment