Photo Pingalerie » Javascript

WordPress Plugin Shadowbox JS auf Version 3.0.0.0 aktualisiert

photo pingalerie — Tue, 16 Jun 2009 11:40:02 +0000

In diesem Beitrag habe ich euch das WordPress Plugin Shadowbox JS vorgestellt, jetzt wurde es auf Version 3.0.0.0 aktualisiert. Was hat sich geändert?

Die Anforderungen für das Plugin sind mindestens PHP5, der JW FLV-Player wurde standardmäßig deaktiviert und erfordert für die Aktivierung, das Akzeptieren der Lizenzbedingugnen. Die zusätzlichen Skins wurden entfernt, mehr dazu hier oder hier.

JW FLV Player aktivieren

Shadowbox JS nutzt JW FLV Player, welcher unter den Bedingungen der
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, auf nicht kommerziellen Seiten genutzt werden kann.
Wer den Player auf kommerziellen Seiten anwenden möchte, muss eine Lizenz erwerben.
Standardmäßig ist der Player für die Nutzung mit Shadowbox JS deaktiviert.
Für die Aktivierung geht ihr in den Adminbereich [Einstellungen] [Shadowbox JS], ändert die Einstellung [Enable FLV Support] von [false] auf [true] und speichert anschließend. Danach steht unter der Player-Auswahl [FLV] zur Verfügung. Mit der Auswahl des Players, dem Speichern sowie Bestätigen der Lizenzbedingungen, könnt ihr ab sofort den FLV-Player auf eurer Seite nutzen.

[Enable FLV Support] auf [true] setzen, danach die Einstellungen speichern.

Lizenzbedingungen akzeptieren.

FLV auswählen und die Einstellungen speichern.

Weitere interessante Artikel:

Mit Shadowbox.js lassen sich nahezu alle Dateien inline anzeigen
Bisher habe ich bei der Anzeige von Bilder auf das Lightbox2 Javascript by Lokesh Dhakar gesetzt. Lief auch großartig, bis ich für eine übersichtliche …

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der …

Photos oder Bilder mit Lightbox anschaulicher darstellen – Anleitung
Sowohl mit dem Greybox – Plugin, als auch mit dem Java Script Lightbox, kann man auf eine schöne Art, Bilder und Photos anschaulicher darstellen …

DANKE FÜR DAS ABONNIEREN MEINES FEED !

Mit Shadowbox.js lassen sich nahezu alle Dateien inline anzeigen

photo pingalerie — Wed, 15 Apr 2009 19:33:35 +0000

Bisher habe ich bei der Anzeige von Bilder auf das Lightbox2 Javascript by Lokesh Dhakar gesetzt. Lief auch großartig, bis ich für eine übersichtlichere Darstellung der letzten Artikel, Kommentare und populärsten Artikel im Tab-Style, zusätzlich das TabberJavascript von Patrick Fitzgerald in die Sidebar eingebunden habe.

Suchend nach einer anderen Lightbox-Variante, habe ich die Shadowbox by Michael J. I. Jackson für mich entdeckt. Shadowbox ist eine Javascript-Bibliothek zur Betrachtung von Online-Medien aller Art. Die häufigste Verwendung der Shadowbox, ist die eindrucksvolle Anzeige [Lightbox-Effekt] von Bildern, aber es werden noch viele weitere Medientypen unterstützt:

Bilder (png, jpg, jpeg, gif, bmp)
Video (avi, mpg, mpeg)
Quicktime (dv, mov, moov, movie, mp4)
Windows Media Player (asf, wm, wmv)
Flash (swf, flv)
IFrame (asp, aspx, cgi, cfm, htm, html, pdf, pl, php*, phtml, rb, rhtml, shtml, txt, vbs)

Meine Favoriten sind das Anzeigen von Bilder-Galerien, ausgehend von einem Einzelbild und die Möglichkeit externe Webseiten in der Shadowbox darstellen zu lassen, ohne dass der Besucher meine Seite verlassen muss.

Shadowbox arbeitet über Adapter mit diversen JavaScript Frameworks (YUI, Ext, Prototype, jQuery und MooTools) zusammen. Man hat die Wahl, welches Framework verwenden werden soll und kann später diese Wahl auch noch revidieren.

Selbstredend gibt es auch das passende WordPress-Plugin, welches ich übrigens auf diesen Seite einsetze, das uns alle Konfigurationseinstellungen abnimmt. Die möglichen Parameter sind sehr umfangreich und lassen eine gezielte Konfiguration des Plugin zu.

Eine Auswahl an Konfigurationsmöglichkeiten, die angepasst werden können:

Adapterwahl
Sprachauswahl
Animationen sperren
Animationreihenfolge – erst Breite dann Höhe oder erst Höhe dann Breite oder beides zugleich
Farbeinstellungen
Video automatisch abspielen ja/nein
In einer Galerie Vorwärts- und Rückwärtsbutton ja/nein
Anzeige der Anzahl von Bildern in einer Galerie ja/nein sowie Counter Typ und Counter Limit und noch mehr…

Zudem gibt es Skins und verschiedene Sprachpakete. Deutsch ist natürlich auch dabei.

Hier stelle ich euch ein paar Beispiele zur Verwendung von Shadowbox vor, die ich auch künftig in meinem Blog einsetzen werde.

Einzelbild

Beispiel 1 von 3 B I L D L I N K – E I N Z E L B I L D

Beispiel Code Bildlink:

Beispiel 2 von 3 T E X T L I N K – E I N Z E L B I L D

Klicke diesen Link

Beispiel Code Textlink:

 Text-Link

Beispiel 3 von 3 B U T T O N – E I N Z E L B I L D

Beispiel Code Buttonlink:

Bildergallery

Beispiel 1 von 2 V E R K L E I N E R T E V O R S C H A U B I L D E R

Beispiel Code mit Slideshow:

Beispiel Code ohne Slideshow:

Beispiel 2 von 2 G A L L E R Y - A U S G E H E N D V O M E I N Z E L B I L D

Beispiel Code mit Slideshow:

MP3 und FLV Dateien

Beispiel 1 von 2 M P 3 A L S T E X T- B U T T O N- U N D B I L D L I N K

Klicken um den Song zu hören

Beispiel Code MP3-Textlink:

Song hören

Beispiel 2 von 2 F L V I N D E R S H A D O W B O X

Beispiel Code FLV-Video:

Inline Content und HTML

Beispiel 1 von 3 V E R S T E C K T E R I N H A L T I M D I V

Zeige versteckten Inhalt

Beispiel Code versteckter Inhalt:

Zeige versteckten Inhalt

    
        Was ist Shadowbox?
        Die Shadowbox ist eine cross-browser, plattformübergreifende, sauber kodierte und vollständig dokumentierte Multimedia Applikation, komplett in JavaScript umgesetzt.
        Durch die Verwendung der Shadowbox können Webmaster eine breite Palette von Medien in allen gängingen Browsern anzeigen lassen, ohne den Besucher von der verlinkenden Seite fortschicken zu müssen.

Beispiel 2 von 3 W E B S E I T E - I N T E R N

Interne Seite

Beispiel Code HTML intern:

Interne Seite

Beispiel 3 von 3 W E B S E I T E - E X T E R N

Externe Seite

Beispiel Code Buttonlink:

Externe Seite

Weitere Beispiele findet ihr auf der Seite des Autors von Shadowbox

Shadowbox by Michael J. I. Jackson
WordPress-Plugin by Sivel.net

Weitere interessante Artikel:

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der …

WordPress Plugin Shadowbox JS auf Version 3.0.0.0 aktualisiert
In diesem Beitrag habe ich euch das WordPress Plugin Shadowbox JS vorgestellt, jetzt wurde es auf Version 3.0.0.0 aktualisiert. Was hat sich geändert? …

DANKE FÜR DAS ABONNIEREN MEINES FEED !

Lytebox – Eine Modifikation von Lightbox mit Slideshow Effekt

photo pingalerie — Tue, 01 Jan 2008 16:00:39 +0000

Lytebox ist eine Abwandlung des weit verbreiteten lightbox-scripts. Sie ist eine Art Popup in der die Bildausgabe anhand der aktuellen Browsergröße verkleinert dargestellt wird.

Ein wichtiger Vorteil der Verwendung von Lytebox ist, die sehr schlanke Javascript Datei [lytebox.js ] gegenüber den vier *.js Files von lightbox.

Weitere Features:

Einzelbild Anzeige.
Bildpräsentation mit manueller Navigation.
Diashow mit Slideshow Effekt.
Webseiten im Lyteframe anzeigen.
Zu jedem einzelnen Photo können Bildbeschreibungen erstellt werden, die innerhalb der Präsentation durch anklicken des Buttons [INFO] angezeigt werden.
Des weiteren lassen sich die EXIF-Beschreibungen des Photos, durch den Tag rev="[exif=true]" abrufen.
Für hochauflösende Bilder gibt es die Möglichkeit, einen "RESIZE"-Button anzeigen zu lassen, der die Bilder in der Originalgröße anzeigt.
In der Konfiguration der lytebox.js, kann eingestellt werden, ob bei einem Rechtsklick das Bild gespeichert werden darf, ob der Schließ- Info- EXIF Button angezeigt werden soll.

Lytebox kann als reine JavaScript Variante sowie als WordPress – Plugin in die Seite eingebunden werden.

Ich habe mich für die modifizierte JavaScript Variante « Lytebox 3.20 Modification » von Pavel Kuzub entschieden.

Einbindung des Java Script Lytebox

Java Script herunterladen und entpacken.
Auf dem Webserver ein Verzeichnis erstellen, z.B. "lytebox". Den Pfad zu diesem Verzeichnis bitte merken, da er noch für einige Einstellungen benötigt wird.
Im Header der Webseite muss folgender Code eingetragen werden – hier den Pfad zum "lytebox" – Verzeichnis anpassen.

Beispiel Code für den Header:

Nachdem alle Anpassungen vorgenommen wurden, muss die entsprechende Datei mit der Änderung im Header, auf den Webserver geladen werden.
Alle Dateien des Java Script können nun ebenfalls in das erstellte Verzeichnis auf den Webserver geladen werden.
Es gibt vier Möglichkeiten der Anzeige, entweder als Einzelbild, Bildpräsentation mit manueller Navigation, Diashow mit Slideshow Effekt oder Webseiten im Lyteframe darstellen.

Einzelbild zum Klicken auf Close-Button – rel="lytebox"

L i n k – V a r i a n t e:

Einzelbild mit Close-Button

B i l d – V a r i a n t e:

Beispiel Code:

L i n k - Variante:
rel="lytebox" title="Beispiel Einzelbild-Text">Beispiel Einzelbild
 
B i l d - Variante:
rel="lytebox">

Bildpräsentation mit manueller Navigation – rel="lytebox[xxx]"

L i n k – V a r i a n t e:

Manuelle Navigation durch die Bildpräsentation

B i l d – V a r i a n t e:

Beispiel Code:

L i n k  -  Variante:
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 1">Manuelle Navigation durch die Bildpräsentation
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 2"> 
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 3"> 
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 4"> 
 
B i l d  -  Variante:

    
        
        
        
        
    rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]">

Bildpräsentation als Diashow – rel="lyteshow[xxx]"

L i n k – V a r i a n t e:

Bildpräsentation mit Slideshow Effekt

B i l d – V a r i a n t e:

Beispiel Code:

L i n k  -  Variante:
rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]" title="Bild 1">Slideshow Effekt
rel="lyteshow[diashow]" rev="[exif=true]" title="Wagenrennen Bild 2"> 
rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]" title="Wagenrennen Bild 3"> 
rel="lyteshow[diashow]"" title="Wagenrennen Bild 4"> 
 
B i l d  -  Variante:

    
        
        
        
        
    rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]"> rel="lyteshow[diashow]" rev="[exif=true]"> rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]"> rel="lyteshow[diashow]">

Laden von Webseiten im Lyteframe – rel="lyteframe"

E i n e Webseite:

Wikio.de [Weite: 940px Höhe: 720, mit Srolling]

M e h r e r e Webseiten:

Google.de [Weite: 740px Höhe: 380, ohne Srolling]
Pingalerie.de [Weite: 1024px Höhe: 720, mit Scrolling]
Photogalerie [Weite: 1024px Höhe: 720]

Beispiel Code:

E i n e  Webseite:
rel="lyteframe" title="Dein Title" rev="width: 940px; height: 720px; scrolling: auto;">Link Name
 
M e h r e r e  Webseiten:

    rel="lyteframe[group]" title="Google.de" rev="width: 740px; height: 380px; scrolling: no;">Google.de
    rel="lyteframe[group]" title="Yahoo.de" rev="width: 1024px; height: 720px; scrolling: auto;">Yahoo.de
    rel="lyteframe[group]" title="Wikio.de" rev="width: 1024px; height: 720px; scrolling: auto;">Wikio.de

Anmerkungen und Tipps

Lytebox wird standardmäßig mit 5 Farbvarianten geliefert: grey (Standard), red, blue, gold und green. Der Austausch der Farben, kann in der lytebox.js vorgenommen werden, indem man ‘grey’ durch die entsprenden Farbe ersetzt. [siehe Abbildung]

Änderung in der lytebox.js

Problem im Internet Explorer 6

Leider reicht die Änderung für die korrekte Anzeige im IE6 nicht aus. Hier müssen noch zusätzlich einige Modifizierungen in der lytebox.css vorgenommen werden. Standardmäßig werden die Farbeintragungen von der Farbe ‘grey’ angeführt. Für die Farbeinstellung im IE6 muss die gewünschte Farbe an erster Stelle stehen. Einfach die entsprechenden Zeilen austauschen, so dass in der kompletten lytebox.css insgesamt 11 Änderungen erfolgen müssen. [siehe Abbildungen]

Original lytebox.css

Gänderte lytebox.css

Java Script Varianten von lytebox

WordPress-Plugin Varianten von lytebox

Weitere interessante Artikel:

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der …

DANKE FÜR DAS ABONNIEREN MEINES FEED !

Photos oder Bilder mit Lightbox anschaulicher darstellen – Anleitung

photo pingalerie — Tue, 23 Jan 2007 15:51:25 +0000

Sowohl mit dem Greybox – Plugin, als auch mit dem Java Script Lightbox, kann man auf eine schöne Art, Bilder und Photos anschaulicher darstellen.

Die Lightbox gibt es als reine JavaScript Variante, sowie als WordPress – Plugin.

JavaScript Variante Lightbox JS v2 by Lokesh Dhakar
WP Lightbox JS WordPress PlugIn by Safirul Alredha
WP Lightbox JS WordPress PlugIn by m3nt0r.de

Anhand von Beispielen, möchte ich hier kurz erklären, wie man die JavaScript Variante von Lokesh Dhaka einfach in seine Webseite einbinden kann. Sie funktioniert mit allen modernen Browser.

Neu in der Version 2:

Bilderserien / Fotos in Gruppen
Visuelle Übergangseffekte

Einbindung des Java Script Lightbox

Java Script herunterladen und entpacken.
Auf dem Webserver ein Verzeichnis erstellen, z.B. "lightbox". Diesen Pfad bitte merken, da er noch für einige Einstellungen benötigt wird.
Im Header der Webseite muss folgender Code eingetragen werden – hier den Pfad zum "lightbox" – Verzeichnis anpassen.

Beispiel Code für den Header:

Damit auch die CSS – Datei von Lightbox JS v2 in die Webseite geladen wird, muss sie ebenfalls im Header eingebunden werden.

Beispiel Code für das Laden der CSS – Datei:

Diese Eintragungen sollten jetzt im Header vorgenommen sein.

Zusammenfassung für den Beispiel Code im Header:

Nun müssen noch die Pfade zu den Bilddateien blank.gif, prevlabel.gif und nextlabel.gif in der lightbox.css angepasst werden. Die Datei öffnen und

Beispiel Code für die lightbox.css:

folgende Zeilen
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
 
mit den vollständigen Pfadangaben ergänzen.
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://www.deinewebsite.de/pfad/zu/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/nextlabel.gif) right 15% no-repeat; }

Auch in der lightbox.js müssen noch die Pfade zu den Bilddateien loading.gif and close.gif angepasst werden, also wieder die Datei öffnen und

Beispiel Code für die lightbox.js:

folgende Zeilen
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
 
mit den vollständigen Pfadangaben ergänzen.
var fileLoadingImage = "http://www.deinewebsite.de/pfad/zu/images/loading.gif";
var fileBottomNavCloseImage = "http://www.deinewebsite.de/pfad/zu/images/closelabel.gif";

Nachdem nun alle Dateien erfolgreich angepasst wurden, müssen diese in das erstellte Verzeichnis auf den Webserver geladen werden.
So, der schwierigste Teil ist nun geschafft. Wie nutzt man nun Lightbox JS v2 mit seinen Effekten?
Es gibt zwei Möglichkeiten der Anzeige, entweder als Einzelbild oder als Bilderserie, in der man navigieren kann.

Beispiel 1: Einzelbild

Ausgangs - Bild

 
Ausgangs - Text
Klicke diesen Link

Beispiel 2: Bilderserie

Beispiel Code für die Nutzung von lightbox als Bildserie, wobei die Anzahl der Bilder keine Rolle spielt. Wichtig ist nur, darauf zu achten, dass lightbox[serie] überall eingetragen wurde, wobei "serie" durch jedes x – beliebige Wort ersetzt werden kann.

Ausgangs - Bilder



 
Ausgangs - Texte
Bild 1
Bild 2
Bild 3

Natürlich kann Lightbox noch an seine Bedürfnisse angepasst werden.
Viel Spass mit dem Java Script und der kleinen Anleitung.

Weitere interessante Artikel:

Lytebox – Eine Modifikation von Lightbox mit Slideshow Effekt
Lytebox ist eine Abwandlung des weit verbreiteten lightbox-scripts. Sie ist eine Art Popup in der die Bildausgabe anhand der aktuellen Browsergröße ve …

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der …

DANKE FÜR DAS ABONNIEREN MEINES FEED !

Greybox Plugin fuer WordPress

photo pingalerie — Wed, 13 Sep 2006 20:12:56 +0000

Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der talentierten Art. Greybox erzeugt Popups, die sich gut in den Browser integrieren und nicht nerven.

Der User muss die Seite nicht verlassen, da sie abgeblendet wird und das PopUp – Fenster sich nicht irgendwo, sondern am oberen Browserrand öffnet und dort kleben bleibt.
Es können ganze Webseiten oder Bilder angezeigt werden. Der Schreiber dieser Greybox gibt zu, dass er von Lightbox JS inspiriert wurde. Trotzdem wirkt das ganze nicht abgekupfert.

Die Greybox gibt es als reine JavaScript Variante, sowie als WordPress – Plugin.

Download JavaScript Variante von Orangoo Labs – Greybox (Version 5.3)
Download WordPress – Plugin von aNieto2K (Version 2.0)

Ich habe in meine Webseite die JavaScript Variante von Orangoo Labs integriert. Ihr könnt euch am Ende des Artikels einige Beispiele anschauen.

Installation

JavaScript downloaden und entpacken.
Nur den Ordner greybox auf Deinen Webspace hochladen, alle anderen Dateien und Ordner sind Quelldateien oder Dokumentationen.
Anpassung der header.php (siehe folgende Anweisung)

Schritt 1:

Zwischen ... foldende Zeilen hinzufügen,
wobei der Pfad absolut sein sollte.

Schritt 2:

Jetzt müssen noch folgende Scripte und ein Stylesheet hinzugefügt werden.

Beispiel 1:

Laden einer Webseite im PopUpFenster – zentriert unter Angabe der Breite und Höhe.

Versuche den Link: Yahoo in der Greybox 800 x 600

Beispiel Code:

Yahoo in der Greybox 800 x 600

Beispiel 2:

Laden einer Webseite im PopUpFenster (FullScreen-Modus)

Versuche den Link: Google.com

Beispiel Code:

Google.com

Beispiel 3:

Laden mehrere Webseiten (Set) im anderen Layout (FullScreen-Modus)

Versuche den Link: Zeige die erste Seite von zwei

Beispiel Code:


Zeige die erste Seite von zwei

Beispiel 4:

Laden eines Bildes im PopUp – Fenster (habe die Formate: jpg, png und gif getestet).
Klicke auf das Bild:

Beispiel Code:

Beispiel 5:

Laden mehrerer Bilder (Set).
Klicke auf das Bild:

Beispiel Code:

Greybox bietet folgende Funktionen:

GB_show (Untertitel, URL, Höhe, Breite, callback_fn)
Zeigt ein normales GreyBox Fenster.

Untertitel: Der Untertitel des Fensters.
URL: URL einer Web site, die du in GreyBox anzeigen möchtest.
Höhe, Breite: Die Größe des Fensters.
callback_fn: Eine Funktion, die benannt wird, um das GreyBox Fenster zu schließen.

GB_showFullScreen (Untertitel, URL, callback_fn)
GreyBox Fenster ‘fullscreen’.

Untertitel: Der Untertitel des Fensters.
URL: URL einer Web site, die du in GreyBox anzeigen möchtest
callback_fn: Eine Funktion, die benannt wird, um das GreyBox Fenster zu schließen.

GB_showImage (Untertitel, URL)
Ein Bild in GreyBox zeigen.

Untertitel: Der Untertitel des Fensters.
URL: URL einer Web site, die du in GreyBox anzeigen möchtest.

Weitere interessante Artikel:

DANKE FÜR DAS ABONNIEREN MEINES FEED !