Fotogalerie rechts, Möglichkeit das Bild links einzeln erscheint?

  • Guten Morgen allerseits,


    ich habe eine Seite mit Frames aufgebaut: http://www.bild-schoen.com/frameset.htm. In den Mainframe wird jeweils eine Seite geladen, in der rechts eine Bildergalerie erscheint. Bisher wird die kleine Bildansicht bei click in einem extra Fenster größer dargestellt. Ich hätte aber gerne, dass das Bild bei Anclick links neben der Galerie als einzelne, größere Ansicht erscheint. Einfach den Mainframe in 2 Frames aufteilen funktioniert leider nicht, da für die Startseite ect. der komplette Platz benötigt wird.
    Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt? Gibt es da vielleicht eine Möglichkeit mit Java Script, oder so? Vielen lieben Dank jedenfalls schon mal!
    Uta

  • Wenn die Großansicht immer die gleiche Größe hat, ist das mit JS relativ einfach:
    An der Stelle, an der die Großansicht erscheinen soll, platzierst Du ein Bild, das kann auch das berühmte Blind Gif sein (also ein vollkommen transparentes GIF) in der Größe, die auch die Großansicht hat. Diesem Bild weist Du einen Namen zu. Mit Klick auf die Vorschaubilder tauscht Du dann jeweils die Quelle des großen Bildes aus.
    Funktioniert wie gesagt nur, wenn die großen Bilder gleich groß sind, aber das scheint ja bei Dir der Fall zu sein.


    Gruß
    Lizzy

  • Vielen Dank für den Tip, Lizzy. Hm, hört sich einfach an aber so recht habe ich das irgendwie nicht begriffen. Wie mache ich das denn das bei Anclick des Vorschaubildes die große Ansicht anstelle des Pixels geladen wird? Könntest Du mir den Script vielleicht zum einbauen schicken? Oder weiß jemand wie ich das im Dreamweaver machen kann? Habe im Forum nichts in der Art finden können. Das wäre extrem nett.
    Grüße, Uta

  • Habe mal eben im DW probiert:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }


    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }


    function MM_findObj(n, d) { //v4.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && document.getElementById) x=document.getElementById(n); return x;
    }


    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>


    <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('gross1','gross2')">
    <table width="600" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td>&nbsp;</td>
    <td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gross','','gross1',1)"><img src="xy.jpg" width="150" height="200" name="gross" border="0"></a></td>
    <td>
    <table width="200" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td><a href="javascript:;" onClick="MM_swapImage('gross','','gross1',1)"><img src="x1.jpg" width="80" height="80" name="klein1" border="0"></a></td>
    <td><a href="javascript:;" onClick="MM_swapImage('gross','','gross2',1)"><img src="x2.jpg" width="80" height="80" name="klein2" border="0"></a></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>


    Natürlich siehst Du jetzt keine Bilder sondern nur Platzhalter...
    Das große Bild, das zu Anfang nur das transparente GIF ist, habe ich "gross" (hier ist es wichtig, dass das Ding einen Namen hat) genannt. Zum Testen gibt es dann die 2 kleinen Bilder (klein1 und klein2). Im DW das Fenster "Verhalten" öffnen. Das erste kleine Bild anklicken und dann im Fenster "Verhalten auf das + und "Bild austauschen" auswählen.
    Bei Bilder müsstest Du jetzt den Namen Deines großen Bildes sehen, diesen auswählen durch anklicken. Darunter steht dann "Quelle einstellen auf", hier suchst Du dann das passende große Bild aus.
    Es kann sein, dass das Verhalten auf onMouseover steht (bei mir ist das so), dann klick einfach im Fenster "Verhalten" aus die entsprechende Zeile und dann auf den Pfeil neben onIrgendwas und wähle onClick. Andere Verhalten löschst Du, indem Du sie anklickst und mit Klick auf das Minuszeichen entfernst.


    Hoffentlich habe ich mich halbwegs verständlich ausgedrückt.


    Gruß
    Lizzy

  • Wow, vielen Dank das Du Dir die Mühe mit mir machst, das war sehr hilfreich! Ich hab an Deiner Vorlage jetzt mal ein bisschen rumprobiert und generell klappt das mit dem Bildaustausch: http://www.bild-schoen.com/test_bildtausch.htm. Nur bin ich mit den Mouseover Einstellungen nicht so fit und das ausgetauschte Bild bleibt leider nicht stehen bei on Click. Ich hänge einfach mal noch einen Sreen mit meiner Dreamweaver Einstellung dazu. Nochmals ein ganz dickes Dankeschön!
    Uta

  • Jetzt noch die Zeile mit onMouseOut anklicken und dann oben drüber auf die Schaltfläche mit dem - und das selbe bei onMouseOver. Im Moment hast Du dem Bild 3 Aktionen zugewiesen und wir wollten doch nur eine....
    Sollte jetzt nichts mehr gehen, einfach in der nun noch verbliebenen Zeile Doppelklick auf Bild austauschen und Du kommst wieder in das Menü, wo Du das zu tauschende Bild und die Quelle des erscheinen-sollenden Bildes auswählst.


    Gruß
    Lizzy