[FRAGE] Kann jemand mein Fensterscript veredeln ?

DarkVampire666 · 02. Apr. 2016

Hi !

Ich bin gerade dabei, meine Website zu überarbeiten und somit natürlich auch meine Bildergalerie. Bislang habe ich für neue Fenster folgendes Script verwendet :

<A HREF=# onClick="window.open('http://www.melles-midnight.de/MMFly2GA1.htm','','width=462,height=630');return false">Öffne neues Fenster in gewünschter Größe</A>

Das funktioniert zwar prima, ich möchte mein Galeriekonzept allerdings auch diesmal anders gestalten. Und dazu muss mein Script angepasst bzw veredelt werden. Bislang habe ich ganze Bildergelarien in einem neuen Fenster öffnen lassen in einem Frameset, links waren maximal 25 Thumbnails untereinander untergebracht, rechts war Platz für das eigentliche Bild. Das gefällt mir so nun nicht mehr.

In meinem neuen Entwurf sind die Thumbnails nun in einem Block nebeneinander aufgereiht. Ich hätte jetzt gerne folgendes : Wenn man auf einen Thumbnail klickt, soll sich ein neues Fenster in der Größe des Originalbildes öffnen + etwas Platz nach unten ( damit ich unter dem Bild noch verschiedene Dinge vermerken kann wie Datum, Ort & Fotograf ). Wenn man nun auf "WEITER" klickt, soll das nächste Bild im selben Fenster geöffnet werden, das Fenster soll sich dann aber der neuen Bildgröße flexibel anpassen und mir auch hier wieder Platz nach unten frei lassen ( da kann ich durchaus auch die gewünschte Pixelanzahl händisch festlegen für jedes Bildfenster ). Das gleiche möchte ich, wenn man auf "ZURÜCK" klickt.

Alternativ kann, wenn man auf "WEITER" oder "ZURÜCK" klickt auch das bestehende Fenster geschlossen und gleichzeitig ein neues Fenster in neuer Wunschgröße geöffnet werden.

Kann mir diesbezüglich jemand hier weiterhelfen ?

Dunkle Grüße

Melle ^v^

kkapsner · 03. Apr. 2016

Vielleicht solltest du dir mal eines der vielen Lightbox-Skripte ansehen. Neue Browserfenster zu öffnen ist bei vielen Benutzern gar nicht möglich. Da hast du dann meistens einen neuen Tab, wenn überhaupt.

DarkVampire666 · 03. Apr. 2016

Meine ganze Website öffnet in einem neuen Fenster ( übrigens mit dem oben genannten Script, leicht abgewandelt in Kombination mit einem Mouse over-Script ). Ich habe noch nirgendwo gesehen, dass die Seite in einem neuen Tab geöffnet hat anstatt im Fenster. Dazu weise ich auf der neuen Startseite meiner zukünftigen Website ausdrücklich darauf hin, dass die Seite in einem neuen Fenster öffnet.

Wie ist es denn mit meiner aktuellen Seite ? Öffnet da die Hauptseite bei Dir in einem neuen Tab ( ich verwende dort das selbe Script ) ?
Die URL findest Du unten in meiner Signatur.

Ich suche eigentlich schon ganz konkret nach einer Fensterlösung. Ich denke, mit ein paar Abwandlungen des ursprünglichen Scripts ist das machbar. Ich bin da aber Laie, kann das nicht selbst austüfteln.

Stichwort Lightboxes : Muss man dazu ein Programm installieren ?
Mir ist vor allem auch etwas Gestaltungsfreiheit wichtig und dass ich unter dem Bild noch dies und das vermerken kann. Und natürlich, dass sich das Script an meine jeweilige Wunschfenstergröße ( je nach Bild ) anpasst.

kkapsner · 03. Apr. 2016

Es öffnet sich bei mir tatsächlich auch ein neues Fester, obwohl ich meinem FF explizit gesagt habe, dass er das nicht tun soll. Das ist etwas unschön. Außerdem wirkt diese Methode etwas altbacken... moderne Webseiten machen sowas nicht mehr. Aber das ist natürlich kein Argument, wenn du das unbedingt so machen willst.

Um die Größe eines Browserfenster zu ändern, kannst du https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo verwenden - aber als Benutzer würde ich mich da etwas bevormundet fühlen. Denn wenn ich vorher das Fenster irgendwie in der Größe geändert habe, wird das wieder zurückgesetzt. Auch kannst du Probleme bekommen, wenn du dann das Fenster größer machen willst, als der Bildschirm ist (Stichwort Smartphones und Tablets). Auch müsstest du deine Bilderanzeige umbauen und nicht das "Skript", das das Fenster öffnet.

Für die Lightboxes muss man kein Programm installieren. Man kopiert einfach die JS-Dateien auf seine Webseite, verlinkt sie im HTML und fügt das HTML/JS hinzu, das sie zum funktioneren benötigen. Meistens relativ einfach. Auch kann man bei den meisten extrem viel selbst gestalten. Entweder über CSS oder indem man im JS einfach ein bisschen was ändert. Alles kein Hexenwerk.
Alle Lightboxes, die ich kenne, passen sich auch an die Bildergröße an. Aber nicht nur daran, sondern auch an die Browser-/Monitorgröße. Dadurch muss man sich nicht um irgendwelche Skalierungen kümmern, wenn der Benutzer die Browserfenstergröße ändert.

Wobei... ich hab' mir das bei deiner jetzigen Seite mal etwas genauer angesehen und denke, dass eine Lightbox ev. nicht ideal ist, da diese mit einem Overlay arbeiten. Du brauchst eigentlich ein ausgewachsenes Bildergallerieskript. Aber schau' dir einfach mal die Optionen an, die du hast. Ich denke, dass deine jetzige mit den neuen Festern, die unpraktischste und "unmodernste" ist.

DarkVampire666 · 03. Apr. 2016

Hi !

Was genau spricht denn gegen dieses Overlay bei einem Lightbox-Script ? Das heißt doch dann nur, dass die eigentliche Website beim Anschauen eines Bildes stark abgedunkelt werden würde, oder ?

Ich habe mal 2 Screenshots angehängt. Da sieht man die Aufmachung meiner neuen Seite, mein Thumbnail-Konzept und einen sehr groben Entwurf, wie ich mir das mit dem Fenster / dem Overlay in etwa vorstelle. Man könnte die Angaben unter dem Bild natürlich auch "flacher" gestalten. Es ist noch offen, wie ich genau mit Hochkantbildern verfahren soll, wenn sie zu klein angezeigt werden ( zB durch eine Skalierung ), dann erkennt man manches darauf nicht mehr. Man sollte notfalls scrollen können - auch in einer Lightbox - wenn jemand eine geringe Bildschirmauflösung hat wie zB 1024x768.

kkapsner · 04. Apr. 2016

Es spricht nichts gegen ein Overlay. Dachte nur, dass es ev. nicht zu deinem Layout passt. Aber bei deinem neuen Komzept könnte das doch ganz gut passen.

Ich würde da den Nutzern Optionen geben. Wenn das Bild zu groß ist, würde ich es erst kleiner skalieren, aber dann mit einem Klick einen Zoom auf die Originalgröße machen. Genau so, wie das auch der Firefox in seiner Bilderansicht macht.

DarkVampire666 · 10. Apr. 2016

Ich würde da den Nutzern Optionen geben. Wenn das Bild zu groß ist, würde ich es erst kleiner skalieren, aber dann mit einem Klick einen Zoom auf die Originalgröße machen. Genau so, wie das auch der Firefox in seiner Bilderansicht macht.

--> Okay, da kommt es mir darauf an, wie gut oder wie schlecht die Skalierung aussieht ( ob das Bild dann zB leicht pixelig aussieht oder so ). Eigentlich mag ich so etwas gar nicht.

Kann mir hier jemand mal geeignete Lightboxes vorschlagen ( auch alternativ welche mit Scrollbalken ) ? Ich habe selbst schon ein wenig herumgeschaut, finde das aber mühselig und viele Lightboxanbieter, die angepriesen werden, existieren auch schon nicht mehr... Wichtige Voraussetzungen : Ich möchte das Script farblich anpassen können, ich brauche die Möglichkeit, unter dem jeweiligen Bild noch Text unterzubringen, es sollte nicht ZU viele Buttons & allgemeinen Schnickschnack haben, ich mag es da eher schlicht ( bzw wäre es auch gut, wenn ich die Buttons durch Grafiken ersetzen könnte ), ich sollte das Script von der Größe her anpassen können bzw sollte es sich automatisch dem jeweiligen Bildformat anpassen können. Wenn das offene Script die Seite darunter stark abdunkelt, ist mir das ebenfalls sehr recht. Da darf mein Seitenlayout getrost in den Hintergrund treten.

Dunkle Grüße

Melle ^v^

kkapsner · 12. Apr. 2016

Die meisten Browser behandeln solche Verkleinerungen eigentlich ziemlich gut. Aber das müsstest du bei deinen Bildern einfach mal ausprobieren. Manche Motive erzeugen dabei komische Artefakte.

Ich hab' jetzt selbst nur mit meiner eigenen gearbeitet, da ich da genau weiß, was ich anpassen muss, wenn ich etwas ändern will. Prinzipiell kann man das Layout immer anpassen - bei manchen ist es aber einfacher als bei anderen. Aber vielleicht hat jemand anderes hier schon sehr gute Erfahrungen mit einer "öffentlichen" gemacht.

DarkVampire666 · 27. Mai 2016

Hi !

Ich habe nun eine Lightbox gefunden, die mir auf Anhieb gefällt und zwar diese hier : Colorbox - a jQuery lightbox

Die ist schön schlicht vom Design her ohne Schnickschnack und man kann diverse Anpassungen vornehmen. Ob man nun bei jedem einzelnen Bild die "Fenstergröße" neu einstellen kann, weiß ich noch nicht, aufgeführt ist auf der Seite eine Reihe von verschiedenen Tags, die man optional einbauen kann.

Nun ist es so, dass dies eine jQuery-Lightbox ist ( offenbar ein Plugin ). Ich hab davon keine Ahnung. Auf der Seite kann man die Lightbox-Dateien herunterladen, was ich noch nicht getan habe. Wie funktioniert das denn mit diesem jQuery ?

Muss ich da was vorinstallieren ?

Dunkle Grüße

Melle ^v^

mikdoe · 28. Mai 2016

hast du denn Colorbox Beginner's Guide durch gearbeitet?
die dort erwähnte jquery.min.js findest du hier: https://code.jquery.com/jquery-2.2.4.min.js
nur noch in jquery.min.js umbenennen

DarkVampire666 · 29. Mai 2016

Ich bin noch dabei, das im Kopf irgendwie klar zu kriegen, wenn ich auf den Link klicke, kann ich die jquery.min.js irgendwie nicht downloaden, es erscheint ein Browserfenster voll mit dem Bibliothekencode.

Auf der jQuery-Seite kann man aber auch Downloadlinks anklicken. Welchen der beiden nehme ich da denn nun ?

Download the compressed, production jQuery 2.2.4
Download the uncompressed, development jQuery 2.2.4

Und muss ich jQuery immer auf dem neuesten Versionsstand halten in Zukunft, wenn ich es verwende ?

Oder muss ich den ganzen Bibliotehekencode kopieren, das in den Editor tun und das dann als "jquery.min.js" abspeichern ?

-----
// Edit : Das mit dem Abspeichern hat geklappt, das Script läuft.

Nun möchte ich natürlich in der Colorbox.css das ganze farblich anpassen.

Nur : Wie geht das ?

Ich bin in CSS nicht bewandert, weiß nur, dass es recht einfach sein soll. Die Colorbox sollte natürlich schwarz sein, die Vor-und Zurück-Pfeile sollten sichtbar sein, das Wegklick-X, ein Untertext, die Seite darunter sollte beim Draufklicken abgedunkelt werden ( das kann man da alles machen, das weiß ich aus den Demos ). Nur wie ?

Dies ist ein Auszug des Codes, den man editieren kann, um sein Wunschergebnis zu erhalten :

User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

- - - Aktualisiert - - -

So, ich habe jetzt schon Verschiedenes herausgefunden. der Lightbox-Hintergrund ist nun schwarz, ich habe nun auch sichtbare Navigations-Elemente *fg*. Ein paar Dinge bleiben aber nach wie vor rätselhaft : Rein theoretisch hat das Ding auch eine eingebaute Slightshow. Im CSS-Code steht auch, die sei aktiv. Näher definiert wurde in der Tat neben "Previous", "Next" & "Close" auch die "Slideshow"-Position - in der ColorBox ist davon, wenn sie offen ist, aber nichts zu sehen, man kann da auch nirgendwo was Derartiges anklicken. "Previous", "Next" und "Close" funktionieren einwandfrei und tadellos ( mit der neuen PNG "controls5", die von den Grundpositionen auf der originalen Datei "controls.png" basiert - hier habe ich einfach aus Variante 2 im MSPaint die Bildsymbole an die richtigen Positionen von Variante 1 kopiert ).

Wobei ich die Slightshow jetzt auch nicht UNBEDINGT brauche.

Und wie verändere ich den Text, der aktuell neben den Navigationssymbolen steht ( "image 1 of 2" ), festgelegt im Tag #cboxCurrent ? Ich hätte da zB gerne stehen "Bild 1 von 2".

Weiterhin rätselhaft : Der Titel ( #cboxTitle ). Ich nehme mal an, dies ist der Text, der unter dem geöffneten Bild stehen soll.
Frage 1 : Wie definiere ich da eine Linkfarbe ?
Frage 2 : Ich nehme mal stark an, dass ich den jeweiligen Text außerhalb der CSS-Datei festlegen muss, also irgendwo in meiner HTML-Datei mit den Thumbnails ( zB diesen hier : "Fotograf : <a href="http://www.schwarze-farben.de" target="_blank">Marcell Waltzer</a>". Wie geht das ?

Wie dunkle ich meine Website ab, wenn ich darüber die Lightbox öffne ? Momentan öffnet das Bild in der originalen Größe ( das ist gut so, man kann dann auch im Browserfenster nach unten scrollen ), abgedunkelt darunter wird aber aktuell gar nichts.

Mir raucht der Kopf !

Dies ist der aktuelle Code :

/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursorointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/controls.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#000000; overflow:hidden;}
.cboxIframe{background:#000000;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; font-weight:bold; text-align:center; width:100%; color:#336252;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; font-weight:bold; color:#336252;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(controls6.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(controls6.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(controls6.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progidXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

mikdoe · 29. Mai 2016

Wenn du immer nur den Beitrag änderst wird das sehr unübersichtlich. Mach doch einfach für jeden Fortschritt auch eine eigene Antwort.

DarkVampire666 · 29. Mai 2016

Das habe ich durchaus versucht. Nur fasst das System hier im Forum dann die Beiträge zu einem zusammen ( alle, die man selbst untereinander geschrieben hat ).

Wie dem auch sei - bevor wir uns um die restlichen Lightbox-Unstimmigkeiten kümmern : Ich habe jetzt noch ein anderes, ganz grundsätzliches, Problem mit der Lightbox-Lösung.

Und zwar besteht meine neue Website - genau wie meine, die jetzt noch online ist - aus einem Frameset. Ich habe eben mal spaßeshalber das Ganze in einem Testframeset ausprobiert, weil ich neulich irgendwo las, Frames seien ungünstig für Lightboxes. Tja, was soll ich sagen - irgendwie ist die Lightbox in dem Frame gefangen, in dem ich sie öffne, die anderen Frames liegen drüber

Ich brauche nun eine Lösung, die es mir ermöglicht, die Lightbox ÜBER allen Frames öffnen zu lassen ( das betrifft auch Inlineframes ), denn sonst ergibt eine Lightbox-Galerie für mich kaum Sinn !

Ich könnte natürlich zB noch eine Zwischenseite im neuen Fenster öffnen lassen mit den Thumbnails und von dort aus die Lightbox starten aber das würde mein ganzes Konzept verkomplizieren und das wäre auch nicht wirklich im Sinne des Erfinders. Und mal eben eine framebefreite Version meiner Website bauen möchte und kann ich auch nicht, denn da steckt jetzt schon ganz schön viel Arbeit drin und die Seite ist aus meiner Sicht wirklich wunderschön geworden. Für einen komplett neuen Entwurf habe ich auch schlichtweg nicht die Zeit, ganz ehrlich.

Also muss nun mal ganz fix eine Lösung her ( ich könnte kotzen, sorry ) !

Dies ist der Quelltext des Testframesets :

<HTML>
<HEAD>
<TITLE>† Melle's Midnight † DIE 7 TODSÜNDEN †</TITLE>
</HEAD>
<FRAMESET ROWS="12,414" frameborder="0" framespacing="0" framepadding="0"
border="0" >
<FRAME SCROLLING="No" NORESIZE SRC="Galoben.htm">
<FRAMESET COLS="100%">
<FRAME NAME="rechts" SRC="LightBoxTest01.htm">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
</BODY></NOFRAMES></HTML>

Dies ist der Quelltext der Lightbox-Testseite ohne Frames :

<HTML>
<HEAD>
<link rel="stylesheet" href="colorboxTest01.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
<TITLE>LIGHTBOX-TEST 01</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<P>
<a class='gallery' href='Waltzer05.jpeg'><IMG SRC="http://forum.jswelt.de/Unterseiten/Galerie/Thumbnails/NWSTNWaltzer05.jpeg" WIDTH="150"
HEIGHT="150"></a><a class='gallery' href='Skunk11a.jpeg'><IMG WIDTH="227" HEIGHT="150" SRC="NWSTNSkunk11a.jpeg"></a><a class='gallery' href='DarkmoonBild06oWeb.jpeg'><IMG
SRC="http://forum.jswelt.de/Unterseiten/Galerie/Thumbnails/NWSTNDarkmoonBild06o.jpeg" WIDTH="102"
HEIGHT="150"></a><a class='gallery' href='CatMasonBild02WS.jpeg'><IMG SRC="http://forum.jswelt.de/Unterseiten/Galerie/Thumbnails/NWSTNCatMasonBild02web.jpeg"
WIDTH="212" HEIGHT="150"></a>
</BODY></HTML>

Gibt es da irgendwie die Möglichkeit, so etwas wie einen _blank-Tag einzubauen ( target="_blank" ) ?

BTW : ist ja lustig, dass im reinkopierten Quelltext hier nun "forum.jswelt.de" mit drin steht... LOL

- - - Aktualisiert - - -

--------------------------------------------
EDIT : Nachdem mir ein guter Freund vorhin schrieb, dass es wohl keine Möglichkeit gebe, die Lightbox aus den Frames zu befreien, werde ich sie wohl trotzdem nutzen und die Thumbnails in einem neuen Fenster öffnen lassen ( ganz normal mit target="_blank", denn eine Größenbeschränkung eines Fensters ist bei dem Einsatz von Lightboxes ja Bullshit ). Sicher werde ich da noch ein Script einbauen zum Seite schließen, da der Seitenbesucher ja nicht völlig irritiert sein soll. Ist für mich derzeit der einfachste Lösungsansatz, denn meinen Webseitenentwurf möchte ich nicht canceln. Dazu sieht die Seite zu cool aus und es steckt schon zuviel Arbeit und Herzblut drin.

Nun Wegen der Übersichtlichkeit in diesem Thread : Ich habe nach wie vor Fragen, was das Lightbox-Script betrifft, kann aber irgendwie nicht jede Einzelantwort separat verfassen. Ich versuche es mit Trennlinien.

--------------------------------------------

Dann fange ich nochmal an :

1. Die Slideshow-Funktion taucht im Lightboxfenster nicht auf, obwohl der Quellcode der CSS-Datei sagt, sie sei aktiv. Ist wohl nicht näher definiert bislang. Kann mir jemand dazu Näheres sagen ? Ich brauche die Slightshow-Funktion aber nicht unbedingt, es ist nur ein nettes Extrafeature.

2. Wie verändere ich den Text, der aktuell neben den Navigationssymbolen steht ( "image 1 of 2" ), festgelegt im Tag #cboxCurrent ? Ich hätte da zB gerne stehen "Bild 1 von 2". Meine ganze Seite ist auf Deutsch.

3. Ich nehme mal an, der Tag "#cboxTitle" definiert den Text, der unter dem geöffneten Bild stehen soll. Die Textfarbe habe ich schon eingegeben. Wie definiere ich da zusätzlich die Linkfarbe ?

4. Wo lege ich den Text fest, der unter dem Bild stehen soll ? Da er bei jedem Bild abweichen wird, nehme ich an, dass ich dies außerhalb der CSS-Datei tun muss. Nur : Wie geht das ? ( Beispieltext : "Fotograf : <a href="http://www.schwarze-farben.de" target="_blank">Marcell Waltzer</a>" ).

5. Wie dunkle ich die Seite unter dem Lightbox-Script ab ? Bislang ist keinerlei Abdunklung zu erkennen, wenn ich ein Bild in groß öffne.

Hier nochmal der aktuelle Code ( die Smileys muss man sich wegdenken ) :

/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursorointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/controls.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#000000; overflow:hidden;}
.cboxIframe{background:#000000;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; font-weight:bold; text-align:center; width:100%; color:#336252;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; font-weight:bold; color:#336252;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(controls6.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(controls6.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(controls6.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progidXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

mikdoe · 30. Mai 2016

ah hast recht, das forum fasst das selbst zusammen, hab ich nicht dran gedacht.

zur frage: müssen das denn unbedingt frames sein? taugen da div boxen nicht auch?

[FRAGE] Kann jemand mein Fensterscript veredeln ?

DarkVampire666

New member

kkapsner

Super Moderator

DarkVampire666

New member

kkapsner

Super Moderator

DarkVampire666

New member

kkapsner

Super Moderator

DarkVampire666

New member

kkapsner

Super Moderator

DarkVampire666

New member

mikdoe

Moderator

DarkVampire666

New member

mikdoe

Moderator

DarkVampire666

New member

mikdoe

Moderator