Wie mache ich ein Bild-viewer?

Ich möchte ein image viewer (für meine website) wie in Facebook (der alte). Wenn der Benutzer klicken Sie auf die weiter-oder zurück-Pfeil, es wird sich ändern das Bild und die URL der Seite.

Dies ist ein Beispiel von, was ich will (http://www.facebook.com/pages/Forest-Ville/307556775942281)

Allem möchte ich die Seite neu zu laden mit jedem Klick mit neuen (URL, Kommentar-box, anzeigen, etc.) Ich möchte nicht, verwenden keine Cookies. Jetzt bin ich mit dieser, aber seine völlig Verschieden von dem, was ich will.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="JavaScript">

            var NumberOfImages = 10
            var img = new Array(NumberOfImages)

            img[0] = "http://damnthisfunny.site40.net/1.jpg"
            img[1] = "http://damnthisfunny.site40.net/2.jpg"
            img[2] = "http://damnthisfunny.site40.net/3.jpg"
            img[3] = "http://damnthisfunny.site40.net/4.jpg"
            img[4] = "http://damnthisfunny.site40.net/5.jpg"
            img[5] = "http://damnthisfunny.site40.net/6.jpg"
            img[6] = "http://damnthisfunny.site40.net/7.jpg"
            img[7] = "http://damnthisfunny.site40.net/8.jpg"
            img[8] = "http://damnthisfunny.site40.net/9.jpg"
            img[9] = "http://damnthisfunny.site40.net/10.jpg"

            var imgNumber = 0
            function NextImage()
            {
                imgNumber++
                if (imgNumber == NumberOfImages)
                    imgNumber = 0
                document.images["VCRImage"].src = img[imgNumber]
            }
            function PreviousImage()
            {
                imgNumber--
                if (imgNumber < 0)
                    imgNumber = NumberOfImages - 1
                document.images["VCRImage"].src = img[imgNumber]
            }


</script>



<body>
<center>

<img name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr>
<br />
<a href="javascript:PreviousImage()">
<img border="0" src="left1.jpg" /></a>
<a href="javascript:NextImage()">
<img border="0" src="right1.jpg" /></a>
</center>
</body>
</html>

Irgendwelche Ideen?

InformationsquelleAutor Maansahir | 2012-01-10
  1. 0

    Wenn Sie möchten, laden Sie die Seite neu, jedes mal, können Sie einfach aktualisieren location.href und hängen Sie es mit einem hash-Wert bezeichnet das Bild, das Sie laden möchten:

    <img id="theImg" name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr>
<a href="javascript:PreviousImage()">
<img border="0" src="left1.jpg" /></a>
<a href="javascript:NextImage()">
<img border="0" src="right1.jpg" /></a>

<script type="text/javascript">
    var NumberOfImages = 10
    var img = new Array(NumberOfImages);
    img[0] = "http://damnthisfunny.site40.net/1.jpg";
    img[1] = "http://damnthisfunny.site40.net/2.jpg";
    img[2] = "http://damnthisfunny.site40.net/3.jpg";
    img[3] = "http://damnthisfunny.site40.net/4.jpg";
    img[4] = "http://damnthisfunny.site40.net/5.jpg";
    img[5] = "http://damnthisfunny.site40.net/6.jpg";
    img[6] = "http://damnthisfunny.site40.net/7.jpg";
    img[7] = "http://damnthisfunny.site40.net/8.jpg";
    img[8] = "http://damnthisfunny.site40.net/9.jpg";
    img[9] = "http://damnthisfunny.site40.net/10.jpg";

    var imgNum = parseInt(location.hash.substring(location.hash.indexOf('img=')+4));
    if (isNaN(imgNum) || imgNum < 1 || imgNum > NumberOfImages)
        imgNum = 1;
    document.getElementById('theImg').src = img[imgNum];

    function NextImage()
    {
        location.href = 'this.html#img='+(imgNum+1);
    }
    function PreviousImage()
    {
        location.href = 'this.html#img='+(imgNum-1);
    }
</script>
    • aber das problem ist jetzt jedes mal wenn ich die Seite neu laden, es wird rest der slidshow auf das erste Bild.
    • oops, habe vergessen, in einem NaN checker. Jetzt sollte es funktionieren.
    InformationsquelleAutor Aaron
  2. 0

    Ich würde empfehlen, mit einem jQuery plugin für ein Projekt wie dieses, und dann zur Anpassung an suite Ihre Bedürfnisse.

    Hier ist ein link, um Sie starrte : http://www.designsmag.com/2011/06/50-jquery-image-gallery-tutorials-and-plugins/

    InformationsquelleAutor DaveE
Schreibe einen Kommentar