Last active
August 29, 2015 14:27
-
-
Save sinky/2b03c1874ac36765906b to your computer and use it in GitHub Desktop.
my-azur.de image gallery in JavaScript
This file contains 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
| <!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