mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 20.04.2024 04:02 Benutzername: Passwort: Auto-Login

Thema: Lightbox 2 vom 28.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Lightbox 2
Autor Nachricht
jen83
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 28.07.2009 10:14
Titel

Lightbox 2

Antworten mit Zitat Zum Seitenanfang

Hallo
Ich will den Lightbox2 Effekt benutzen, will aber nicht alle Bilder abblden. Das heißt: Ich will ein Bild abbilden und den Effekt aufrufen und dann 3 weitere Bilder durchblättern lassen.

Geht das? und wenn ja wie? ich hoffe ihr habt mein Problem überhaupt verstanden
Danke und schönen Gruß
  View user's profile Private Nachricht senden
denise2302

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 28.07.2009 10:17
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

<a href="deinbild1.jpg" rel="wahrscheinlichlightbox[gruppe]"><img src="kleinesbild1.jpg" /></a>
<a href="deinbild2.jpg" rel="wahrscheinlichlightbox[gruppe]"><img style="display: none;" src="kleinesbild2.jpg" /></a>
<a href="deinbild3.jpg" rel="wahrscheinlichlightbox[gruppe]"><img style="display: none;" src="kleinesbild3.jpg" /></a>


du kannst auch eine klasse anlegen und dies dann ins css schreiben zb
Code:

<a href="deinbild1.jpg" rel="wahrscheinlichlightbox[gruppe]"><img src="kleinesbild1.jpg" /></a>
<a href="deinbild2.jpg" rel="wahrscheinlichlightbox[gruppe]"><img class="hidden" src="kleinesbild2.jpg" /></a>
<a href="deinbild3.jpg" rel="wahrscheinlichlightbox[gruppe]"><img class="hidden" src="kleinesbild3.jpg" /></a>


und im css:
Code:

.hidden { display: none; }


Zuletzt bearbeitet von denise2302 am Di 28.07.2009 10:18, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
jen83
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 28.07.2009 10:22
Titel

Dankeschön

Antworten mit Zitat Zum Seitenanfang

Danke für die schnelle Hilfe. Das sieht ja ganz einfach aus. Werde ich gleich ausprobieren.
  View user's profile Private Nachricht senden
denise2302

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 28.07.2009 11:22
Titel

Antworten mit Zitat Zum Seitenanfang

naja im prinzip wird mit display: none das bild versteckt. im code ist es aber da und somit erscheint es trotzdem in der lightbox. ich hab das auch mal so eingesetzt *zwinker*
  View user's profile Private Nachricht senden
jen83
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.09.2009 14:25
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo ich habe noch eine Frage zur Lightbox!
Ich möchte gerne das die next und prev button dauerhaft angezeigt werden.
Hier ist der lighbox.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: 66px; 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; }

Vielen Dank schon mal!
  View user's profile Private Nachricht senden
ApfelQFeierabend

Dabei seit: 05.04.2008
Ort: Regensburg
Alter: 37
Geschlecht: Männlich
Verfasst Mo 07.09.2009 20:02
Titel

Antworten mit Zitat Zum Seitenanfang

mach aus
Code:
#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; }


Code:
#prevLink { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { background: url(../images/nextlabel.gif) right 15% no-repeat; }[/quote]
  View user's profile Private Nachricht senden
jen83
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 03.12.2009 18:05
Titel

Abdunkeln

Antworten mit Zitat Zum Seitenanfang

So ich schon wieder!
Ich habe noch ein Problem in Sachen Lightbox 2
Die Abdunklung geht nicht über die ganze Seite. Rechts bleibt ein Rand stehen.
Weiß jemand was ich falsch gemacht habe oder woran es liegen kann.
  View user's profile Private Nachricht senden
Kash

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

Antworten mit Zitat Zum Seitenanfang

Bitte poste das Online Beispiel.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Lightbox
lightbox js on startup
Lightbox und ScrollPane
Kontakform via Lightbox
2 Bilder in der Lightbox
bin zu dumm für lightbox
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.