getElementById, maar dan automatisch de juiste ID?

[Milenec]

Hey,

ik heb na veel javascript opzoekwerk en nog veel meer gepruts een fotogallerij ineen kunnen steken waar ik redelijk tevreden over ben, maar ik vroeg me toch nog een paar dingen af, die volgens mij wel beter moeten kunnen. Ik ben echt niet zo goed in javascript, dus ik weet dat mijn code niet echt optimaal is, en daarom vroeg ik me af of dit stukje code, dat bij elke thumbnail hetzelfde is, ware het niet voor een andere ID, als één enkele function geschreven kan worden, in een extern .js bestand, die dan automatisch de juiste ID kan terugvinden:

<div class="loader"><a href="#x" onclick="{document.getElementById('imgid1').style.width = '500px';document.getElementById('imgid1').style.height = '333px';document.getElementById('imgid1').style.backgroundImage = 'url(./myrtle/1.jpg)';}" ondblclick="{document.getElementById('imgid1').style.width = '106px';document.getElementById('imgid1').style.height = '70px';document.getElementById('imgid1').style.backgroundImage = 'url(./myrtle/tmb/1.jpg)';}" style="position:relative;display:block;width:106px;height:70px;background-image:url(./myrtle/tmb/1.jpg)" id="imgid1" class="img"></a></div>

Hoe het werkt is als volgt: De bezoeker krijgt een reeks van thumbnails te zien (die tijdens het laden een achtergrondafbeelding laat zien om duidelijk te maken dat hij nog aan het laden is: vandaar de div met class="loader"). Als hij op een van de thumbnails klikt wordt die precies uitvergroot. In werkelijkheid laadt hij dan gewoon een grotere versie van de thumbnail, en door die met javascript in te laden, wordt niet de hele pagina ververst, waardoor het een vlotter beeld geeft. Als hij dan twee maal op de vergrote afbeelding klikt wordt die terug verkleind.

Wat ik me dus afvroeg is, of het mogelijk is om:
a) De javascript code maar een keer voluit te moeten schrijven en dan gewoon een function "grow()' of "shrink()" te kunnen gebruiken, zodat de pagina veel kleiner wordt (ik heb een pagina bekeken, en daarvan is de code 72kb, zonder de afbeeldingen erbij gerekend).
b) Of het misschien kan om het sluiten ook door een enkele klik te laten gebeuren, in plaats van een dubbele klik. Dat lijkt me gewoon iets logischer.

Hoe het er nu uitziet kan je zien op http://www.milenec.be/gallery/?subject=rome. En de iframe waarin de afbeeldingen zich bevinden: http://www.milenec.be/gallery/pictures.php?subject=rome.

Bugs waar ik al weet van heb: In internet explorer 6 en 7 verkleint hij de afbeelding vanzelf weer de allereerste keer dat de pagina geladen wordt. Vanaf de tweede keer, of bij een andere afbeelding werkt hij perfect.
En je ziet geen vergrote afbeelding tot dat alle thumbnails geladen zijn, wat ook een tijdje kan duren. Maar dit zijn dingen waarvan ik denk dat ze zo niet opgelost zouden raken.

Nog iets dat je misschien moet weten: de pagina wordt gegenereerd vanuit php, met een script dat automatisch de afbeeldingen ophaalt. Ik denk niet dat dat veel uitmaakt, maar ik schreef het er toch maar bij, voor in het geval dat...

Met vriendelijke groet, en hopend op het beste,

Niels

 

[That Guy]

Hallo naamgenoot,

Ja, dit kan. Wat je dan doet is het doorgeven van het id en het paatje ofzo.

//js

function igGrow(id,imgstr)
{
var omg = document.getElementById(id);

omg.style.width = '333px';
omg.style.height = '500px';
omg.src= imgstr;
omg.onclick = 'igShrink(' + id + ',' + imgstr + ')';
}

//zo ook de functie igShrink()......

iets in die richting.

Ohja, deze zou je ook automatisch kunnen laten maken. Iets in deze richting:

//js

var arrMetA = document.getElementsByTagName('a');
   //arrMetA[0] is dan dus de 1e <a bla bla...>, arrMetA[1] is de 2e, etc.

for(i=0;i<arrMetA.length;i++){
   a.onclick = 'igGrow(...)';
}

Geeeeeeen idee of dit werkt. Maar het gaat om het idee
:thumb:

 

[Milenec]

Heel erg bedankt voor het snelle antwoord, Vegras, maar het probleem is wel dat niet alle afbeeldingen dezelfde grootte hebben. Maar is het mogelijk om gewoon aan igShrink(id,imgstr,imgwidth,imgheight) toe te voegen, en dan als je de functie oproept bij een onclick="", op de derde en de vierde plaats de juiste afmetingen in geeft? Dan neem ik aan dat ik omg.style.width = '333px'; gewoon moet veranderen in omg.style.width = imgwidth; of zit het nog iets ingewikkelder in elkaar?

Niels

+ Edit: ik denk dat ik snap hoe het in elkaar zit, alleen zoek ik nog hoe ik bij omg.style.height = ... gewoon px achter imgwidth moet krijgen. imgwidthpx, imgwidth'px', imgwidth.'px', geen een blijkt te werken...

+ Nog een edit, laat dat ook al maar, ik heb het anders opgelost, ik heb gewoon in het stukje code dat de php aanmaakt er al px achter laten zetten, zodat ik onclick="igGrow('imgid1','url(./myrtle/1.jpg)','500px','333px')" en dat werkt wel


En toch werkt het nu niet meer helemaal. Dit is de javascript code:

<script language="javascript" type="text/javascript">
function igGrow(id,imgstr,igw,igh,imgstr2,igw2,igh2)
{
var omg = document.getElementById(id);

omg.style.width = igw;
omg.style.height = igh;
omg.style.backgroundImage = imgstr;
omg.onclick = 'igShrink(' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + ')';
}

function igShrink(id,imgstr,igw,igh,igw2,igh2)
{
var omg = document.getElementById(id);

omg.style.width = igw2;
omg.style.height = igh2;
omg.style.backgroundImage = imgstr2;
omg.onclick = 'igGrow(' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + ')';
}
</script>

En dit de onclick code

onclick="igGrow('imgid1','url(./myrtle/1.jpg)','500px','333px','url(./myrtle/tmb/1.jpg)','106px','70px')"

Het vergroten lukt wel, maar bij het verkleinen doet hij helemaal niets...

 

[That Guy]

waarschinlijk omdat het 'omg.onclick' niet werkt...

Als je met firefox naar de site gaat (je foto-album dus) kan je via het menu (tools->foutenconsole) zien wat er fout gaat.


:thumb:





ohja, trouwens, javascript werkt met plussen. Ofwel, 'var bla = "hallo" + "daar";'

 

[VBSboy]

ff een vraag, want ik probeer er al heel lang achter te komen wat die plussen precies doen op sommige momenten in een scritp,, waar dien die plus voor tussen "hallo" en daar "daar" of is het zo simpel dat die + de 2 woorden naast elkaar zet dus er "hallo daar " van maakt

 

[That Guy]

Niet helemaal...

Als je bekend bent met php is de plus hetzelfde als een punt. Ofwel, het connect 2 strings. Als het echter getallen zijn, is het optellen.

//js

var sstr1 = "hallo";
var sstr2 = "daar";

alert(sstr1 + sstr2);  //geeft "hallodaar";
alert("hallo"+"daar"); //returnt "hallodaar";

 

[Milenec]

Hey,

de firefox foutcontrole geeft geen error-messages, maar ik zal nog wat verder opzoeken op google, en dan kom ik er wel uit
Al heel erg bedankt voor de hulp, ik ben er al een pak mee vooruit geholpen!

Niels