Search the Community

Beispiel: Youtube-Video in einer Lightbox abspielen die fancybox hier downloaden: http://fancyapps.com/fancybox/#license Dateien entpacken. Im root-Verzeichnis auf dem Server ein neues Verzeichnis "fancybox" erstellen. Aus dem Ordner "source" folgende Datein dorthin hochladen: jquery.fancybox.js jquery.fancybox.css [email protected] fancybox_sprite.png fancybox_overlay.png [email protected] fancybox_loading.gif blank.gif Zusätzlich noch aus dem Ordner "helpers" was benötigt wird. In diesem Fall ist es die Datei jqery.fancybox-media.js, die ich in das gleiche Verzeichnis hochlade wie die übrigen. Jetzt geht ihr in "prestashop/themes" und öffnet den Ordner zu eurem Theme, z. B. "default". Hier nun die Datei "header.tpl" dowloaden und mit einem Programm deiner Wahl öffnen (z. B. Netbeans, Dreamweaver, phpStorm,... oder dem normalen Texteditor) Hier nun folgende Zeilen unter {$HOOK_HEADER} einfügen*: <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-media.js"></script> <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" /> <script type="text/javascript">// <![CDATA[ $(document).ready(function() { $(".fancybox-media").fancybox(); $('.fancybox-media') .attr('rel', 'media-gallery') .fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', arrows : false, helpers : { media : {}, buttons : {} } }); }); // ]]></script> * Warum darunter? In diesem Hook wird jquery eingebunden: <script type="text/javascript" src="/prestashop/js/jquery/jquery-1.7.2.min.js"></script> Die fancybox basiert ja auf jquery. Wenn man die Dateien nun oberhalb dieser Zeile einbindet, ist also noch kein jquery vorhanden und die fancybox wird nicht funktionieren. So, jetzt (natürlich!) speichern und wieder hochladen. ;-) Nun auf einer beliebigen Seite im CMS im Bearbeitungsmodus den Button mit HTML drücken, und einen Link wie z. Bsp.: <a class="fancybox-media" href="http://www.youtube.com/watch?v=JW5meKfy3fY&rel=0">Ich bin eine Video Lightbox!!!</a> Wichtig ist, dass der Link die Klasse "fancybox-media" enthält. Der Link kann genauso gut zu vimeo, metacafe uvm. gehen. Alle Verwendungsmöglichkeiten sind hier aufgelistet: http://fancyapps.com/fancybox/#examples Die fancybox kann für alle Versionen von prestashop verwendet werden.