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:
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
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:
Code:
<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