✔ Problem mit Js-Gallerie Script

S

sceada

Grünschnabel
Hi !

Wen die Vorgeschichte und mein Grundproblem nicht intressiert, bitte runterscrollen zum Absatz vor dem Code ;)

Ich habe mir gestern eine neue, kleine Homepage gebastelt.
Sie ist eher auf Style ausgerichtet als auf viel Inhalt, klein aber fein ;)
(ist atm noch aus einem fertigen Template gemacht, das baue und style ich aber noch um)

Für die Hp habe ich mir ein Gallery-Script für die Pics Seite "ergoogelt", da ich bisher nur grosse Php Scripte für sowas kannte, ich wollte aber was kleines, muss nicht viel können.
(für die bilder Seite ist nicht viel platz, wer sichs anschauen will: http://www.im-center.de, ich hoffe einen Link zur Hp geben ist erlaubt...soll ja keine Werbung sein sondern zur veranschaulichung dienen)

Das script hier funktioniert eigentlich super, genau sowas was ich wollte.
Ich verstehe es eigentlich auch, kann ja ein paar Programmiersprachen ein bisschen, also Grundlagen sind nicht so ein Problem für mich, aber die Sprachen spezifischen Sachen schon.
Ich verstehe zb. wie das Script die zahlen hoch und runter zählt (also pic1.jpg, pic2.jpg...), aber nicht wirklich wie die Bilder ausgegeben werden.
(im html Teil ist ein Link zu pic1.jpg ...aber wie das 2. Bild beim klicken angezeigt wird ist mir ein Rätsel)

So, nun mein eigentliches Problem:
Ich habe beide Bilder doppelt in dem Ordner, einmal in klein damit sie vollständig auf der Seite zu sehen sind, und einmal in Originalgrösse.
Nun möchte ich gerne wenn ein Bild angezeigt wird, das dieses gleichzeitig ein Link ist zur grossen Version des Bildes (am besten in einem neuen Fenster).
Da ich wie oben beschrieben nicht verstehe wie es ausgegeben wird, ist es halt sehr schwer für mich das aktuell ausgegebene Bild auch noch zu verlinken, in html wäre es ja kein problem ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>   
      <title>
         Pics
      </title>
      <script language="JavaScript">
         function changepic(direction)
         {
            piccount=2;
            tempname=document.images['Bild'].src;
            filestart=tempname.lastIndexOf("/")+1;
            filename=tempname.substring(filestart,tempname.length);
            number=parseInt(filename);
            filetype=filename.substring(filename.lastIndexOf("."),filename.length);
            if (number==1)
            {
               dec="pics/1"+filetype;
               if (number==piccount)
               {
                  inc="pics/"+number+filetype;
               }
               else
               {
                  number+=1;
                  inc="pics/"+number+filetype;
               }
            }
            else
            {
               number-=1;
               dec="pics/"+number+filetype;
               number+=1;
               if (number==piccount)
               {
                 inc="pics/"+number+filetype;
               }
               else
               {
                  number+=1;
                  inc="pics/"+number+filetype;
               }
            }
            if (direction=='bck')
            {
                document.images['Bild'].src=dec;
             }
             else
             {
                document.images['Bild'].src=inc;
             }
          }
      </script>
    </head>
   <body>
      <center>
         <form name="buttons">
            <table width="40%" border="0">
	    <tr>
                  <td align="center">
                     <input type="button" value="Zurück" onClick="changepic('bck');" />
                  </td>
                  <td align="center">
                     <input type="button" value="Weiter" onClick="changepic('fwd');" />
                  </td>
            </tr>   
            <tr height="200">
                  <td align="center" valign="middle" colspan="2">
                    <img src="pics/1.jpg" border="0" name="Bild" /><br>
                  </td>
            </tr>	   
            </table>
         </form>
      </center>
   </body>
</html>

Ich hoffe ihr versteht was ich will, und mir kann jemand helfen :)

mfg, sceada
 
In das Script unmittelbar vor die erste if-Anweisungen:
HTML: 
document.images['Bild'].onclick = new Function("fx","window.open('pics/"+number+"big."+filetype+"','','')");
In das <img>-Tag
HTML: 
onclick="window.open('pics/1big.jpg','','')
Voraussetzung: Das Große Bild zum Bild "1.jpg" heißt "1big.jpg", das zu "2.jpg" heißt "2big.jpg" usw. und die Großen Bilder befinden sich auch im /pics/-Verzeichnis.

Um deine Unklarheiten zu beseitigen:
Angezeigt werden die kleinen Bilder bei dem Script oben durch ändern des scr-Attributes im <img>-Tag.
Aus dem aktuellen src-Attribut wird der Dateiname (Variable: "filename") mittels der "substring()"-Methode ermittelt. Der Anfang des Dateinamen (Variable: "filestart") ist logischerweise dort wo ein Slash ( / ) das letzte Mal im src-Attribut auftaucht ("lastindexOf()"), das Ende ist die letzte Position im src-Attribut also "filename.length". Die Nummer des aktuellen Bildes (Variable: "number") wird aus der Variablen "filename" gewonnen indem man sie durch die Funktion "praseInt()" jagt. Diese Funktion nimmt die Zahlen am anfang einer Zeichenkette und ignoriert alles, was nach der ersten Nichtzahlsteht weg.
Der Rest sollte dir eigentlich genläufig sein, wenn du "ja ein paar Programmiersprachen ein bisschen" kannst.
 
Zuletzt bearbeitet:
Ich danke dir vielmals :D
Script funktioniert super, und dank deiner Erklärung versteh ich jetzt auch wie die Bilder geändert werden, das das script was im <img> tag ändern kann hab ich zb. nicht gewusst, ich dachte das script "übernimmt" die anzeige, und der Tag ist nur dazu da um das 1. Bild vpr dem 1. klicken anzuzeigen ^^
(von js hab ich net viel Ahnung, aber jetzt schon bissl mehr :) )

Also danke nochmal !

mfg, sceada
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück