Galerie erstellen

[npage-user]

Ich möchte gerne Galerien auf meiner Webseite einbinden, die folgendermaßen aussehen: http://file1.npage.de/005800/03/bilder/bfnhge.jpg. Die Breite sollte 400 Pixel betragen. Die Galerie, die ich gerne hätte, sieht also so ähnlich aus wie bei "nPage" Galerie-Typ 2. Allerdings nützt mir es nichts, wenn ich die Galerien von "nPage" verwende, da ich ja auf etlichen Seiten von "Holiday Park Up-to-date" eine solche Galerie einfügen möchte.

Bedeutungen bei der Galerie-Skizze:
<< = Ein Bild zurück
>> = Weiter zum nächsten Bild
... und den Rest kann sich wahrscheinlich jeder denken!

Die Farben sind auch schon die richtigen, also dieses Hellgelb und das Grau.

Kann mir jemand einen Quellcode für eine solche Galerie geben? [smilie=flushflush.gif]

[moni]

Hallo Michael...

hatte mal so was für die Probe gebastelt .. glaube das der Peter hat auch so was mal gehabt
oder vom wem habe ich das, da weiß leider nicht mehr..

Man kann die Galerie gut gestalten..Größe Farbe etc..
http://blicke1.npage.de/galeria_do_prze ... 46697.html

und hier ist das Code...

Code: Alles auswählen

  <script type="text/javascript" src="http://www.npage.de/javascript/userpages.js"></script><center><script type="text/javascript">
//
// Beschreibung: Diashow, die bei Klick auf START automatisch oder auch manuell funktioniert

var x=0;

function rotate(num){
sl=document.slide_form.slide;
x=num%sl.length;
if(x<0){x=sl.length-1};
document.images.show.src=sl.options[x].value;
sl.selectedIndex=x;}

function auto() {
if(document.slide_form.slidebutton.value == "Stop"){
rotate(++x);window.setTimeout("auto()", 5000);}}
</script>
<form name="slide_form">
    <table cellpadding="3" style="border: 10px solid black; border-collapse: collapse; ">
        <tbody>
            <tr>
                <th align="center"><font size="5" face="Verdana" color="red">Schloss Gemen</font></th>
            </tr>
            <tr>
                <td align="center"><img name="show" src="http://file1.npage.de/005942/00/bilder/burg_gemen1_5.jpg/900x600_burg_gemen1_5" /></option>    </td>
            </tr>
            <tr>
                <td align="center"bgcolor="Yellow" style="border: 5px solid black; "><select onChange="rotate(this.selectedIndex);" name="slide">
                <option selected="" value="http://file1.npage.de/005942/00/bilder/burg_gemen1_3.jpg/900x600_burg_gemen1_3">Gemen1 </option>

                <option value="http://file1.npage.de/005942/00/bilder/burg_gemen.jpg/800x600_burg_gemen.jpg">Gemen5</option>
                <option value="http://file1.npage.de/005942/00/bilder/burg_gemen1_2.jpg/900x600_burg_gemen1_2">Gemen4</option>

                <option value="http://file1.npage.de/005942/00/bilder/burg_gemen1_5.jpg/900x600_burg_gemen1_5"> Gemen </option>

                </select></td>
            </tr>
            <tr>
                <td align="center" style="border: 5px solid black;"><input type="button" title="Jump to beginning" value="ll<<" onclick="rotate(0);" /> <input type="button" title="Last Picture" value="<<" onclick="rotate(x-1);" /> <input type="button" style="width: 95px;" title="Autoplay" value="Start" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" name="slidebutton" /> <input type="button" title="Next Picture" value=">>" onclick="rotate(x+1);" /> <input type="button" title="Jump to end" value=">>ll" onclick="rotate(this.form.slide.length-1);" /></td>
            </tr>
        </tbody>
    </table>
</form>

sind allerdings meine Bilder drin ..muss du sie rausnehmen

[npage-user]

Es gibt noch zwei Probleme: Ich weiß nicht, wo ich im HTML-Code die Größe verändere und irgendwie geht es, wenn man bei Bild 1 ist bei einem Klick direkt zu Bild 3.
http://holidaypark-uptodate.npage.de/te ... 57958.html: Hier kannst du dir das ansehen. [smilie=1hammer.gif]

[moni]

Habe die Galerie etwas verkleinert und zwar 550 mal 550 px
hier ist das Code...

Code: Alles auswählen

<script type="text/javascript">


                untermenu_status = new Array();
buffer = '';

isDefined = function(variable){
        return this[variable] === undefined ? false : true;
};

function untermenu(elementname) {
        buffer = untermenu_status[elementname];
        if (untermenu_status[elementname] == 0 || !isDefined("buffer")) {
                document.getElementById(elementname).style.display='block';
                untermenu_status[elementname] = 1;
        }
        else {
                document.getElementById(elementname).style.display='none';
                untermenu_status[elementname] = 0;
        }
}

function untermenu2(elementname) {
        buffer = untermenu_status[elementname];
        if (untermenu_status[elementname] == 0 || !isDefined("buffer")) {
                for (var i = 1; i < 100; i++) {
                        buf_elementname = elementname+i;
                        if(!document.getElementById(buf_elementname))
                                break;
                        document.getElementById(buf_elementname).style.display='block';
                        untermenu_status[elementname] = 1;
                }
        }
        else {
                for (var i = 1; i < 100; i++) {
                        buf_elementname = elementname+i;
                        if(!document.getElementById(buf_elementname))
                                break;
                        document.getElementById(buf_elementname).style.display='none';
                        untermenu_status[elementname] = 0;
                }
        }
}
                </script> </script><center>

und wenn du das HTML ändern möchtest da mache hier die Angaben

Code: Alles auswählen

<table cellpadding="3" style="border: 5px solid black; border-collapse:4 collapse;background-color:white;">
        <tbody>
            <tr>
                <th align="center"><font size="4" face="Verdana" color="Blue">Name deine Galerie zum "Park "</font></th>
            </tr>
            <tr>
                <td align="center"><img name="show" src="hier kommt dein  tietel Bild URL"width="550"height="550"></td>
            </tr>
            <tr>
                <td align="center" style="border: 1px solid white;background-color:black;"><select onChange="rotate(this.selectedIndex);" name="slide">


                 <option value="Bild Url"width="550"height="550">Bild1</option>
		   <option value="Bild URL"width="550"height="550">Bild2</option>
		     <option value="Bild URL"width="550"height="550">Bild3</option>
		       <option value="Bild URL"width="550"height="550">Bild4</option>
			  <option value="Bild URL"width="550"height="550">Bild5</option>
			    <option value="Bild URL"width="550"height="550">Bild6</option>
                              <option value="Bild URL"width="550"height="550">Bild7</option>
		   <option value="Bild URL"width="550"height="550">Bild8</option>
		     <option value="Bild URL"width="550"height="550">Bild9</option>
		       <option value="Bild URL"width="550"height="550">Bild10</option>
			  <option value="Bild URL"width="550"height="550">Bild11</option>
			    <option value="Bild URL"width="550"height="550">Bild12</option>

                </select></td>
            </tr>
            <tr>
                <td align="center" style="border: 0px solid black;background-color:black;">
		<input type="button" title="Jump to beginning" value="ll<<" onclick="rotate(0);" />
		<input type="button" title="Last Picture" value="<<" onclick="rotate(x-1);" />
		<input type="button" style="width: 75px;" title="Autoplay" value="Start" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" name="slidebutton" />

		 <input type="button" title="Next Picture" value=">>" onclick="rotate(x+1);" />
		  <input type="button" title="Jump to end" value=">>>ll" onclick="rotate(this.form.slide.length-1);" /></td>
            </tr>
        </tbody>
    </table>
</form>
</center>

und zwar bei Aussehen die Tabelle ..Border ..Black ist die Farbe vom Border kannst ändern....background-color:white ..das ist Hintergrund vom Tabelle..habe den auf weiß gemacht ...kannst auch ändern

Code: Alles auswählen

  <table cellpadding="3" style="border: 5px solid black; border-collapse:4 collapse;background-color:white;">                        

dann kommt das titele Schrift für die Galerie..size ist die größe...blue ist die farbe...verdane ist die Art ..alles kann man ändern

Code: Alles auswählen

<th align="center"><font size="4" face="Verdana" color="Blue">Name deine Galerie zum "Park "</font></th>                        

dann kommt die Größe vom Galerie ...und zwar unter .width="550" ist die breite ...height="550" ist die Höhe....550 ist die Px zahl ..hier beachten die breite vom deinen Design...würde so ca 600 px empfehlen...muss an die HP exakt anpassen sonst hast die Sachen wie jetzt ausherlab rammen

Code: Alles auswählen

 <td align="center"><img name="show" src="hier kommt dein  tietel Bild URL"width="550"height="550"></td>                             

Hier sind die angaben von den Bereich unten den Bildern..nur dies angaben kannst ändern
border: 1px solid white; ...background-color:black;.....sehe Oben !!

Code: Alles auswählen

<td align="center" style="border: 1px solid white;background-color:black;"><select onChange="rotate(this.selectedIndex);" name="slide">         

dann auch die Bilder Größe angeben...müsse genau die gleich angaben sein wie die Galerie Größe...
width="550"height="550" hier die angaben sind zu ändern ...

Code: Alles auswählen

  <option value="Bild Url"width="550"height="550">Bild1</option>                 

zum Schluss kommt das Kästchen ganz unter die Galerie
border: 0px solid black;background-color:black......schau auch oben was das ist
aha solid ist das art vom border...kannst auch ein anderen wählen zum b Double da hat dann doppelt -linie
hier sind die arten vom Border...http://de.selfhtml.org/css/eigenschafte ... _style.htm

Code: Alles auswählen

  <td align="center" style="border: 0px solid black;background-color:black;">    

normale weiße als erst wir immer das titele Bild gezeigt ...hast die richtige rein folge gemacht ?..

hoffe das ich dir damit helfen könnte ..ansonsten melde dich noch mal

[npage-user]

Hier mal der HTML-Code bei mir:

Code: Alles auswählen

<script type="text/javascript"  src="http://www.npage.de/javascript/userpages.js"></script><center><script  type="text/javascript">
//
// Beschreibung: Diashow, die bei Klick auf START automatisch oder auch manuell funktioniert

var x=0;

function rotate(num){
sl=document.slide_form.slide;
x=num%sl.length;
if(x<0){x=sl.length-1};
document.images.show.src=sl.options[x].value;
sl.selectedIndex=x;}

function auto() {
if(document.slide_form.slidebutton.value == "Stop"){
rotate(++x);window.setTimeout("auto()", 5000);}}
</script>
<form name="slide_form">
    <table cellpadding="3" style="border: 3px solid yellow; border-collapse: collapse; ">
        <tbody>
            <tr>
                <th align="left"><font size="2" face="Verdana" color="red">Galerie</font></th>
            </tr>
            <tr>
                 <td align="center"><img name="show"  src="http://file1.npage.de/005800/03/bilder/egf01_11.jpg/400x300"  /></option>    </td>
            </tr>
            <tr>
                
                <option  value="http://file1.npage.de/005800/03/bilder/egf02_11.jpg/400x300">Bild  2  von  5</option>
                 <option  value="http://file1.npage.de/005800/03/bilder/jpmm01_11.jpg/400x300">Bild  3  von  5</option>

                </select></td>
            </tr>
            <tr>
                 <td align="center" style="border: 5px solid  yellow;"><input type="button" title="Jump to beginning"  value="ll<<" onclick="rotate(0);" /> <input type="button"  title="Last Picture" value="<<" onclick="rotate(x-1);" />  <input type="button" style="width: 95px;" title="Autoplay"  value="Start"  onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();"  name="slidebutton" /> <input type="button" title="Next Picture"  value=">>" onclick="rotate(x+1);" /> <input type="button"  title="Jump to end" value=">>ll"  onclick="rotate(this.form.slide.length-1);" /></td>
            </tr>
        </tbody>
    </table>
</form>

Irgendetwas kann da immer noch nicht stimmen, sonst würde es funktionieren!
Die zweite Tabelle ist übrigens noch schlimmer geworden, siehe Testseite. [smilie=flushdown.gif]

[moni]

...es ist einfach ..du hast die angaben für die Bild Größe falsch gemacht..du hast so was stehen 400x300"
und man muss schon auch das width und height zugeben ..und die gänsefüssechen nicht vergessen .


<td align="center"><img name="show" src="hier kommt dein URL BILD "width="550"height="550"></td>

versuche es und wenn nicht klappt da mache ich dir das fertig später ....brauche nur die URL vom deinen Bilder ...

[moni]

Hallo Michael...

es hat mich nicht in die Ruhe gelassen ,und hab genauer unter die Lupe genommen...
musste ich leider festellen da sich dir ganz am Anfang einen Skript ( das aller erste ) gelassen habe mit ein paar Fehler...

Das zweite war schon korrekt...
habe das ganze auf deine Bedürfnisse eingestellt und hier das Ergebnis ...
http://blicke1.npage.de/galeria_do_prze ... 46697.html

und hier das Code Ohne URL Bilder für Dich .. wenn die maßen vom Bilder so gewünscht sind da nur noch die URL Bilder einfügen

Code: Alles auswählen

  <center><script type="text/javascript">
//
// Beschreibung: Diashow, die bei Klick auf START automatisch oder auch manuell funktioniert

var x=0;

function rotate(num){
sl=document.slide_form.slide;
x=num%sl.length;
if(x<0){x=sl.length-1};
document.images.show.src=sl.options[x].value;
sl.selectedIndex=x;}

function auto() {
if(document.slide_form.slidebutton.value == "Stop"){
rotate(++x);window.setTimeout("auto()", 5000);}}
</script>
<form name="slide_form">




           <table cellpadding="3" style="border: 3px solid yellow; border-collapse:4 collapse;background-color:white;">
            <tbody>
                <tr>
                    <th align="center"><font size="4" face="Verdana" color="Blue">Alles in grünen Bereich"</font></th>
                </tr>
                <tr>
                    <td align="center"><img name="show" src="URL BILD NR 1"width="400"height="300"></td>
                </tr>
                <tr>
                    <td align="center" style="border: 1px solid white;background-color:white;"><select onChange="rotate(this.selectedIndex);" name="slide">


                     <option value=" URL BILD NR1"width="400"height="300">Bild1</option>
             <option value="URL BILD NR 2"width="400"height="300">Bild2</option>
               <option value="URL BILD NR 3"width="400"height="300">Bild3</option>
                 <option value="URL BILD NR 3"width="400"height="300">Bild4</option>
               <option value="URL BILD NR 4"width="400"height="300">Bild5</option>
                 <option value="URL BILD NR 6"width="400"height="550">Bild6</option>

                    </select></td>
                </tr>
                <tr>
                    <td align="center" style="border: 3px solid yellow;background-color:white;">
          <input type="button" title="Jump to beginning" value="ll<<" onclick="rotate(0);" />
          <input type="button" title="Last Picture" value="<<" onclick="rotate(x-1);" />
          <input type="button" style="width: 100px;" title="Autoplay" value="Start" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" name="slidebutton" />

           <input type="button" title="Next Picture" value=">>" onclick="rotate(x+1);" />
            <input type="button" title="Jump to end" value=">>>ll" onclick="rotate(this.form.slide.length-1);" /></td>
                </tr>
            </tbody>
        </table>
    </form>
    </center>

Ein Hinweis..das erst Bild muss man zwei mal einfügen ..habe auch Notiz dazu gemacht !
es tut mir echt Leid ,du das dir bestimmt den Kopf zerbrochen ..bitte nicht böse sein ...

[npage-user]

Danke für deine Mühe! Es funktioniert jetzt alles!

[moni]

Da freut mich sehr... habe Dich über Umwege geschickt aber alles gut was ein guten Ende hat
Übrigens wenn du das Tempo schneller haben willst da in JS kannst das 5000 Wert etwas niedriger stufen ..zum B 2000 ..da werden die Bilder schneller laufen ...

[npage-user]

Die Galerie funktioniert eigentlich ganz gut und ich habe sie auch schon auf etlichen Seiten eingebunden. Jedoch gibt es auf der Seite "Aqustadion" (Unter "Shows") noch ein Problem, da ich dort mehr als 5 Bilder habe. Denn wenn ich zum ersten Mal klicke, kommt man in der Galerie von Bild 1 zu Bild 6. Danach läuft dann erst alles in der richtigen Reihenfolge! [smilie=1hammer.gif]