mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 00:02 Benutzername: Passwort: Auto-Login

Thema: Lightbox 2: next / prev Buttons werden nicht angezeigt vom 04.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Lightbox 2: next / prev Buttons werden nicht angezeigt
Autor Nachricht
CudaTR
Threadersteller

Dabei seit: 16.10.2007
Ort: -
Alter: 38
Geschlecht: Weiblich
Verfasst Do 04.02.2010 00:07
Titel

Lightbox 2: next / prev Buttons werden nicht angezeigt

Antworten mit Zitat Zum Seitenanfang

Hallöchen,

habe das Thema zwar schon öfter gesehen, allerdings hat nix geholfen. Bin am verzweifeln.
Bitte um Hilfe, denn sowohl die Bildbeschreibung als auch der "Schließen" button werden angezeigt.

Online-Demo: http://www.endstation-wuhlheide.com/till.html (wenn man auf "Weitere Bilder" klickt)

Die beiden Grafiken liegen hier: http://www.endstation-wuhlheide.com/images/nextlabel.gif bzw. prevlabel.gif

Lightbox.css (http://www.endstation-wuhlheide.com/lightbox.css)
Code:
#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#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; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 113px; float: right;  padding-bottom: 0.7em; outline: none;}       

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


Alle anderen Dateien liegen im Standardverzeichnis.

So sieht das ganze auf der till.html aus:

Head-Bereich
Code:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="lightbox.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>


Bilderverlinkung im Body Bereich:

Code:

<a href="images/Till/01.jpg" rel="lightbox" title="LIFAD Shooting">Weitere Fotos</a>
<a href="images/Till/02.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/03.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/04.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/05.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/06.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/07.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/08.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/09.jpg" rel="lightbox" title="LIFAD Shooting"></a>
<a href="images/Till/10.jpg" rel="lightbox" title="LIFAD Shooting"></a>


Getestete Lösungswege:
- nextlabel.gif und prevlabel.gif in andere Verzeichnisse verschoben und links angepasst.
- den Absatz in der Lightbox.css in folgenden geändert:
Code:
#prevLink { left: 0; float: left;background: url(../images/prevlabel.gif) left 0% no-repeat;}
#nextLink { right: 0; float: right;background: url(../images/nextlabel.gif) right 0% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 0% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 0% no-repeat; }

- Kompletten Link zur Datei angegeben
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 04.02.2010 09:13
Titel

Antworten mit Zitat Zum Seitenanfang

Das liegt daran das Du die ReadMe nicht richtig gelesen hast.


Code:
<a href="img.jpg" rel="lightbox[collection]"><img src="img.jpg" /></a>
  View user's profile Private Nachricht senden
Anzeige
Anzeige
CudaTR
Threadersteller

Dabei seit: 16.10.2007
Ort: -
Alter: 38
Geschlecht: Weiblich
Verfasst Do 04.02.2010 11:38
Titel

Antworten mit Zitat Zum Seitenanfang

Danke... ich dussel... vor lauter ärger hab ich daran net gedacht.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Lightbox 2 prev & next buttons, der 1000ste Thread
Lifghtbox V2 und die Prev Next Buttons
Mal wieder ein Problem mit PREV/NEXT Buttons bei Lightbox2
Javascript Lightbox Weiter/Zurück Buttons
Interaktive PDF Buttons werden nicht angezeigt
Lightbox 2
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.