Wer die FancyBox oder das entsprechende WP-PlugIn nutzt, steht schnell vor der Aufgabe verschiedene Layouts nutzen zu wollen, doch wie?
Im Prinzip nicht schwer hat es doch einige Recherche gebraucht bis der notwendige Trick gefunden wurde.
Für jedes Layout, welches als FancyBox genutzt werden soll, muß (in einer externen JS-Datei oder direkt eingebunden) eine neue FancyBox-Instanz angelegt werden. Diese bekommt einen eigenen Namen und kann dann auch via CSS individuell formatiert werden.
Hier der „Standard-Code“ der z.B. durch das WordPress PlugIn im Quelltext des Seitenkopfs eingebunden wird:
Dieser Javascript-Code muß nun, entsprechend angepasst, für jedes weitere gewünschte Layout erstellt und ebenfalls eingebunden werden. Dabei muß, neben der gewünschten Layoutanpassung, auch der Name der später bei der Verwendung verwendete Name angepasst werden, über diesen wird das gewünschte Layout erst identifiziert. Dazu muß im obigen Quelltext jedes Vorkommen von „fancybox“ innerhalb von Anführungszeichen durch einen eigenen, neuen Namen ersetzt werden. Fertig!
Bei der Integration in die Seiten muß dann nur noch der neue Name anstelle von „fancybox“ als Klasse verwendet werden und das gewünschte Layout der Fancybox wird verwendet.
Über die neue Klasse kann dann natürlich auch das CSS-Layout angesprochen und nach eigenen Wünschen modifiziert werden.