Lightbox _richtig_ benutzen?

  • Hallo.

    Das Lightbox PlugIn ist faszinierend, aber ich habe nocht nicht rausfinden können, wo/wie das "rel=”lightbox”" hin muss. :(

    Trage ich das (über TinyMCE) im Link PopUp ein, referenziert er irgendwas, aber nicht das Richtige.

    Was mache ich falsch?
    Wie genau erstelle ich den Link vom Vorschaubild auf das normal große Bild?


    Ich habe die Suche bemüht, aber leider für dieses Problem keine Lösung gefunden (wohl "falsch gesucht?), kann mir das bitte jemand erklären?

    Vielen Dank im Voraus!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 1. Bild hochladen
    2. Vorschaubild einfügen
    3. Vorschaubild mit Originalbild verlinken
    4. In diesen Link das Attribut rel="lightbox" einfügen

    Beispiel:

    <a href="http://1000ff.de/img/image.jpg" rel="lightbox" /><img id="image100" src="http://1000ff.de/img/image.thumbnail.jpg" /></a>

    Optional:

    5. Es können auch mehrere Bilder einer Gruppe zugeordnet werden. Dazu das Attribut rel="lightbox[gruppenname]" einfügen. Bei einem Klick auf ein Vorschaubild kann man so die in einer Gruppe zusammengefassten Bilder nacheinander ansehen.

    Hoffe dir geholfen zu haben,
    Simon


  • Hallo ich habe auch ein paar Probleme mit Lightbox.

    Ich hab zuerst versucht das Plugin Insstaliert, aber es zerschiesst mir das Theme, wenn ich die Option *Vorschaubild* + *zur Seite/zum Bild verlinkt*
    wähle hab ich auf einmal 2 Seiten, klickt man von der Startseite über den Titel des Artikels zum Artikel ist alles wie immer, klickt man aber über das Bild zum Artikel landet man auf einer neuen Seite.
    Es ist als wären 2 Artikel da, was laut Tellerrand nicht so ist.
    Beide haben unterschiedliche Adressen im Browser und die Komentare werden auch nur jeweils dort angezeigt....

    Ich hab leider keine wirklich gute deutsche Anleitung zum installieren ohne das Plugin gefunden und die englischen sind mir ehrlich gesagt zu kompliziert.

    oder hab ich einfach was übersehen beim PlugIn und es ist eigentlich ganz einfach :confused:

    Ansonsten::könnte jemand mal eine kurze verständliche Anleitung schreiben?

    Download und dann?

    Zitat

    <!--Start LightboxJS2-->
    <link rel="stylesheet" href="http://www.deinewebsite.com/pfad/zu/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.deinewebsite.com/pfad/zu/prototype.js"></script>
    <script type="text/javascript" src="http://www.deinewebsite.com/pfad/zu/script…js?load=effects"></script>
    <script type="text/javascript" src="http://www.deinewebsite.com/pfad/zu/js/lightbox.js"></script>
    <!--End LightboxJS2-->


    Laut hier in die index.html
    Doch wo finde ich die index.html?
    Ich hab nur eine index.php aufm Server, oder bin ich blind :-?

    Zum hochladen hab ich mir dann ImageBrowser ausgekuckt da mir die Große des von WP generierten Vorschaubildes nicht passt und ich gerne eine andere fixe Größe hätte...

    Meine Seite http://www.idixi.de
    Ich hab das Bild *sehnsucht* mal mit der Falschen verlinkung gelassen damit ihr es seht was ich genau meine...
    ich bin mir ehrlich gesagt nicht klar ob es am *gespiele* von heute Abend liegt oder ob der Bug schon vorher war den ich hab *verlinke zum/Bild/Seite* verher nie benutz...

    Vielen Dank schon jetzt und Grüße in die N8!

    Einmal editiert, zuletzt von idixi (30. Oktober 2006 um 01:21)

  • 1. Bild hochladen
    2. Vorschaubild einfügen
    3. Vorschaubild mit Originalbild verlinken
    4. In diesen Link das Attribut rel="lightbox" einfügen


    Hi Simon.

    Ich benutze FireFox und da den TinyMCE Editor, d.h., ich habe Icons, die ich da anklicke. (Sorry wenn das doof kling, lieber ein wenig zu viel beschrieben als zu wenig)

    Ich lade also eine Datei hoch, platziere den Cursor an eine beliebige Stelle, sende das Vorschaubild zum Editor - und gehe dann auf das Icon "Bild einfügen", um die Attribute (Left, Right, ...) zu vergeben und (leider manuell) den Bildtitel einzutragen/-stellen.
    Außerdem kopiere ich hier den Pfad zum Thumbnail, den brauche ich gleich.
    Jetzt gehts an den Link, und wird IMO zu aufwändig, das genau müsste leichter funktionieren:
    Ich paste die URL zum Thumbnail da rein, lösche das .Thumbnail - und bin (dann endlich doch) fertig.

    Dies also ist der Weg, wie ich das mache, weil ich wahrscheinlich zu doof bin, die richtigen Knöpfe zu finden. ;-)

    Leider bin ich sogar so doof, dass ich deine Erklärung nicht umsetzen kann, und das ist das eigentlich ärgerliche. :(

  • Hallo Apfelkommpott, ich habs inzwischen mit Hilfe von Ad hinbekommen :)

    Via FireFox im WP Editor mache ich es jetzt ohne ImageBrowser so

    1.Vorschaubild(vorschaubild.jpg) in der gewünschetn Größe hochladen.
    (orginalbild+nicht verlinkt)

    2.Bild(bild.jpg) in der gewünschten Größe hochladen.
    (orginalbild+nicht verlinkt)

    3.Zum Editor senden

    4.HTML Button anklicken und darein das hier kopieren

    Zitat

    <a rel="lightbox" href="http://deinedomain.de/pfaht/zum/bild/bild..jpg">
    <img width="330" height="188" alt="TITEL" title="Zu klein? Dann klick mal auf das Bild..."
    src="http://deinedomain.de/pfaht/zum/bild/vorschaubild.jpg" /></a>

    Nun sieht das im HTML Editor so aus

    Zitat


    <a rel="lightbox" href="[COLOR="Blue"]http://deinedomain.de/pfaht/zum/bild/bild.jpg[/COLOR]">
    <img width="330" height="188" alt="[COLOR="blue"]TITEL[/COLOR]" title="Zu klein? Dann klick mal auf das Bild..."
    src="[COLOR="blue"]http://deinedomain.de/pfaht/zum/bild/vorschaubild.jpg[/COLOR]" /></a>

    <img id="image61" src="[COLOR="blue"]http://deinedomain.de/pfaht/zum/bild/bild.jpg[/COLOR]" alt="[COLOR="blue"]TITEL[/COLOR]" />

    <img id="image61" src="[COLOR="blue"]deinedomain.de/pfaht/zum/bild/bild.jpg[/COLOR]" />

    Nun die Adressen der Bilder ändern und die unteren beiden wieder löschen :)

    Dann sollte es so aussehen, nur mit den richtigen Adressen :)

    [COLOR="Red"]

    Zitat

    <a rel="lightbox" href="[COLOR="blue"]http://deinedomain.de/pfaht/zum/bild/bild..jpg[/COLOR]">
    <img width="330" height="188" alt="[COLOR="blue"]TITEL[/COLOR]" title="Zu klein? Dann klick mal auf das Bild..."
    src="[COLOR="blue"]http://deinedomain.de/pfaht/zum/bild/vorschaubild.jpg[/COLOR]" /></a>

    [/COLOR]

    Grüße von einer Macuserin ;)

    Einmal editiert, zuletzt von idixi (30. Oktober 2006 um 23:08)

  • Hallo zusammen. ;)

    ich häng mich mal hier ran mit folgender Frage:

    Besteht die Möglichkeit, Nutzern von älteren Browsern, respektive Javascriptverweigerern eine automatische Alternative anzubieten?
    Daß das Bild für diese alleinig in einem weißen Fenster und links oben erscheint, finde ich nicht wirklich prickelnd.

    (Das Problem stellt sich auch bei nicht zu Ende geladenen Seiten, da anscheinend der Lightbox-Code erst zum Schluß greift.)

    Es grüßt,
    der pete

  • Hallo zusammen. ;)

    ich häng mich mal hier ran mit folgender Frage:

    Besteht die Möglichkeit, Nutzern von älteren Browsern, respektive Javascriptverweigerern eine automatische Alternative anzubieten?
    Daß das Bild für diese alleinig in einem weißen Fenster und links oben erscheint, finde ich nicht wirklich prickelnd.

    (Das Problem stellt sich auch bei nicht zu Ende geladenen Seiten, da anscheinend der Lightbox-Code erst zum Schluß greift.)

    Es grüßt,
    der pete


    Nutzern älterer Browser kann man nur einen neuen als Alternative anbieten. Javascriptverweigerer sollten wissen was sie tun, und damit leben können, dass ein Bild in einer HTML-Seite geöffnet wird...

    Das Javascript der ersten Lightboxgeneration ist viel kleiner als das der 2.0, das sollt auch für die wenigen nicht Breitband surfenden Besucher reichen.

    Animationen brauchen nun mal Javascript, Flash oder gar animierte GIF...
    Letzteres ist nun wirklich meist ne Zumutung...

  • Ich auch noch mal :)

    Ich hab ImageBrowser als Plugin aktiviert und stelle keine Veränderung fest wenn ich die Bilder hochlade und dann im Auswahlfenster mich umsehe ???

    Wo muß man wie klicken?

    LG!

  • Ich hab ImageBrowser als Plugin aktiviert und stelle keine Veränderung fest wenn ich die Bilder hochlade und dann im Auswahlfenster mich umsehe ???


    Falls Du Safari verwendest, nimm Firefox, dann erscheint er auch im Editorfenster als eigener Button. ;) (zumindest wenn WYSIWYG im Benutzerprofil aus ist)


    Nochmal zum Thema Lightbox:

    Zitat

    Nutzern älterer Browser kann man nur einen neuen als Alternative anbieten. Javascriptverweigerer sollten wissen was sie tun, und damit leben können, dass ein Bild in einer HTML-Seite geöffnet wird...


    Hi frankie,
    nun ich kann nicht bestimmen, was meine Besucher für BS/Browser benutzen sollen, noch ihr Surfverhalten… dennoch würde mich interessieren, ob eine hübsche Alternative grundsätzlich möglich ist. :)
    Vielleicht ist es ja kein großer Akt, da was zu drehen, vielleicht hat es ja sogar schon jmd. erfolgreich gemacht … who knows …

    Grüße,
    pete

  • Zitat

    Falls Du Safari verwendest, nimm Firefox, dann erscheint er auch im Editorfenster als eigener Button. (zumindest wenn [COLOR="Red"]WYSIWYG im Benutzerprofil aus ist[/COLOR])

    Daran lag es, danke :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!