eigene Fotogalerie erstellen

[Patrick]

Hallo zusammen,

hoffe ich nutze gerade den richtigen bereich für meine Frage.

Also, ich würde gerne eine eigene Bildergalerie in html anlegen.

Meine Vorstellung der Galerie ist eigentlich leicht zu verstehen. Und zwar:

würde ich gerne einen länglichen Kasten (780 x 170 Px) haben, wo ich die
ganzen Vorschaubilder rein tue, die beim anklicken größer werden (800 x 600 Px)
da ich aber auch nur eine breite von 780 Px haben möchte und diese bei weitem
nicht ausreicht für all meine Bilder, muss ich diese noch nach rechtsoder links
laufen lassen können.

leider habe ich kein bildliches beispiel und hoffe ihr könnt meiner vorstellung folgen.

lg
Patrick

[moni]

Hallo Patrick

Soll deine Galerie so ca ausehen? http://blicke1.npage.de/on_click_galerie_45539457.html

wenn ja da hier ist der code

Code: Alles auswählen

<script type="text/javascript">
    function oeffnefenster (url) {
    fenster = window.open(url, "fenster1", "width=600,height=400,status=yes,scrollbars=yes,resizable=yes");
    fenster.focus();
    }
    </script>
<p><font size="4">     <br />
<!-- präsentiert von kostenlose-javascripts.de -->        <!-- submitted by Tobias Strasshofer
    bild wird auf der seite klein angezeigt, und per mausklick wird die originalgröße in einem anderen fenster geöffnet.
    //-->       <br />
Auf die Bilder anklicken
<table width="40%" cellspacing="10" cellpadding="10" border="0">
</table>
<table bgcolor="black">
    <tbody>
        <tr>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster('http://file1.npage.de/002234/84/bilder/aaan8i3fw47f6c298e24n87ku.jpg','','menubar=no')" src="http://file1.npage.de/002234/84/bilder/aaan8i3fw47f6c298e24n87ku.jpg" alt="" /></td>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster('http://2.bp.blogspot.com/_WghlenoNYG0/S508F8kDv_I/AAAAAAAAJmw/z5nDo4IqJxM/s1600/DSC04313e.jpg','','menubar=no')" src="http://2.bp.blogspot.com/_WghlenoNYG0/S508F8kDv_I/AAAAAAAAJmw/z5nDo4IqJxM/s1600/DSC04313e.jpg" alt="" /></td>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster ('http://4.bp.blogspot.com/_WghlenoNYG0/S59Lh5UXuvI/AAAAAAAAJnY/woYjhPkGJVg/s1600/DSCF0997qq.jpg','','menubar=no')" src="http://4.bp.blogspot.com/_WghlenoNYG0/S59Lh5UXuvI/AAAAAAAAJnY/woYjhPkGJVg/s1600/DSCF0997qq.jpg" alt="" /></td>
        </tr>
        <tr>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster('http://2.bp.blogspot.com/_WghlenoNYG0/S6NUZ8z9U8I/AAAAAAAAJns/IeB63OrvIpQ/s1600/DSCF1185q.jpg','','menubar=no')" src="http://2.bp.blogspot.com/_WghlenoNYG0/S6NUZ8z9U8I/AAAAAAAAJns/IeB63OrvIpQ/s1600/DSCF1185q.jpg" alt="" /></td>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster('http://1.bp.blogspot.com/_WghlenoNYG0/S7onCPd4vRI/AAAAAAAAJr8/eqAtjyaUlnw/s1600/DSCF1349.jpg','','menubar=no')" src="http://1.bp.blogspot.com/_WghlenoNYG0/S7onCPd4vRI/AAAAAAAAJr8/eqAtjyaUlnw/s1600/DSCF1349.jpg" alt="" /></td>
            <td><img width="170px" height="150px" onClick="javascript:oeffnefenster('http://1.bp.blogspot.com/_WghlenoNYG0/S8tozd0q7SI/AAAAAAAAJ1g/Nm2v-ETjq-I/s1600/DSCF1743.JPG','','menubar=no')" src="http://1.bp.blogspot.com/_WghlenoNYG0/S8tozd0q7SI/AAAAAAAAJ1g/Nm2v-ETjq-I/s1600/DSCF1743.JPG" alt="" /></td>
        </tr>
    </tbody>
</table>
</font></p>

Mann mus snaturlich die angaben nur ändern Px und auch die Bilder Adressen ..

[Patrick]

Hallo Moni,

in der art schon fast. nur das ganze in einer reihe.

Stell dir dass mal so vor, wenn du auf schnellantwort klickst und in diesem textfeld schreibst.
Dann hätten wir schonmal den rahmen. Am Anfang und am ende (jeweils ausserhalb des Rahmens) kommen zwei elemente hin,
um entweder nach links oder nach rechts die versteckten bilder zu verschieben. Das ist doch schwieriger zu erklären, als ich dachte :-/

Kenn hier jemand eine seite, wo man sich vreschiedene Bildergalerien anschauen kann?

[Patrick]

ah, ich habe da was interessantes gefunden. Die galerie ist eine kombi von den folgenen zwei beispielen.

Beispiel 1
http://www.lippeck-lechner.de/html/energieausweis.html

Beispiel 2
http://www.infovia.de/index.php?option= ... &Itemid=69

Nun zu Erklärung:
Das erste beispiel ist schon fast so, wie ich es super finde. Dort würde ich nur die kleinen
vorschaubilder lieber unter das Großbild haben. In etwa so wie im Beispiel 2.

Hoffe das ist hilfreicher


lg

[Patrick]

Das ist eine Flash Bildergalery, da kenne ich mich leider gar nicht aus. Eventuell unsere Moderatoren
P.S. Bin selbst kein freund von Flash, deswegen habe ich mich nie befasst damit

Was nun?

[David]

Peter hat mal eine mit html glaub ich gemacht.
Ich weiss nicht auf welcher Seite er das Beispiel jetzt hinterlegt hat.

[Patrick]

Ja vielleicht stellt er mal bei gelegenheit den link hier rein.

Dann wünsche ich ihm viel glück beim kartenspielen. Und einen guten durst

[stundenbanner]

Warum nutzt du nicht die Fertige Galerie von Oyla?

[Patrick]

Weil die ja sozusagen jeder hat.
ich finde es auch nicht schön, wenn ich beispielsweise 200 Bilder habe,
dass man so weit runter scrolen muss. Daher dachte ich eigentlich an einen
länglichen Kasten (600 x 200 Px) wo mann alle Vorschaubilder nebeneinder
rein tun kann Dann sieht die seite nicht so voll aus. denn weniger ist bekanntlich
mehr

[moni]

Haba auf meinen Rechner so was gefunden... http://blicke1.npage.de/galeria_do_prze ... 46697.html
Farblich bearbeitet ist nicht besonders schön aber es kann ändern...und auch zahl der Bilder auf endlos,genau auch die größe vom Bilder

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Geleria do przesuwania</title>

<meta name="editor" content="html-editor phase 5">
</head>
<body text="blue" bgcolor="green" link="#FF0000" alink="#FF0000" vlink="#FF0000">
  <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>
</center>
</body>
</html>