Leicht transparenter Hintergrund bei...

[lebus]

Hallo Miteinander,

bin nun schon länger im Netz auf der Suche,
habe das Richtige aber noch nicht gefunden.

Möchte den Effekt auf meiner Seite einbauen,
dass nach Anklicken des Vorschaubildes,
eine Großansicht geöffnet wird, die einen
grauen leicht transparenten Hintergund hat und sich
sozusagen optisch über die Basisseite legt.

Begriffe wie Overlay oder teiltransparente PNG Grafik
sind mir auf der Suche begegnet, aber so das ausschlagebende
"Ja so geht es" habe ich noch nicht gefunden.

Ich gebe hier mal einen Link anbei,
wie ich mir das Ganze so vorstelle.

Man beachte das sich öffnende Fenster nach Anklicken
"Vollbild", so hätte ich es schon gerne.

Ideen??

Liebe Grüße
Ina

[Helmut]

Hi,

Du suchst sicher sowas wie eine Lightbox

Cu Helmut

[lebus]

Vielen Dank Helmut,

hatte ich auch gefunden, Grey Box, Light Box, Thick Box,
aber ich habe da so meine Bedenken, dass klein Ina das
alles so reibungslos in die HP integriert bekommt.

Gibt es da nicht eine kleine Deutschsprachige Hilfe.

"Wie mache ich was".

Liebe Grüße
Ina

[Helmut]

...

aber ich habe da so meine Bedenken, dass klein Ina das
alles so reibungslos in die HP integriert bekommt.

aber aber, bei Dir steht "Profi Member" unter dem Benutzername, das heisst Du brauchst nur einen Fingerschnipp mit links und das Ding ist gegessen...

Spass beiseite, der Einbau ist nicht das Problem.

1. In den Head Bereich der Seite kommt das

Code:

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

und das

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Die URL's natürlich angepasst auf deine Webseite, alo z.B. anstatt js/prototype.js viell. so inas_dateien/prototype.js

Dann schaust Du in die lightbox.css und prüfst ob die Dateien prevlabel.gif und nextlabel.gif Angaben passen, selbiges nochmal für die Dateien loading.gif und closelabel.gif in der lightbox.js.



Die Bilder bindest Du dann so ein:

Wenn ein Einzelbild angezeigt wrden soll

Code:

<a href="images/bild1.jpg" rel="[B]lightbox[/B]"><img src="vorschaubild1.jpg" width="xyz" height="zyx" alt=""></a>

Für ein Set von Bildern lightbox[blumen] ist der Name des Bildersets, also z.B. blumen, kinder, zeichnungen

Code:

<a href="images/bild1.jpg" rel="[B]lightbox[blumen][/B]"><img src="vorschaubild1.jpg" width="xyz" height="zyx" alt=""></a>
<a href="images/bild2.jpg" rel="[B]lightbox[blumen][/B]"><img src="vorschaubild2.jpg" width="xyz" height="zyx" alt=""></a>
<a href="images/bild3.jpg" rel="[B]lightbox[blumen][/B]"><img src="vorschaubild3.jpg" width="xyz" height="zyx" alt=""></a>

Cu Helmut

[prm]

Wäre das auch eine Alternative, oder wäre dir das vom Effekt her zu "einfach"?
http://www.dynamicdrive.com/style/csslib...ge-viewer/

[lebus]

Vielen lieben Dank Ihr Beiden,

also ich glaube Zweiteres möchte wohl eher in mein
beschränktes Hirn gehen.

Gefällt mir auch die Variante.

Wenn alles nicht klappt werde ich es noch einmal
mir der Lightbox probieren.

Irgendwie werde ich mich schon da durchwursten.

Liebe Grüße
Ina

[Helmut]

...

also ich glaube Zweiteres möchte wohl eher in mein
beschränktes Hirn gehen.

...nun mach dich mal nicht so klein. Das packts Du doch, falls nicht, hier fragen.

Bau doch mal eine einfache Testseite, dann siehste wie es funktioniert, bzw. wo Probleme auftauchen.

Cu Helmut

[lebus]

Lieber Helmut,

gut du hast mir Mut gemacht,
ich versuche es mit der Lightbox,
würde aber soweit es brennt und meine
Zellen vollkommen versagen, gerne dann
auf das Angebot der Unterstützung zurückommen.

Wenn ich es einmal drin habe, dann geht es ja auch,
ha... aber der Weg dorthin ist hart und steinig.

Liebe Grüße
Ina ;-)