Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Grüßt Euch,
mittlerweile habe ich es geschafft, dass Lightbox 2 einwandfrei funktioniert. Jedoch stört mich dort folgendes:
Wenn ich ein Bild in der Größe 3000x3000 als Beispiel hochlade, wird dieses auch angezeigt nach einem Klick auf das Thumb.
Das würde heißen, dass ich jedes Foto zweimal bearbeiten muss. Einmal für das Thumb und einmal für die Ausgangsgröße.
Ist es nicht möglich, dass das Ausgangsbild in der Lightbox CSS angepasst werden kann ?
Wenn ja, wie ?
Danke
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.
poste mal ben die lightbox css :)
aber mal zu den thumbnails: ich finde die werden total überbewertet, erst recht wenn du ne einheitsgröße anstrebst
<a title="http://hardi.rockt.es/site/wp-content/uploads/2.jpg" rel="lightbox[itsme]" href="http://hardi.rockt.es/site/wp-content/uploads/2.jpg"><img src="http://hardi.rockt.es/site/wp-content/uploads/2.jpg" alt="lost" width="150" height="160" />Bei meinen lightbox thumbs nehm ich einfach das orginal-file und pass die größe an:
width="150" height="160"
hat allerdings den nachteil das bei großes bildern ( bmp usw...) die Bilder lange zum Laden brauchen
Hey,
die Thumbs sind kein Problem, nur die Ausgangsbilder dann. ;)
Hier mal die CSS
#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; }Off Topic: @SessionX, jedes mal wenn ich bei dir auf die Seite komme ist der Wartungsmodus angeschaltet, hat das einen bestimmten Grund?
Ich wollte mir gerne mal die Seite angucken, um zu erfahren ob das "kostenlose 125x125 Werbung" was für mich sein könnte!
Macht nur leider derzeit wohl kein Sinn, wenn sie ständig im Wartungsmodus steckt.
Auch wenns spät ist, aber vielleicht hilft es anderen.
Hab die mal an 2 Punkten umgeschrieben.
Ich hoffe dir hilft das, einziger Nachteil, bei nicht quadratischen Thumbnails, also wenn du die im Adminmenü nicht automatisch beschneiden lässt, also mal längs, mal quer, dann bleibt ein längerer unschöner weißer Rand unten.
Einfach mal testen.
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ [B][COLOR=Red]max-width: 480px; max-height: 480px;[/COLOR][/B]}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; [COLOR=Red][B]max-width:500px; max-height:500px;[/B][/COLOR] 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; max-width: 500px ; }
#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; }Ich verstehe nicht, wo diese Angaben, bzw. in welcher CSS-Datei die zu finden sind! Ich habe bisher alles durchsucht, aber die Einträge nicht gefunden.
Verkleinert er die Bilder dann auch beim Hochladen oder werden die nur verkleinert dargestellt? Geht mir um den verbrauchten Speicherplatz auf dem Server, weil ne 3000er Breite auf 800 begrenzt ist nicht wirklich kleiner.
Dieses "Flexible Upload" fand ich nicht überzeugend, weil mir das die Ränder vom Bild zum Text hin total verhauen hat.
Kann mir da wer weiterhelfen?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!