Lightbox Lightwindow und Einsatz in den News :: PostNuke Themes

Newsbeiträge

Kategorie: Tutorials

Lightbox Lightwindow und Einsatz in den News

Eingereicht von Charlie am 26. Dez 2009 - 13:34 Uhr

Auf der Suche nach einer Lightbox die auch Videos,PDF oder andere Webseiten darstellen kann habe ich folgende Webseite gefunden:

http://planetoz…ghtbox-clones/

Durch diese Übersicht habe ich mich nun für Lightwindow entschieden und diese Lightbox ist nun hier im Einsatz.

Der Grund ist für mich das Lightwindow Videos,PDF und anderen Content anzeigen kann und mit Prototype JavaScript Framework arbeitet.

Wie Ihr nun Lightwindow in den News unter Zikula einbaut erfahrt Ihr ...

hier.

Zunächst einmal müsst Ihr euch Lightwindow von folgender Webseite Downloaden:

http://stickman…m/lightwindow/

Danach entpacken des Zip-Paketes und Hochladen der lightwindow.js ins Verzeichnis Javascript/ajax/ eurer Zikula Installation.

Danach legt Ihr einen neuen Ordner im Verzeichnis Javascript/ajax/ mit dem Namen lightwindow an.

In diesen Ordner kopiert Ihr dann die Bilder aus dem Images Verzeichniss des Lightwindow Zip Paketes sowie die lightwindow.css aus dem Verzeichnis CSS.

Nachdem Ihr alles auf den Server geladen habt müßt Ihr noch den Lightwindow Code in Euer Theme oder News Modul einbauen.

Es gibt verschiedene Wege den Code von Lightwindow einzubauen.

Einbau in die home beziehungsweise master.htm deines Themes

Ihr öffnet mit einem Editor die home bzw. master.htm. Tragt im Head Bereich folgenden Code ein:

Code

<!--[pnpageaddvar name="javascript" value="javascript/ajax/prototype.js"]-->
<!--[pnpageaddvar name="javascript" value="javascript/ajax/scriptaculous.js"]-->
<!--[pnpageaddvar name="javascript" value="javascript/ajax/lightwindow.js"]-->
<!--[pnpageaddvar name="stylesheet" value="javascript/ajax/lightwindow/lightwindow.css"]-->

Speichert nun die Änderung und ladet die home bzw. master.htm eures Themes wieder auf den Server.

In einem News Beitrag ruft Ihr Lightwindow wie folgt auf:

Code

<a href="images/image-1.jpg" class="lightwindow" title="Lightwindow test" caption="Lightwindow die andere Lightbox" author="Charlie"><img src="images/thumb-1.jpg" alt="Lightwindow test" /></a>

Einige Erklärungen zu dem Code:

class=lightwindow ruft Lightwindow auf
title=Titel des Bildes
caption=Kommentar oder Beschreibung des Bildes
author=Author

Das Ergebnis seht Ihr unter diesem Beitrag.

Lightwindow Test

Lightwindow und youtube Videos

Wie schon beschrieben kann Lightwindow auch youtube Videos anzeigen. Dazu müßt Ihr folgenden Code in den News verwenden:

Code

<a title="Infinity" href="http://www.youtube.com/v/w9KnuJZkBjg&hl=de&fs=1&autoplay=1" class="lightwindow" params="lightwindow_width=740,lightwindow_height=290" ><img src="http://i4.ytimg.com/vi/w9KnuJZkBjg/default.jpg" alt="Guru Josh"/></a>

Einige Erklärungen zu dem Code:

title=Titel des Videos
class=lightwindow aufruf
params=lightwindow width Breite des Videos
params=lightwindow height Höhe des Videos
img src=url zum Bild des Videos

youtube Test

Desweiteren könnt Ihr auch Lightwindow im Modul bbcode Modul benutzen dazu müßt Ihr allerdings den Code von bbcode verändern.

bbcode Test

Das war eigentlich schon alles zum Einbau der Lightwindow in die News von Zikula. Bei fragen oder Anregungen hinterlasst einen Kommentar oder postet ins Forum.

euer Charlie

Drucken

PostNuke Themes

Newsbeiträge