Tutorials: Lightbox in den News
Tutorial über das Einbauen der Ajax Lightbox in den News.
Durch Web 2.0 entstanden einige Scripte wie Lightbox.Man kann auch Lightbox in den News benutzen damit z.b. große Bilder auch in den News unterbringen kann.
Hierzu ein Beispiel:
[1]Wie man die Lightbox in die News einbaut erfahrt Ihr wenn Ihr auf weiterlesen
clickt.
Ihr braucht das Ajax Support Package Download :click [2]
Dieses Paket entpacken und in Eure Postnuke Installation in den Ordner
Javascript kopieren.
Nun zum Einbau der Lightbox in die News bei einem Xanthia Theme
Öffnet mit einem Editor die home oder master.htm
Tragt dort in den head bereich folgenden code ein:
Code
script type="text/javascript" src="javascript/ajax/prototype.js"></script>
script type="text/javascript" src="javascript/ajax/scriptaculous.js?load=effects"></script>
script type="text/javascript" src="javascript/ajax/lightbox.js"></script>
script type="text/javascript" src="javascript/ajax/scriptaculous.js?load=effects"></script>
script type="text/javascript" src="javascript/ajax/lightbox.js"></script>
bitte reihenfolge genauso einhalten.
Speichern und auf den Server hochladen.
Die lightbox.css findet Ihr im Ajax Paket im Ordner Lightbox/
Images.
Die Lightbox.css auch mit einem Editor öffnen und bei z.b. url(images/blank.gif)
../ das davor setzen sodass es dann so aussieht url(../images/blank.gif)und das bei allen Bildern in der css datei.Diese Datei kopiert Ihr in den Ordner Style eures Themes.
Das gleiche macht Ihr mit den Bildern der Lightbox auch in den Ordner
Images eures Themes kopieren.
Nun kommt es zum eintragen der News.
Im oben zu sehenden Beispiel sieht der Code dann so aus:
Code
<a title="zum vergrößern aufs Bild clicken" href="images/image-1.jpg" rel="lightbox [roadtrip]"><img src="images/thumb-1.jpg" alt="zum vergrößern aufs Bild clicken" /></a>
<a title="zum vergrößern aufs Bild clicken" href="images/image-1.jpg" rel="lightbox [roadtrip]"><img src="images/thumb-1.jpg" alt="zum vergrößern aufs Bild clicken" /></a>
<a title="zum vergrößern aufs Bild clicken" href="images/image-1.jpg" rel="lightbox [roadtrip]"><img src="images/thumb-1.jpg" alt="zum vergrößern aufs Bild clicken" /></a>
<a title="zum vergrößern aufs Bild clicken" href="images/image-1.jpg" rel="lightbox [roadtrip]"><img src="images/thumb-1.jpg" alt="zum vergrößern aufs Bild clicken" /></a>
<a title="zum vergrößern aufs Bild clicken" href="images/image-1.jpg" rel="lightbox [roadtrip]"><img src="images/thumb-1.jpg" alt="zum vergrößern aufs Bild clicken" /></a>
Diesen Code müsst Ihr dann in euren News Beitrag einbauen.
Hier noch eine kurze Erklärung:
Mit a href... ruft Ihr das große Bild auf wichtig hierbei ist das rel=lightbox das die lightbox aktiviert. Wenn ihr noch das roadtrip dahinter setzt könnt Ihr in der Lightbox weitere Bilder ansehen.
Mit img.. ruft Ihr das kleine Bild auf.
Ich hoffe Ihr kommt mit diesem kurzen Tuttorial über die Lightbox klar
wenn nicht fragt im Forum nach.
euer
Charlie
