foto-galerij met klik voor vergroting

Status
Niet open voor verdere reacties.
csshunter

csshunter

Meubilair
Lid geworden
4 aug 2009
Berichten
6.465
Dit is een vervolg op het topic "Dreamweaver/een afbeelding vergroten bij mouseover of mouseclick", waarvoor ik hier op het forum een suggestie deed (dit voorbeeld, met deze toelichting).
Via de privé-mail kreeg ik de volgende vraag binnen:
Hallo,
Met belangstelling heb ik het forumartikel (...) gelezen over het afbeelden van vergrote plaatjes zonder dat allemaal -per foto- afzonderlijk te moeten gaan aanroepen/programmeren.
Nu is het dat ik door iemand ben gevraagd met iets soortgelijks te helpen, maar ik heb ook absoluut geen zin om van 500 foto's dat per foto afzonderlijk te programmeren.

Mijn vraag is dus concreet: mag ik voor die mensen -die ik help- dat scriptje ook gebruiken en zoja, waar kan ik hem downloaden.
Ik hoor het graag en bij voorbaat al mijn dank.
Grtzzzz
Klik om te vergroten...
Als ik het hier in het openbaar beantwoord, kunnen anderen er misschien ook iets aan hebben, want:
  1. Het script heeft een zg. "Creative Commons licentie" en mag zonder meer door iedereen gebruikt worden (de voorwaarden staan in het script zelf).
  2. Het script is natuurlijk via de genoemde voorbeeld-pagina te downloaden, maar dat was toegesneden op een concreet geval.
  3. Voor algemeen gebruik is een universeel script handiger,
    dat binnenkort mijn fabriekje zal verlaten.
[edit]Sla alle tussenstappen over, en ga direct naar product. :D[/edit]

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Dan hier het vervolg!
De html van de <body> kan er in principe simpelweg als volgt uitzien:
HTML: 
<body>
<div id="bigBox">&nbsp;</div>
<div id="everything">
    ... andere dingen op de pagina
    <div id="galery">
        <a href="images/big1.jpg"><img src="images/mini1.png" alt=""></a>
        <a href="images/big2.jpg"><img src="images/mini2.png" alt=""></a>
        <a href="images/big3.jpg"><img src="images/mini3.png" alt=""></a>
        ... enz.
    </div>
</div>
<script type="text/javascript" src="scripts/small-to-big.js"></script>
</body>
De mini1.png enz. zijn de thumbnails, die allemaal even groot moeten zijn.
De grote afbeeldingen big1.png enz. kunnen van formaat verschillen (die worden automatisch aangepast tot vrijwel beeldvullend op elke resolutie).
Voor staande afbeeldingen wordt alleen de class="staand" toegevoegd:
HTML: 
        <a class="staand" href="images/big4.jpg"><img src="images/mini4.png" alt=""></a>
Met css en javascript wordt dynamisch geregeld, dat bij het klikken op een kleine afbeelding de hele container #everything uitgeschakeld wordt, en tegelijk de container #bigBox ingeschakeld wordt en de grote afbeelding krijgt die bij de klik hoort.

Op deze manier worden de grote afbeeldingen pas gedownload als ze nodig zijn, terwijl steeds op dezelfde pagina gebleven wordt. Hierdoor is de pagina met de kleine afbeeldingen rap op het scherm, en kan ook bijzonder snel geschakeld worden tussen klein en groot.
In wezen zijn het daarmee geen javascript popups, maar een soort dynamisch ingeladen "css popups".

Het "in principe" hierboven heeft te maken met ... wie anders natuurlijk ... Internet Explorer, die weer eens zand tussen de raderen / roet in het eten / eigen interpretaties in de geldende standaarden gooit. :(
  • De eerste versie: www.developerscorner.nl/css-exercitions/website-galery-noIE.php

  • Uitgebeide beschrijving op de pagina zelf.
  • Deze versie is prachtig en precies zoals het volgens de standaarden zou moeten, maar geeft geen mooie beeldvullende vergrotingen in de Internet Explorers (IE6, IE7, IE8) te zien.
  • De andere browsers (Firefox, Opera, Safari, Chrome) doen het prima! :)
Dus we moeten zeggen:

Wordt vervolgd! ;)
CSShunter

@ErikBooy: Hoi Erik! We houden de nieuwsgierigheid er in! Er zal een workaround moeten plaatsvinden die meer html-code zal vergen. Of we laten voor straf IE in z'n vet gaarkoken, dat kan ook. :d
 
Dag CSSHunter,

Ik heb je script even heel kort ingekeken, maar het IE probleem, is dat niet gewoon op te lossen door

[JS]
return false;
[/JS]

aan het einde van de functie toe te voegen? Ik krijg namelijk een beetje het idee dat IE de code wel uitvoert, maar daarna alsnog de gewone link volgt.

But then again, ik heb maar even heel kort gekeken ;) dus ik kan er volledig naast zitten.
 
return false ... aan het einde van de functie toe te voegen?
Klik om te vergroten...
Nop, dat is 'm niet:
die staat er al in, en het rare is dat IE wel de setAttribute onclick="..." uitvoert en het nieuwe attribuut mooi in de html plaatst (zie gegenereerde broncode, met de IE "WAT" = Web Accessibility Toolbar, www.paciellogroup.com/resources/wat-ie-about.html) ... maar vervolgens het commando onclick niet kan aanroepen.
Ik heb er wat alert'jes in gezet ter illustratie:
De setAttribute kan IE zien (via getAttribute daarna aantoonbaar; en dus ook in de gegenereerde html), maar de alert in de eerste regel van de onclick functie bigBox() komt helemaal niet door. Wel mooi in FF en de rest natuurlijk...

Ik probeer nog wat workarounds te sprokkelen, maar Google verspreidt een en al IE-ellende bij de setAttribute. :confused:
Hé, ingeving, ik ga eens bij MSDN kijken.
...
Hm, uurtje later, niets wijzer geworden (wel over Jscript en VBscript, maar daar kopen we niets voor).

Ben bang dat IE er niet mee kan omgaan, omdat het "attribute" in ons geval geen echte eigenschap als een style of title is, maar een event.
Wie het weet, mag het zeggen! ;)

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ja, die weg was ik ook ingeslagen, maar nog niet gelukt (voor mijn onbekend terrein). ;)
 
't Gaat met trial and error, en alweer 1 stapje verder. :D
IE doet het nu ook, maar nu nog een array voor de addEventListener's zien te fabrieken waardoor elke link zijn eigen grote afbeelding kan krijgen.
 
Brr, die eventLuisteraars in IE zijn een verhaal apart. :shocked:
Gewoon recht voor z'n raap valt het met wat IE-aanpassingen te wel doen, maar zodra er een variable in meegenomen moet worden, gaat het mis. :(
Half Google doorgebladerd op zoek naar een uitweg, maar nop: niets gevonden.

Omdat eerder ook een onclick op de link niet voor IE van toepassing bleek, zat ik behoorlijk vast...

... tot ik de ingeving kreeg dat IE er misschien in zou trappen als er niet een onclick op de link zelf wordt gezet, maar op het (kleine) img binnen die link - vergezeld van het uitschakelen van de onclick op de link zelf met een return false.
En: :d
Dat blijkt te werken, zelfs in IE6!
Zo wordt het javascript ook veel eenvoudiger, dat is mooi meegenomen.
Nu nog even in een mooi jasje steken.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Eerst zien, dan geloven! Dacht ik zelf ook, na versie 743. :D

Maar er kan geoogst worden:

IE is getemd, de rest was al vlekkeloos; valid html en css, 47/47 Quickscan Kwaliteitsmodel Webrichtijnen, en Passed in de automatische CynthiaSays WCAG-accessibility test (prioriteit 1,2,3).
Wat wil een mensch nog meer? ;)

Veel plezier ermee!
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan