Bilder Popup mit vorigem + nächstem Bild Button

**xces** · 29.09.2010 17:34

Hey Leute, ich hoffe mir kann jemand helfen.

Undzwar habe ich eine Seite auf denen viele kleine Bilder nebeneinander stehen..

ich möchte, wie der Titel schon verrät, dass diese Miniaturbilder beim raufclicken sich als Popup öffnen und die Originalgröße angezeigt wird. zusätzlich soll man dann in diesem Popup Fenster bei click auf nächstes bzw. voriges Bild andere Bilder angezeigt werden.

so ähnlich wie z.B. bei dieser Seite hier: http://www.zachbush.com/

bloß dort hat er das wohl mit flash realisiert .. aber damit ihr wisst was ich meine^^

soo .. eigtl is die ganze sache garnich so kompliziert, weil ich bereits beide scripte habe also das popup und das vorige/nächste script.

Jetz ist die Frage, wie verbinde ich beides? also das die "vorige/nächste" Funktion im Popup erscheint? und wie realisier ich das wenn ich auf ein x-beliebes miniaturbild clicke, dass sich das Bild auch genau dort in der richtigen Reihenfolge zurück bzw vorblättern lässt?

Hier mein bisherige Code:

Code:

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Bilder als PopUp öffnen automatisch in der Grösse der Bilder</title>

<script type="text/javascript">
<!--
function OpenFoto(img) {
        foto= new Image();
        foto.src=(img);
        ControlFoto(img);
}

function ControlFoto(img) {
        if((foto.width!=0)&&(foto.height!=0)) {
                ViewFoto(img);
        } else {

                interval_b=setTimeout(interval_a,20);
        }
}

function ViewFoto(img) {
        width=foto.width+20;
        height=foto.height+24;
        try {   interval_a="ControlFoto('"+img+"')";
                if(output.closed == false) throw "offen";
        }
        catch(e) {
                if(e=="offen") {
                        output.close();
                }
        }
        output=window.open("","output","left=40,top=40,width="+width+",height="+height+",location=no,toolbar=no,menubar=no,status=no,scrol lbars=no,resizable=no");
        output.document.writeln("<html><head><title>..:: Foto ::..<\/title><\/head>");
        output.document.writeln("<body bgcolor=\"white\" text=\"white\" link=\"white\" vlink=\"white\" alink=\"white\" leftmargin=\"0\" marginwidth=\"0\" topmargin=\"0\" marginheight=\"0\">");
        output.document.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" height=\"100%\">");
        output.document.writeln("<tr><td width=\"100%\" height=\"100%\" align=\"left\" valign=\"top\"><p><a href=\"javascript:self.close()\"><img src=\""+img+"\" width=\""+foto.width+"\" height=\""+foto.height+"\" border=\"10\" alt=\"click here to close the window\"></a><\/p><\/td><\/tr>");
        output.document.writeln("<\/table><\/body><\/html>");
        output.document.close();
        output.focus();
}


// -->

</script>


<script type="text/javascript">

/* <![CDATA[ */

var imgs = new Array();
var imgcnt = 0;
var thisimg = 0;

imgs[imgcnt++] = 'logo_navi.gif';
imgs[imgcnt++] = 'logo_navi_halloween.gif';
imgs[imgcnt++] = 'logo_navi3.gif';

function nextImg() {
  if (document.images) {
      thisimg++;
      if (thisimg >= imgcnt)
          thisimg = 0;
document.getElementById("rollimg").src = imgs[thisimg];
  }
}

function prevImg() {
    if (document.images) {
        thisimg--;
        if (thisimg < 0)
            thisimg = imgcnt-1;
document.getElementById("rollimg").src = imgs[thisimg];
    }
}
/* ]]> */
</script>



</head>



<a href="#" onclick="OpenFoto('wp_1920.jpg')"><img src="1.jpg" alt="click for zoom" width="176" height="176" border="0"></a>


<img id="rollimg" title="Bildwechsel mit Javascript" alt="Bildwechsel mit Javascript" src="logo_navi_halloween.gif" style="margin-left: 0.7em;">

<a href="javascript:prevImg()" class="noverweis"><img height="10" width="11" alt="" src="images/links.gif">zurück</a>
<a href="javascript:nextImg()" class="noverweis">nächstes Bild <img height="10" width="11" alt="" src="images/rechts.gif"></a>

</body>

</html>

Wer das umsetzen kann, hat was gut bei mir

**efwe** · 29.09.2010 20:12

umsetzen musst du schon selber...hier

**xces** · 29.09.2010 21:11

Zitat von efwe

umsetzen musst du schon selber...hier

wenn ich wüsste wie, würd ichs machen

**wildmieze** · 29.09.2010 23:21

Ganz blöde Frage: gibt es einen Grund, warum Du keine fertige Lightbox verwendest? Lernprojekt?

**xces** · 30.09.2010 20:28

ah lightbox danke^^
wusste ja nicht das es sowas gibt ...

**wildmieze** · 30.09.2010 22:53

Ahso, ok^^ .. die gibts wie Sand am Meer, da kannste Dir per google was hübsches aussuchen

zur Startseite vom TP

Thema: Bilder Popup mit vorigem + nächstem Bild Button

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Bilder Popup mit vorigem + nächstem Bild Button

Ähnliche Themen

Muss ein <Schliessen> Button sein in einem Popup Fenster

button-Verhalten+Fenster auf (popup)

popup-Fenster auf FW-Button

Button klick --> Popup aufmachen aber ....

popup-fenster mit button schließen

Aktive Benutzer

Aktive Benutzer