fancybox verwenden

[Tango88]

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.

 

 

 

 

Edited February 5, 2014 by Tango88 (see edit history)

[Lockesoft]

Und warum den Ganzen Aufwand?

Die Fancybox ist doch bereits im Shop vorhanden und wird auch an mehreren Stellen verwendet. Also warum das ganze nochmal hochladen?

 

Für die Einbindung auf allen Seiten hat Simon /"Blutiges" doch schon ein kostenloses Modul im passenden Bereich des Forums veröffentlicht.

Also auch hier kein wirklicher Bedarf etwas zu tun..

 

LG Klaus / Lockesoft

[Tango88]

Und warum den Ganzen Aufwand?

Die Fancybox ist doch bereits im Shop vorhanden und wird auch an mehreren Stellen verwendet. Also warum das ganze nochmal hochladen?

Sry, aber ich habe lang recherchiert, dass die fancybox bereits in Prestashop verwendet wird, ist mir nicht aufgefallen... außerdem müsste sie ja dann funktioneren wenn ich lediglich noch diese Zeile

<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>

hinzufüge, theoretisch bräuchte es noch nichtmal das weil die box ja schon initalisiert sein müsste...

 

Es funktioniert aber nicht.   Wo finde ich denn eine Doku wie ich die fancybox innerhalb von prestashop verwenden kann (für alle möglichen Zwecke), die Doku der fancybox selbst hilft ja nicht weiter wenn man nicht genauso vorgeht wie oben beschrieben.

 

 

Für die Einbindung auf allen Seiten hat Simon /"Blutiges" doch schon ein kostenloses Modul im passenden Bereich des Forums veröffentlicht.

 

hab ich leider nicht gefunden. Weder bevor ich das Tut geschrieben hab noch gerade eben. (Außerdem frage ich mich wieso ich dieses Modul brauche??? Für die 10 Zeilen Code im header? )

 

Aber jetz mal was ganz anderes:

Warum hast du nicht schon bei deiner letzten Antwort auf eine Frage von mir zu diesem Thema geschrieben dass die fancybox schon drin ist und wie ich sie benutzen kann???????

 

Ist echt nicht böse gemeint, aber mir schien das so die beste Lösung. Ich lasse mich natürlich belehren, aber der, der es tut muss mit Rückfragen rechnen

 

 

LG Tango

[Lockesoft]

Hmmh, das warum....

 

Warum wird Simons Modul benötigt? Einfach, weil das JavaScript nicht standardmäßig auf jeder Seite mitgeladen wird...

Sicher, das geht auch ohne Extramodul, natürlich kann man den Aufruf auch von Hand in die header.tpl bringen. Aber warum soll man das kompliziert machen, wenn es auch einfach geht.

Ja, man kann ein derartiges Modul auch mit ein wenig Ahnung selber schreiben. Keine Frage, muss ich dennoch jedes mal das Rad neu erfinden?

 

Warum gehen manchmal Postings unter?

 

Hier kann ich nur für mich sprechen, vermute aber, dass es den anderen da auch nicht anders geht...

Ich persönlich lese jedes Posting im deutschen Forum. nicht bei allen weiss ich Rat. Manche würde ich gerne nach ein wenig Recherche beantworten wollen...

In den meisten Foren gibt es eine Funktion die auch gelesene Postings als neu markiert.

Hier gibt es das nicht. Wenn ich also etwas später beantworten möchte, muss ich mir das selber merken.

Jetzt habe ich aber auch noch ein Leben neben dem Forum.

Manchmal sogar bezahlter Support. :-)

Nun, streckenweise sind die Anfragen hier einfach nicht weit genug oben in der ToDo-liste.

Mehr nicht.

Und manchmal schreibt man auch zu zwei ähnlichen Fragen, manchmal auch nicht.

Letztlich ist das hier alles auf freiwilliger Basis.

Auch wenn manch einer offen sichtlich glaubt dass es eine Verpflichtung zu einer persönlichen Beratung gibt...

 

Nochmals Sorry.

Auch hier sehe ich das so.:

Ich gehe davon aus, das man entweder ein bischen Ahnung hat, oder kompetente Helfer....

Ebenfalls denke ich, dass man sich ersteinmal in seinem Shop gründlich umsehen sollte. Manchmal haben die Fragen dann plötzlich auch Antworten.

 

LG Klaus / Lockrsoft

[Tango88]

@all: Vergesst die fancybox, bzw diese Anleitung.
Entweder das Modul von "Blutiges" nehmen

 

ODER

 

mit CSS3 eine Lightbox erstellen. So hab ich es jetzt für meine Videos gemacht. Funktioniert aber natürlich auch für Bilder oder Text.
Anleitung hier: http://sixrevisions.com/css/semantic-css3-lightboxes/

 

Theoretisch kommt diese Lightbox ohne JS aus, jedoch hat der <body> im Beispiel dort ein overflow:hidden, das man für presta natürlich nicht global so setzen kann.

 

Ich habe dafür eine kleine JS-Funktion geschrieben, dem body-Tag wird beim Öffnen der Lightbox eine Klasse zugewiesen und bei Schließen wieder entfernt.