Another Blog about the Wide Web World
Header image

Ihr habt bereits Fancybox 3 (komplett responsive und touchfähig) im Einsatz und möchtet den Pin It Button einfügen? Solange ihr auf eurer Seite nur Thumbnails einbindet und die großen Bilder erst in der Lightbox geladen werden, sollten eure Nutzer die Möglichkeit in der Fancybox erhalten eure Bilder zu pinnen.

Und so geht’s:

Schritt 1:

Füge das JavaScript vor dem schließenden body Tag ein.

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Schritt 2:

Danach fügt ihr Fancybox laut dieser Anleitung ein. 

Schritt 3:

Ich füge den Pin It Button in die Beschreibung des Bildes ein. Ist eine Beschreibung vorhanden, wird diese erweitert.

Dazu habe ich folgenden Code geschrieben:



$(".fancybox").fancybox({
		caption : function( instance, item ) {
			var caption, link;

			if ( item.type === 'image' ) {
				var caption = $(this).data('caption');
				
				if (caption) {
					//set description to current title
					//this will set what posts
					var description = $(this).data('caption');
					//add pinterest button for title
					pin = '<a data-pin-do="buttonPin" data-pin-tall="true" data-pin-save="false" href="https://pinterest.com/pin/create/button/?url=' +
					encodeURIComponent(document.location.href) +
					'&amp;amp;amp;media=' +
					//put the path to the image you want to share here
					encodeURIComponent(this.href) +
					'&amp;amp;amp;description=' + description + '"><img src="/fileadmin/templates/img/pinterest.png" /></a>'
					//add title information
					+ '&amp;amp;amp;nbsp;<span>' + $(this).data('caption') + '</span>';
					return pin;
				} else {
					//add pinterest button for title
					caption = '<a data-pin-do="buttonPin" data-pin-tall="true" data-pin-save="false" href="https://pinterest.com/pin/create/button/?url=' + 
					encodeURIComponent(document.location.href) +
					'&amp;amp;amp;media=' +
					encodeURIComponent(this.href) +
					'&amp;amp;amp;description=Pin%20von%20finca-ferienhaus.de%20Ferienh%C3%A4user%20und%20Fincas%20auf%20Mallorca"><img src="/fileadmin/templates/img/pinterest.png" /></a>';
					return caption;
				}

				
			}
		}
		
	});


Dieser muss natürlich in euren document ready Aufruf.

$(document).ready(function () { hier den oben gennanten Code einfügen });

Die Standard Beschreibung des Pins müsst ihr natürlich gegen die Beschreibung eurer Website austauschen. Außerdem habe ich mir einen eigenen Button erstellt.

Und so sieht es dann aus:

Fancybox 3 mit einem Pinterest Button

Ich musste viel probieren, bis ich zu einer geeigneten Lösung kam. Mein IST Zustand: Ich habe über einen Link eine Slideshow mit der Fancybox geöffnet. In dem iframe befand sich eine “ganz normale” Seite (eigenes Template in TYPO3). Nun wollte, dass sich die Fancybox auch schließt, wenn ich auf einen bestimmten Link klicke.

Etliche Aufrufe über eine Funktion haben nicht geklappt. Erfolg brachte onclick:

onclick="window.top.$.fancybox.close();"

Danke an Bastian Bringenberg.