XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Bildergalerie preload und Co. (http://xhtmlforum.de/showthread.php?t=48671)

Sarah14 01.11.2007 16:30

Bildergalerie preload und Co.
 
Hallo hallo!
Ich erarbeite gerade eine Bildergallerie mit vorwärts/rückwärts Buttons. Hab auch alles soweit, javascript und so, nur was mir noch Probleme bereitet ist das preloaden der Bilder, da ich bis zu 25 Bilder pro Galerie habe (600x350px).. ich hab jetzt ein solches Script

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";
myImages[2] = new Image();
myImages[2].src = "pics/3_2_1.jpg";
myImages[3] = new Image();
myImages[3].src = "pics/3_2_2.jpg";
myImages[4] = new Image();
myImages[4].src = "pics/3_2_3.jpg";
myImages[5] = new Image();
myImages[5].src = "pics/3_2_4.jpg";
myImages[6] = new Image();
myImages[6].src = "pics/3_2_5.jpg";
myImages[7] = new Image();
myImages[7].src = "pics/3_2_6.jpg";
myImages[8] = new Image();
myImages[8].src = "pics/3_2_7.jpg";
myImages[9] = new Image();
myImages[9].src = "pics/3_2_8.jpg";
myImages[10] = new Image();
myImages[10].src = "pics/3_2_9.jpg";
myImages[11] = new Image();
myImages[11].src = "pics/3_2_10.jpg";
myImages[12] = new Image();
myImages[12].src = "pics/3_2_11.jpg";
myImages[13] = new Image();
myImages[13].src = "pics/3_2_12.jpg";
myImages[14] = new Image();
myImages[14].src = "pics/3_2_13.jpg";
myImages[15] = new Image();
myImages[15].src = "pics/3_2_14.jpg";
myImages[16] = new Image();
myImages[16].src = "pics/3_2_15.jpg";


var myImages = new Array();
myImages[1] = { 'src' : 'pics/innenarchitektur.jpg',
'dsc' : '     ' };

myImages[2] = { 'src' : 'pics/3_2_1.jpg',
'dsc' : 'Glas Trösch, Gastrobereich' };

myImages[3] = { 'src' : 'pics/3_2_2.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur' };

myImages[4] = { 'src' : 'pics/3_2_3.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Box «Public & Activity»' };

myImages[5] = { 'src' : 'pics/3_2_4.jpg',
'dsc' : 'Glas Trösch, Showroom Boxenkonzept' };

myImages[6] = { 'src' : 'pics/3_2_5.jpg',
'dsc' : 'Glas Trösch, Showoom Interieur Ausstellung Gastro & Hotel' };

myImages[7] = { 'src' : 'pics/3_2_6.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Gastro & Hotel' };

myImages[8] = { 'src' : 'pics/3_2_7.jpg',
'dsc' : 'Century Times Gems, Messestand' };

myImages[9] = { 'src' : 'pics/3_2_8.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[10] = { 'src' : 'pics/3_2_9.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[11] = { 'src' : 'pics/3_2_10.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[12] = { 'src' : 'pics/3_2_11.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07' };

myImages[13] = { 'src' : 'pics/3_2_12.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Armaturenprogramm' };

myImages[14] = { 'src' : 'pics/3_2_13.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Innenbereich mit Gesamtprogramm' };

myImages[15] = { 'src' : 'pics/3_2_14.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Durchblick von der Bar' };

myImages[16] = { 'src' : 'pics/3_2_15.jpg',
'dsc' : 'SH-Holz Biel, Gastromöblierung' };



var maxValue = myImages.length - 1;
var intValue = 1;
function gallerie(charValue) {
if(charValue == 'c') {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p>";
}
else if(charValue == '+') {
if(intValue == maxValue) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p>";
intValue = 1;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc + "</p>";
intValue = intValue + 1;
}
}
else if(charValue == '-') {
if(intValue == 1) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'><p>" + myImages[maxValue].dsc + "</p>";
intValue = maxValue;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p>";
intValue = intValue - 1;
}
}
}

function vorladen1(i) {
if (! myImages[i].img ) {
myImages[i].img = new Image();
myImages[i].img.src = myImages[i].src;
}
}

function vorladen(i) {
var next= i<(maxValue-1) ? (i+1) : 1;
var prev= i>1 ? (i-1) : 1;
vorladen1(next);
vorladen1(prev);
}

</script>

<div id="logo"></div>


<body onLoad="gallerie('c')">

<div id="imgGallerie"></div>
<div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>
<div id="rechts"><a href="#" onClick="gallerie('+')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032">></font></a></div>

</body>

Die Preload Funktion funktioniert zwar, die Seiten laden halt bissl länger gesamthaft, doch wenn man dann mal in der Galerie vor und zurück geht, dann laden die Bilder wieder.

Ich wurde schon auf eine sogenannte "Image-Funktion" hingewiesen, wo ich aber nicht wiess, wie ich die in meinem Array anwenden kann.

Was mich auch noch interessieren würde wäre, ob eine Möglichkeit der Verbindung von zählen/Galerie besteht? Hab schon überall gesucht, doch nichts brauchbares gefunden...

:(

liebe Grüsse
Sarah

paracelsus 01.11.2007 16:42

Hi, es müsste daran liegen das Du die Seite mit den vor und Zurück Buttons neu aufrufst. (im href steht: #)
Damit wird dann eben neu geladen.

mit:
Code:

<a href="javascript: gallerie('-')"> xy</a>
sollte es gehen.
Ich konnte es nicht testen, da ich einen Laufzeitfehler mit diesem script bekomme.

Übrigens, der <FONT> tag ist depreciated und soll nicht mehr verwendet werden!
<div id="logo"></div> gehört NACH dem <body> und sollte kein leeres Element sein.

Gruß

Sarah14 01.11.2007 16:52

Flashy Flahsy
 
Vielen Dank! Scheint zu klappen!!! :)

Ähm, darf ich dich noch fragen, ob du da was weisst, wegen der Zählfunktion, die man zusätzlich zu den Pfeilen machen könnte? Also damit man sieht wo man ist in der Gallerie? z.B. 3/9 o.ä.?

Vielen Dank nochmal!

liebe Grüsse
Sarah

paracelsus 01.11.2007 23:29

Hi!

Hat ein bischen geaduert, aber Dein script hatte einen Bug, wenn man von 1 rückwärts ging.
Ist behoben.
Zählwerk ist mit dabei und wird unterhalb der Beschreibung angezeigt. :mrgreen:

Code:

<head>
    <title>Untitled</title>
    <script type="text/javascript">
var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";
myImages[2] = new Image();
myImages[2].src = "pics/3_2_1.jpg";
myImages[3] = new Image();
myImages[3].src = "pics/3_2_2.jpg";
myImages[4] = new Image();
myImages[4].src = "pics/3_2_3.jpg";
myImages[5] = new Image();
myImages[5].src = "pics/3_2_4.jpg";
myImages[6] = new Image();
myImages[6].src = "pics/3_2_5.jpg";
myImages[7] = new Image();
myImages[7].src = "pics/3_2_6.jpg";
myImages[8] = new Image();
myImages[8].src = "pics/3_2_7.jpg";
myImages[9] = new Image();
myImages[9].src = "pics/3_2_8.jpg";
myImages[10] = new Image();
myImages[10].src = "pics/3_2_9.jpg";
myImages[11] = new Image();
myImages[11].src = "pics/3_2_10.jpg";
myImages[12] = new Image();
myImages[12].src = "pics/3_2_11.jpg";
myImages[13] = new Image();
myImages[13].src = "pics/3_2_12.jpg";
myImages[14] = new Image();
myImages[14].src = "pics/3_2_13.jpg";
myImages[15] = new Image();
myImages[15].src = "pics/3_2_14.jpg";
myImages[16] = new Image();
myImages[16].src = "pics/3_2_15.jpg";


var myImages = new Array();
myImages[1] = { 'src' : 'pics/innenarchitektur.jpg',
'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };

myImages[2] = { 'src' : 'pics/3_2_1.jpg',
'dsc' : 'Glas Trösch, Gastrobereich' };

myImages[3] = { 'src' : 'pics/3_2_2.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur' };

myImages[4] = { 'src' : 'pics/3_2_3.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Box «Public & Activity»' };

myImages[5] = { 'src' : 'pics/3_2_4.jpg',
'dsc' : 'Glas Trösch, Showroom Boxenkonzept' };

myImages[6] = { 'src' : 'pics/3_2_5.jpg',
'dsc' : 'Glas Trösch, Showoom Interieur Ausstellung Gastro & Hotel' };

myImages[7] = { 'src' : 'pics/3_2_6.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Gastro & Hotel' };

myImages[8] = { 'src' : 'pics/3_2_7.jpg',
'dsc' : 'Century Times Gems, Messestand' };

myImages[9] = { 'src' : 'pics/3_2_8.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[10] = { 'src' : 'pics/3_2_9.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[11] = { 'src' : 'pics/3_2_10.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[12] = { 'src' : 'pics/3_2_11.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07' };

myImages[13] = { 'src' : 'pics/3_2_12.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Armaturenprogramm' };

myImages[14] = { 'src' : 'pics/3_2_13.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Innenbereich mit Gesamtprogramm' };

myImages[15] = { 'src' : 'pics/3_2_14.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Durchblick von der Bar' };

myImages[16] = { 'src' : 'pics/3_2_15.jpg',
'dsc' : 'SH-Holz Biel, Gastromöblierung' };


var maxValue = myImages.length - 1;
var intValue = 1;


function gallerie(charValue) {
    if(charValue == 'c') {
        document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p><p>"+ intValue +"/"+ maxValue  +"</p>";
    }
    else if(charValue == '+') {
        if(intValue == maxValue) {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p><p>1/"+ maxValue  +"</p>";
            intValue = 1;
        }
        else {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc +"</p><p>"+ (intValue+1) +"/"+ maxValue  + "</p>";
            intValue = intValue + 1;
        }
    }
    else if(charValue == '-') {
        if(intValue == 1) {
            intValue = maxValue;
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p><p>"+ intValue +"/"+ maxValue  +"</p>";
           
        }
        else {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p><p>"+ (intValue-1) +"/"+ maxValue  +"</p>";
            intValue = intValue - 1;
        }
    }
}

function vorladen1(i) {
if (! myImages[i].img ) {
myImages[i].img = new Image();
myImages[i].img.src = myImages[i].src;
}
}

function vorladen(i) {
var next= i<(maxValue-1) ? (i+1) : 1;
var prev= i>1 ? (i-1) : 1;
vorladen1(next);
vorladen1(prev);
}

</script>

</head>

<body onLoad="gallerie('c')">
<div id="logo"></div>
<div id="imgGallerie"></div>
<div id="links"><a href="javascript: gallerie('-')"><</a></div>
<div id="rechts"><a href="javascript: gallerie('+')">></a></div>

</body>

gute Nacht!

Sarah14 02.11.2007 09:59

genial!
 
Guten Morgen!
Wow da hat ja jemand ganze Arbeit geleistet.. Super! Vielen Dank. Das mit dem Zählwerk sieht auch gut aus.. danke danke danke..
ich werd jetzt mal noch probieren, dieses zählwerk zwischen meine < und > zu bekommen.. vielleicht muss ich da nochmals nachfragen.. darf ich ?

Guten Tag
lg
sarah

Sarah14 02.11.2007 12:02

zählfunktion
 
Mh, also das will irgendwie nicht klappen. Ich hatte mal so eine gute Vorlage im Netz gesehen, da war das drin, nur leider hab ich denk link nicht mehr.

Also falls du, oder noch jemand eine Idee hat?
Das wäre echt super..

liebe Grüsse
Sarah

Sarah14 02.11.2007 12:37

Fehler?
 
Hallo
Nachdem ich jetzt mal das Script durchgängig getestet habe ist mir was aufgefallen. Er nimmt mir nur die ungeraden Bilder rein, d.h. er lässt nummer2,4,6,8, aus..
Was stimmt da nicht?

lg
sarah

Sarah14 02.11.2007 12:47

Ha, hab's gelöst, hab einfach den zweiten Preload-Script rausgelöscht, nun alles wunderbar.

Nur was ich immer noch ist, wäre diese Zählfunktion ausserhalb des eigentlichen image gallery bereichs und zwischen den Pfeilen..

gruss
sarah

paracelsus 02.11.2007 15:51

Zitat:

Zitat von Sarah14 (Beitrag 355659)
Ha, hab's gelöst, hab einfach den zweiten Preload-Script rausgelöscht, nun alles wunderbar.

Nur was ich immer noch ist, wäre diese Zählfunktion ausserhalb des eigentlichen image gallery bereichs und zwischen den Pfeilen..

gruss
sarah

Gut das Du es gelöst hast, warum das so war weiss ich nicht, der Fehler trat bei mir nicht auf.
Die Zählfunktion und die Pfeile habe ich nun unterhalb, aber im imgGallerie div angesetzt:
Code:

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    #imgGallerie p span{
        padding: 0 1em;
    }
    #imgGallerie p span a{
        text-decoration: none;
    }
    </style>
    <script type="text/javascript">
var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";
myImages[2] = new Image();
myImages[2].src = "pics/3_2_1.jpg";
myImages[3] = new Image();
myImages[3].src = "pics/3_2_2.jpg";
myImages[4] = new Image();
myImages[4].src = "pics/3_2_3.jpg";
myImages[5] = new Image();
myImages[5].src = "pics/3_2_4.jpg";
myImages[6] = new Image();
myImages[6].src = "pics/3_2_5.jpg";
myImages[7] = new Image();
myImages[7].src = "pics/3_2_6.jpg";
myImages[8] = new Image();
myImages[8].src = "pics/3_2_7.jpg";
myImages[9] = new Image();
myImages[9].src = "pics/3_2_8.jpg";
myImages[10] = new Image();
myImages[10].src = "pics/3_2_9.jpg";
myImages[11] = new Image();
myImages[11].src = "pics/3_2_10.jpg";
myImages[12] = new Image();
myImages[12].src = "pics/3_2_11.jpg";
myImages[13] = new Image();
myImages[13].src = "pics/3_2_12.jpg";
myImages[14] = new Image();
myImages[14].src = "pics/3_2_13.jpg";
myImages[15] = new Image();
myImages[15].src = "pics/3_2_14.jpg";
myImages[16] = new Image();
myImages[16].src = "pics/3_2_15.jpg";


var myImages = new Array();
myImages[1] = { 'src' : 'pics/innenarchitektur.jpg',
'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };

myImages[2] = { 'src' : 'pics/3_2_1.jpg',
'dsc' : 'Glas Trösch, Gastrobereich' };

myImages[3] = { 'src' : 'pics/3_2_2.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur' };

myImages[4] = { 'src' : 'pics/3_2_3.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Box «Public & Activity»' };

myImages[5] = { 'src' : 'pics/3_2_4.jpg',
'dsc' : 'Glas Trösch, Showroom Boxenkonzept' };

myImages[6] = { 'src' : 'pics/3_2_5.jpg',
'dsc' : 'Glas Trösch, Showoom Interieur Ausstellung Gastro & Hotel' };

myImages[7] = { 'src' : 'pics/3_2_6.jpg',
'dsc' : 'Glas Trösch, Showroom Interieur Gastro & Hotel' };

myImages[8] = { 'src' : 'pics/3_2_7.jpg',
'dsc' : 'Century Times Gems, Messestand' };

myImages[9] = { 'src' : 'pics/3_2_8.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[10] = { 'src' : 'pics/3_2_9.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[11] = { 'src' : 'pics/3_2_10.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 05' };

myImages[12] = { 'src' : 'pics/3_2_11.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07' };

myImages[13] = { 'src' : 'pics/3_2_12.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Armaturenprogramm' };

myImages[14] = { 'src' : 'pics/3_2_13.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Innenbereich mit Gesamtprogramm' };

myImages[15] = { 'src' : 'pics/3_2_14.jpg',
'dsc' : 'Bodenschatz, Messestand Swissbau 07, Durchblick von der Bar' };

myImages[16] = { 'src' : 'pics/3_2_15.jpg',
'dsc' : 'SH-Holz Biel, Gastromöblierung' };


var maxValue = myImages.length - 1;
var intValue = 1;


function gallerie(charValue) {
    if(charValue == 'c') {
        document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p><p><span><a href=\"javascript: gallerie('-')\"><</a></span>"+ intValue +"/"+ maxValue  +"<span><a href=\"javascript: gallerie('+')\">></a></span></p>";
    }
    else if(charValue == '+') {
        if(intValue == maxValue) {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p><p><span><a href=\"javascript: gallerie('-')\"><</a></span>1/"+ maxValue  +"<span><a href=\"javascript: gallerie('+')\">></a></span></p>";
            intValue = 1;
        }
        else {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc +"</p><p><span><a href=\"javascript: gallerie('-')\"><</a></span>"+ (intValue+1) +"/"+ maxValue  + "<span><a href=\"javascript: gallerie('+')\">></a></span></p>";
            intValue = intValue + 1;
        }
    }
    else if(charValue == '-') {
        if(intValue == 1) {
            intValue = maxValue;
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p><p><span><a href=\"javascript: gallerie('-')\"><</a></span>"+ intValue +"/"+ maxValue  +"<span><a href=\"javascript: gallerie('+')\">></a></span></p>";
           
        }
        else {
            document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p><p><span><a href=\"javascript: gallerie('-')\"><</a></span>"+ (intValue-1) +"/"+ maxValue  +"<span><a href=\"javascript: gallerie('+')\">></a></span></p>";
            intValue = intValue - 1;
        }
    }
}

function vorladen1(i) {
if (! myImages[i].img ) {
myImages[i].img = new Image();
myImages[i].img.src = myImages[i].src;
}
}

function vorladen(i) {
var next= i<(maxValue-1) ? (i+1) : 1;
var prev= i>1 ? (i-1) : 1;
vorladen1(next);
vorladen1(prev);
}

</script>

</head>

<body onLoad="gallerie('c')">
<div id="logo"></div>
<div id="imgGallerie"></div>

</body>
</html>

IMO sieht es gut aus, und du hast weniger DIV im Markup!

cu

Sarah14 02.11.2007 16:43

lösung
 
Danke dir nochmals.
Ich habe zwischenzeitlich die Zählfunktion rausgeschält und zwischen die Pfeile mit einer neuen ID ausgegeben.

Danke trotzdem

lg
sarah


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023