Bilder-Popup-Fenster

helterskelter · 10.08.2009

servus

,
also ich arbeite im DW CS3, habe mehrere HTML-seiten erstellt, einge auf eigenen DWT-Vorlagen mit beareitbaren Bereichen basierend, und einige unabhängige HTML-Seiten (die von der Vorlage gelöst wurden, da sie mit mehr Ebenen arbeiten.
ok, ich habe eine index/News-Seite, auf der kleinere Vorschaubilder plaziert sind. Ich möchte größere Bilder davon (oder auch Texte) in einem Extra-Fenster öffnen lassen, aber nicht in einem herkömmlichen Browserfenster (nicht so schön) , sondern zentriert, über die ganze Seite.
Geht das nur mit Flash?
Ich hab einiges über das Verhalten probiert mit extra Ebenen (Effekt- Ebenen Ein/Auslenden, Vergrößern/Verkleinern) aber alles net optimal.

arribua · 10.08.2009

AW: Bilder-Popup-Fenster

Probier das aus, hoffe entspricht Deinen Wünschen.
Deinen Bedürfnissen anpassen erlaubt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#inhalt {width:800px;
height:400px;
border:1px solid black;
position:relative;
top:100px;
}
/* Beginn CSS für Bildgalerie */
#bildgalerie {width:450px;
height:350px;
border:1px solid blue;
overflow:auto}

#bild1klein, #bild2klein,
#bild3klein, #bild4klein,
#bild5klein, #bild6klein,
#bild7klein, #bild8klein,
#bild9klein {width:100px;
height:69px;
margin:0px 20px 20px 0px;
float:left}
#bild1gross, #bild2gross,
#bild3gross, #bild4gross,
#bild5gross, #bild6gross,
#bild7gross, #bild8gross,
#bild9gross {position:absolute;
right:0px;
top:0px;
visibility:hidden}

#bild1klein:hover #bild1gross {visibility:visible}
#bild2klein:hover #bild2gross {visibility:visible}
#bild3klein:hover #bild3gross {visibility:visible}
#bild4klein:hover #bild4gross {visibility:visible}
#bild5klein:hover #bild5gross {visibility:visible}
#bild6klein:hover #bild6gross {visibility:visible}
#bild7klein:hover #bild7gross {visibility:visible}
#bild8klein:hover #bild8gross {visibility:visible}
#bild9klein:hover #bild9gross {visibility:visible}

</style>
</head>
<body>
<div id="inhalt">
<div id="bildgalerie">
<div id="bild1klein">
<img src="bilder/klein/bild_klein001.jpg" />
<img id="bild1gross" src="bilder/gross/bild_gross001.jpg" />
</div>

<div id="bild2klein">
<img src="bilder/klein/bild_klein002.jpg" />
<img id="bild2gross" src="bilder/gross/bild_gross002.jpg" />
</div>

<div id="bild3klein">
<img src="bilder/klein/bild_klein003.jpg" />
<img id="bild3gross" src="bilder/gross/bild_gross003.jpg" />
</div>

<div id="bild4klein">
<img src="bilder/klein/bild_klein004.jpg" />
<img id="bild4gross" src="bilder/gross/bild_gross004.jpg" />
</div>

<div id="bild5klein">
<img src="bilder/klein/bild_klein005.jpg" />
<img id="bild5gross" src="bilder/gross/bild_gross005.jpg" />
</div>

<div id="bild6klein">
<img src="bilder/klein/bild_klein006.jpg" />
<img id="bild6gross" src="bilder/gross/bild_gross006.jpg" />
</div>

<div id="bild7klein">
<img src="bilder/klein/bild_klein007.jpg" />
<img id="bild7gross" src="bilder/gross/bild_gross007.jpg" />
</div>

<div id="bild8klein">
<img src="bilder/klein/bild_klein008.jpg" />
<img id="bild8gross" src="bilder/gross/bild_gross008.jpg" />
</div>

<div id="bild9klein">
<img src="bilder/klein/bild_klein009.jpg" />
<img id="bild9gross" src="bilder/gross/bild_gross009.jpg" />
</div>

</div> 
</div> 
</body>
</html>

Daviot · 11.08.2009

AW: Bilder-Popup-Fenster

oder du machst es dir einfach und benutzt eine Lightbox.
Und anpassen kann man die Lightbox auch noch.

Lightbox:

zepz · 11.08.2009

AW: Bilder-Popup-Fenster

danke! hat mir auch geholfen

helterskelter · 11.08.2009

AW: Bilder-Popup-Fenster

danke, genau das hab ich gesucht..

quasibodo · 13.08.2009

AW: Bilder-Popup-Fenster

ich möchte in dem Zusammenhang nur kurz anmerken, daß für Lightbox JavaScrip aktiviert sein muß und bei flash natürlich ein halbwegs aktueller Player...

Für Suchmaschinen ist die o.a. reine HTML + CSS - Lösung die beste. Perfekt wäre es dann noch, wenn man in html einen Alternativtext für die Bilder hinterlegt, etwas so:

<img id="bild1gross" src="bilder/gross/bild_gross001.jpg" alt="Bildbeschreibung oder Name"/>

helterskelter · 13.08.2009

AW: Bilder-Popup-Fenster

also, es funktioniert schon mal.
was müsste ich im code ändern, daß ich vom thumbnail direkt verlinke, also bei einem clickOn auf das thumbnail, z.b. per hotspot?
grüße

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lightbox</title>
<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>
<link href="css/lightbox.css" rel="stylesheet" type="text/css "media="screen" />
</head>

<body>
<div id="thnail"><img src="http://www.psd-tutorials.de/modules/Forum/images/thumb-1.jpg" width="100" height="40" border="0" /></div>
<a href="http://www.psd-tutorials.de/modules/Forum/images/image-1.jpg" rel="lightbox" title="sd design">image #1</a>
</body>
</html>

diese zeile stellt den aktuellen link her
<a href="images/image-1.jpg" rel="lightbox" title="sd design">image #1</a>

so sähe eine verlinkung via ´Eigenschaften verändern- JavaScript aufrufen` aus.
<div id="thnail"><img src="images/thumb-1.jpg" width="100" height="40" border="0" onclick="MM_callJS('<a href=\"images/image-1.jpg\" rel=\"lightbox\" title=\"sd design\">image #1</a>')" /></div>

geht aber net..

helterskelter · 13.08.2009

AW: Bilder-Popup-Fenster

P.S. komisch, irgendwie wird beim edit der code verändert..hm hm

"http://www.psd-tutorials.de/modules/Forum/images/thumb..
das is natürlich quatsch..

salvaro · 13.08.2009

AW: Bilder-Popup-Fenster

was müsste ich im code ändern, daß ich vom thumbnail direkt verlinke, also bei einem clickOn auf das thumbnail, z.b. per hotspot?

Ähm, also ich verstehe die Frage nicht so recht!
Setz doch das <img> element einfach ins <a> mit rein?!

<a><img /></a>

helterskelter · 13.08.2009

AW: Bilder-Popup-Fenster

also nochmal
was müsste ich den im code ändern, daß der link beim ClickOn auf das thumbnail statt auf " image #1" funktioniert?

greez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lightbox</title>
<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>
<link href="css/lightbox.css" rel="stylesheet" type="text/css "media="screen" />
<style type="text/css">

</style>
</head>

<body>
<div id="thumb"><img src="images/thumb-1.jpg" width="100" height="40" /></div>
<a href="images/image-1.jpg" rel="lightbox" title="sd design">image #1</a>
</body>
</html>

salvaro · 13.08.2009

AW: Bilder-Popup-Fenster

Wie gesagt das <img /> ins <a> mit einsetzen:

<body>
<div id="thumb"><a href="http://www.psd-tutorials.de/modules/Forum/images/image-1.jpg" rel="lightbox" title="sd design"><img src="http://www.psd-tutorials.de/modules/Forum/images/thumb-1.jpg" width="100" height="40" /></a></div>
</body>

j0shua · 14.08.2009

AW: Bilder-Popup-Fenster

Wenn du/ihr code postest, solltest du die die Code Tags benutzen.
Funktioniert über den #-Button oben in der Leiste wenn du eine Nachricht verfasst.
Dann ist er einfacher zu lesen und wird auch nicht abgeschnitten.

Code:

Hier würde dein Code stehen