luftpumpe: bildergalerie

hallo!
bin noch nicht lange im html-geschäft und hoffe, dass mir jemand helfen kann!
folgendes: habe mir eine bildergalerie eingerichtet; immer ein paar bilder im kleinformat nebeneinander; die bilder soll man anklicken können, damit das großformat in nem neuem fenster erscheint; dort soll man dann auch weiter und zurück blättern können!
hab mir was zusammengebastelt! funktionieren tut noch nicht:
1. zurückfunktion
2. wenn man ein kleines bild anklickt, beginnt die auswahl im großen fenster im mit dem ersten bild, soll aber mit dem beginnen, welches angeklickt wurde!
anbei meine befehle!
im voraus danke!

<SCRIPT LANGUAGE="JavaScript">
var pic1 = "Bsp1.jpg";
var pic2 = "Bsp2.jpg";
var pic3 = "Bsp3.jpg";
var pic4 = "Bsp4.jpg";
var pic5 = "Bsp5.jpg";
var number = 5 ;
var vart = 1 ;

function next()
{ if (vart == number)
document.gallery.src = eval("pic" + vart);
else
vart = vart + 1;
document.gallery.src = eval("pic" + vart);}

function previous()
{if (vart == 1)
document.gallery.src = eval("pic" + vart);
else
vart = vart - 1;
document.gallery.src = eval("pic" + vart);}
</SCRIPT>
<center>
<table border="0">
<tr>
<td colspan="2">
<img src="Bsp1.jpg" name="gallery" border="0">
</td>
</tr>
<tr>
<td>
<a href="javascript:previous();">zurück</a>
</td>
<td>
<a href="<a href="Bsp.htm">menü</a>
</td>
<td>
<a href="javascript:next();">weiter</a>
</td>
</tr>
</table>
</center>

  1. Hallo

    SO eine Bildershow habe ich mir mal auch gebastelt. Ich habe das aber etwas anders gemacht...

    <script language="JavaScript">
    var max = 5;
    var min = 1;
    var b =1;
      function bild() {
        window.open(b + ".jpg", "Großansicht", "width=670,height=500,resizable=yes");
      }
      function go(k) {
        b = b + k;
        if (b == (min - 1)) b = max;
        if (b == (max + 1)) b = min;
        document.images[0].src = b + "_t.jpg";
      }
    </script>

    Damit hast du nur eine funktion fürs weiter/zurück-gehen. die links sehen so aus:
    <a href="JavaScript:go(-1);">zurück</a>
    <a href="JavaScript:go(1);">weiter</a>

    in b ist immer die aktuelle bildnummer drinne. mit der go-funktion wird b immer eins erhöht (= ein bild weiter) oder eins verringert (= eins runter).
    ggf wird dann auch wieder von vorne angefangen ( drch min & max), sodass du einen runlauf hast.
    ich habe das damals so gehat, dass ich kleine thumnails (schnell geladen) habe und die großen, die sich beim klick auf das thumb öffneten.
    die thumbs hießen zB 1_t.jpg, 2_t.jpg usw, die großen entsprechend 1.jpg, 2.jpg.
    wirnd nun navigiert, wird immer (b + "_t.jpg") in das thumbnail-fenster geladen. durch einen klick wurde ein nues fenster mit dem großbild ((b + ".jpg")) geöffnet (-> Funktion bild())
    nur diese müsstest du dann dir irgendwie zurecht basteln, sodass du da das richtige bild drinne hast. irgendwie musst du dem neuen fenster das b übermitteln. vielleicht in eine hidden-field setzen und per opener.blabla rauslesen?

    hoffe, das hilft ein stück weiter...

    Grüße

    David

    --

    "Nobody will ever need more than 640k RAM!"
    1981 Bill Gates
  2. <SCRIPT LANGUAGE="JavaScript">

    <SCRIPT type="text/javascript" LANGUAGE="JavaScript">

    var pic1 = "Bsp1.jpg";
    var pic2 = "Bsp2.jpg";
    var pic3 = "Bsp3.jpg";
    var pic4 = "Bsp4.jpg";
    var pic5 = "Bsp5.jpg";

    Wie wär's mit einem array?

    var pics = new Array();

    pics[pics.length] = "Bsp1.jpg";
    pics[pics.length] = "Bsp2.jpg";
    pics[pics.length] = "Bsp3.jpg";
    pics[pics.length] = "Bsp4.jpg";
    pics[pics.length] = "Bsp5.jpg";

    var number = 5 ;

    unnötig, mit arrays.

    var vart = 1 ;

    var vart = 0;

    function next()
    { if (vart == number)
    document.gallery.src = eval("pic" + vart);
    else
    vart = vart + 1;
    document.gallery.src = eval("pic" + vart);}

    eval ist evil.

    function next()
    {
    if (vart > pics.length) vart = 0;
    document.gallery.src = pics[vart];
    vart++;
    }

    function previous()
    {if (vart == 1)
    document.gallery.src = eval("pic" + vart);
    else
    vart = vart - 1;
    document.gallery.src = eval("pic" + vart);}

    function previous()
    {
    if (vart < 0) vart = pics.length;
    document.gallery.src = pics[vart];
    vart--;
    }

    </SCRIPT>
    <center>
    <table border="0">
    <tr>
    <td colspan="2">
    <img src="Bsp1.jpg" name="gallery" border="0">
    </td>

    So funktioniert das aber nur im IE, da der die bilder nachträglich in der Größe ändern kann. Für die meisten anderen Browser müssen alle Bilder gleich gross sein.

    Struppi.