nächstes, voriges Bild mit Javascript?

KukiAM · 19.04.2004, 23:40

Schaut mal hier

Link

Möchte gern, dass sich nicht nur das Popup mit dem großen Bild öffnet, sondern in dem popup ein Button mit nächstes Bild und voriges bild ist. Ist das mit der javascript Variante, mit der ich das bis jetzt gelöst habe auch möglich? Oder muss ich dann für jedes große Bild eine extra Datei machen?

habe beim Hochladen vorhin festgestellt, dass nur noch ein Bild angezigt wird. Habe mehrere Male die Pfade gecheckt. Das kann doch nicht sein

Weiß jemand woran das liegt?

Ich danke euch für eure Hilfe!
KukiAM

KukiAM · 20.04.2004, 16:44

Das Anzeigeproblem mit den Bildern habe ich gelöst. Sag lieber nicht woran es lag

Meine Frage, ob ich mein Vorhaben überhaupt mit javascript realisieren kann, besteht weiterhin. Geht das oder geht so etwas nur mit php?

Rizzla · 20.04.2004, 16:54

musst nicht für jedes bild eine extra datei machen.
Geht auch mit javascript, nachdem die bildnamen auch durchnummeriert sind geht das relativ einfach

var bildnr = 1;
var erstesbild = nummer des ersten bildes;
var letztesbild = nummer des letzten bildes;

function bildwechsel() {
bildnr ++;
window.document.namedesbildes.src = bildnr+".jpg";
if(bildnr == letztesbild)
{bildnr = erstesbild;}
if(bildnr == erstesbild)
{bildnr = letztesbild;}
}

auf den weiterbutton einfach folgenden aufruf setzten

<a href='#' onClick="bildwechsel()">Nächstes Bild</a>

sollte so funktionieren - hab es aber nicht getestet.

KukiAM · 20.04.2004, 17:56

Danke, Danke, Danke. Jetzt weiß ich wie ich es machen muss.

Komme nur mit 2 Sachen nicht klar.
1:
window.document.namedesbildes.src = bildnr+".jpg";

was muss ich bei Name des Bildes eintragen? Eigentlich den Namen des Bildes, das zur Zeit aufgerufen ist, oder? Das rufe ich auch schon mit einem Javascript auf. Deswegen weiß jetzt nicht genau was ich da eintragen muss. ZUr Erklärung der Code:

<script language="JavaScript">
function klein(bild) {
newWin = window.open("Fotogalerie/Gardasee2004/bilderoeffner.html?" + bild, "fenstername", "scrollbars=0,toolbar=0,location=0,directories=0,status=0,resizable=0,width=500,height=500");
}
</script>

und html:
<a href="javascript:klein('../Bilder/1.jpg')"><img src="Fotogalerie/Gardasee2004/Piktogramm/1.jpg" width="100" height="75" border=0></a>

und als letztes noch die Datei bilderoeffner.html:
<script language="javascript">
var bild = location.search;
bild = bild.substr(1);
document.write('<center><A HREF="#" onClick="window.close();return false"><IMG ');
document.write('SRC="Bilder/' + bild + '" BORDER=0></A>');

var bildnr = 1;
var erstesbild = 1;
var letztesbild = 39;

function bildwechsel() {
bildnr ++;
window.document.location.search.src = bildnr+".jpg";
if(bildnr == letztesbild)
{bildnr = erstesbild;}
if(bildnr == erstesbild)
{bildnr = letztesbild;}
}
</script>

<a href='#' onClick="bildwechsel()">Nächstes Bild</a>
Habe hier inzwischen Deine Hilfen eingebaut. Das location.search ist mein Ansatz für Name des Bildes. Na ja, kenne mich nicht mit javascript aus und das sieht man hier wohl

2:
Ich setzte die varbildnr auf 1. Funzt das ganz javascript auch, wenn ich zum Beispiel mit dem Bild Nummer 10 anfange?

Und vielen Dank nochmal an Dich
KukiAM

KukiAM · 20.04.2004, 23:41

Hi Leute

Habe mir den ganzen Nachmittag und Abend den Kopf zerbrochen und finde die Lösung nicht. Habe mir auch die Finger in der Suche wund gesucht. Bitte helft mir vorm Verzweifeln. Ich weiß, dass es nur ein kleiner Fehler sein kann, aber ich find ihn einfach nicht.

Hier kommt nochmal der Link, damit man sich das angucken kann.
Link

Beim popup funktioniert der nächste Bild Link einfach nicht.

Danke schonmal
KukiAM

KukiAM · 22.04.2004, 00:13

Hab den ganzen Nachmittag und Abend mit Suchen und Grübeln verbracht. Hab hier und da Schnipsel zusammen getragen. Hier ist mein Jetziger Code:

PHP-Code:


			
 <script language="JavaScript">

function klein(bild,bildnr) {

        newWin = window.open("Fotogalerie/Gardasee2004/bilderoeffner.html?" + bild, "fenstername", "name=" +bildnr+ ",scrollbars=0,toolbar=0,location=0,directories=0,status=0,resizable=0,width=500,height=500");

}

</script>

Aufruf:

PHP-Code:


			
 <a href="javascript:klein('../Bilder/1.jpg','1')"><img src="Fotogalerie/Gardasee2004/Piktogramm/1.jpg" width="100" height="75" border=0></a>

                            <a href="javascript:klein('../Bilder/2.jpg','2')"><img src="Fotogalerie/Gardasee2004/Piktogramm/2.jpg" width="100" height="75" border=0></a>

Dann wird diese Datei aufgerufen:

PHP-Code:


			
 <script language="javascript">



var SlideShowSpeed = 3000;

var CrossFadeDuration = 2;

var picture = new Array();

var Caption = new Array();

var showHot = false;



picture[1]  = 'Bilder/1.jpg';

picture[2]  = 'Bilder/2.jpg';



Caption[1]  = "1/2";

Caption[2]  = "2/2";



var tss;

var iss;

var jss = 0;

var pss = picture.length-1;



var preLoad = new Array();

for (iss = 1; iss < pss+1; iss++){

preLoad[iss] = new Image();

preLoad[iss].src = picture[iss];}



function control(how){

if (showHot){

if (how=="H") jss = 1;

if (how=="F") jss = jss + 1;

if (how=="B") jss = jss - 1;

if (jss > (pss)) jss=1;

if (jss < 1) jss = pss;

if (document.all){

document.images.PictureBox.style.filter="blendTrans(duration=2)";

document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";

document.images.PictureBox.filters.blendTrans.Apply();}

document.images.PictureBox.src = preLoad[jss].src;

if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];

if (document.all) document.images.PictureBox.filters.blendTrans.Play();

}}

</script>



</head>

<html>

<body onload='showHot=true;self.focus();' topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

<script language="javascript">

var bild = location.search;

bild = bild.substr(1);

document.write('<center><A HREF="#" onClick="window.close();return false"><IMG ');

document.write('SRC="Bilder/' + bild + '" BORDER=0></A>');

</script><br>

<a class="controls" href='#' onClick="javascript:control('B');"><< voriges Bild</a>

<a class="controls" href='#' onClick="javascript:control('H');">Anfang</a>

<a class="controls" href='#' onClick="javascript:control('F');">Nächstes Bild >></a>



<img src="Bilder/' + bild + '"  name="PictureBox" width="500" height="500">

<div id="CaptionBox" class="Caption" align="center" colspan="3">

    This is the default caption.

    </div>



</body>

</html>

Ich denke, dass ich nur noch das Bild was bei der ersten Datei übergeben wird hier

PHP-Code:


			
 <img src="Bilder/' + bild + '"  name="PictureBox" width="500" height="500">

reinbekommen muss. Genauer muss es in src rein. Dann könnte ich auch das javascript am Anfang im body weg lassen. Sehe ich das richtig? Aber wie verflixt und zugenäht nochmal mache ich das?

Wäre euch für Vorschäge dankbar. Bin echt am Verzweifeln.
KukiAM

Rizzla · 23.04.2004, 00:54

Sorry - das ich mich erst jetzt wieder melde, hatte aber leider keine Zeit.

Ich hab mir mal den Skript soweit von deiner Seite genommen und ihn dementsprechend angepasst.

Müsstest du für dein vorhaben jetzt eigentlich relativ einfach einbauen können.

Das durchblättern funktioniert einwandfrei, du musst nur noch die variablen letztesbild und erstesbild (wahrscheinlich 1

) anpassen, dann kann die bildergalerie rundgesehen werden.

KukiAM · 24.04.2004, 10:49

Vielen Vielen Dank

Ohne Dich hätte ich das nie geschafft. Ich habe nur noch 2 kleine Fragen.

Hier nochmal der Link .

Ich möchte gern, dass die aktuelle Bildnummer angezeigt wird. Das habe ich mit

PHP-Code:


			
document.write('<b>' + bildnr + '/39<\/br>');

umgesetzt. Steht unter dem document.write('<center><IMG... Die Bildnummer bleibt aber immer gleich, je nachdem welches Bild ich als erstes aufgerufen habe. Eigentlich müsste die Bildnummer aber wechseln, oder? Was mache ich da falsch?

Gibt es eine Möglichkeit mit Javascript die Größe des Fensters automatisch an die Bildgröße anzupassen. Ich habe nämlich Quer- und Hochformate. Habe schon versucht in der function klein die Bildgröße mitzugeben, allerdings bleibt die dann ebenfalls konstant, je nach zuerst aufgerufenem Bild.

Nochmals vielen Dank.
KukiAM

KukiAM · 28.04.2004, 23:38

Hey ho

Habe die beiden letzten Sachen auch allein geschafft. Vielen Dank noch mal an Dich, dass DU mir dabei geholfen hast. Für alle, die das Ergebnis sehen wollen.

Hier nochmal der Link .

Bis denn
KukiAm

Hypopotamus · 19.12.2004, 15:50

Ich habe durch die Suchfunktion dieses Script gefunden und bei mir eingebaut. Nun habe ich bloß ein Problem. Solange ich die Seite einzeln aufrufe funktioniert es einwandfrei. Siehe:

http://www.bunte-bilderwelt.de/html/feuer_java.html

Die beiden Tulpenbilder sind verknüpft und erscheinen in groß.

In dem Moment wenn ich das Skript in meiner Page mit Frames verwende geht es nicht mehr.

http://www.bunte-blumenwelt.de/index_3.html

Zeigt aber auch keinen Fehler an. An der Seite kann es nicht liegen. Denn wenn ich die funktionierende als _blank aufrufe geht es. Rufe ich sie im _inhalt-Frame auf geht es nicht mehr.

Wäre super wenn Ihr mir auf die Sprünge helft.

Achja eines noch: Wenn ich das ganze auf dem PC anwähle, funktioniert es einwandfrei. Nur nach dem hochladen auf den Server treten die Probleme auf.

Danke Claudia

Hypopotamus · 19.12.2004, 16:45

Yipiiiiiiiiiiiih ich habe es selbst gefunden. Hatte vergessen in der Index-Datei den Javascript-Code einzugeben.

Claudia

Hypopotamus · 19.12.2004, 17:21

Nun habe ich doch noch eine Frage. Ich möchte 3 Erweiterungen in das Javascript einbauen, habe ich keine Ahnung wie das geht.

Erstens möchte ich mit onload="self.focus" bewirken daß das Fenster immer wieder in den Vordergrund geladen wird.

Dann der Zusatz:

onClick="window.close();return false"

damit bei einem Klick auf das Fenster dieses geschlossen wird.

Und was ich total nervig finde, wenn sich immer wieder bei neuen Klicken auf ein Bild ein neues Fenster öffnet. Habe schon soviele Beispiele angeschaut und weiß das es auch anders geht. Also das neue Bild soll in das alte Fenster geladen werden.

Vielen Dank
Claudia

KukiAM · 19.12.2004, 22:49

Hi Claudia

Mir wurde damals geholfen, also versuche ich es jetzt. Bin aber kein Freak von javascript.

für das erste und dritte Problem kann ich Dir nicht gross helfen, kennst Du selfhtml? das hat mir damals auch viel weiter geholfen. sonst versuche hier im Forum unter den Stichwörtern Hilfe zu finden, das müsste es genügend threads geben.

für das zweite, funzt es damit nicht? Ich würde Dir auch raten, dass schliessen über einen Link zu machen, wie es bei mir auch ist. Das andere fände ich verwirrend, vielleicht klicke ich aus Versehen irgendwo rauf und das bild schliesst. Ist aber sicherlich Geschmackssache.

Ich habe mir Deine Seite angeschaut. Sieht hübsch aus. Ich finde das Bilderbuch so ein bisschen unglücklich. Vielleicht hast Du es noch nicht eingebaut, aber bei der Galerie funzt das nicht, da gehört es aber hin.
Man klickt auf ein Bild bei Dir und auf einmal kann man andere anklicken, weiss aber nicht wo die herkommen. Verstehst Du, was ich meine? Würde das also wirklich nur bei der Galerie verwenden, denn Deine Fotos sind so schon gross und man kann sehr gut erkenn worum es geht.

Ich hoffe, dass ich helfen konnte
KukiAM

Hypopotamus · 20.12.2004, 10:03

Die Seite ist noch nicht fertig. Darum ist da vieles noch nicht richtig verlinkt.

Die Bild sind schon einigermaßen groß, aber trotzdem möchte ich sie außerdem noch größer darstellen.

Vielleicht melde sich ja noch jemand der das Script ändern kann.

Hypopotamus · 20.12.2004, 10:36

Ich habe es geschafft. Das Fenster öffnet sich nur einmal und kommt auch imme wieder in den Vordergrund. Nun muß ich nur noch den onclick irgendwo einbauen.
Claudia