[JS]Thumbs laden in andere DIV op 1 pagina

[Steph Kai]

Hallo mensen,

Ik ben druk bezig met een XHTML site, het wordt een soort van portfolio. Nou heb ik een pagina waarin ik foto's wil laten zien, die is opgebouwd uit een container, daarin zit een header en een footer, en tussenin zitten nog 2 div's die naast elkaar staan, beide div's hebben een ID en geen Class.
In de rechter div staan thumbs van de foto's en links wil ik dat de foto's geladen worden. Ik wil dit graag met javascript doen (ik heb gehoord dat het kon, maar weet niet precies hoe meer).
Is iemand die weet hoe ik dat moet doen? Ik kan op google niet vinden hoe ik het wil hebben. Veel mensen hebben het over iFrames enzo, maar ik wil het graag op deze manier.

[Cartman!]

Van wie heb je dat gehoord/waar heb je dat gelezen? Waar heb je allemaal gezocht? Er wordt wel een beetje verwacht dat je zelf al informatie gezocht hebt want nu komt het erg over als een scriptrequest, die zijn niet toegestaan.

[Steph Kai]

Nou ik vind niet dat dat wat uitmaakt, maar goed, van iemand van school... en ik heb zn beetje 4 uur rond gegoogled, dus ik kan je daar geen specificatie van geven...

.....

[ Voor 40% gewijzigd door Steph Kai op 22-06-2007 21:08 ]

[Padschild]

Steph Kai schreef op vrijdag 22 juni 2007 @ 17:28:
(ik heb gehoord dat het kon, maar weet niet precies hoe meer)

Ehm, dat klinkt nogal raar vind ik. Tuurlijk kan dat, maar heb je ervaring met javascript? Er zijn zat scripts te vinden, kant en klaar met uitvouwmenu's en weet ik wat, maar dit lijkt meer op een scriptrequest.

Wil je het dus zelf doen? Zo ja, wat heb je dan allemaal al geprobeerd? Zo niet, kijk dan gewoon hier:http://alistapart.com/articles/imagegallery

[Cartman!]

Steph Kai schreef op vrijdag 22 juni 2007 @ 20:51:
Nou ik vind niet dat dat wat uitmaakt, maar goed, van iemand van school... en ik heb zn beetje 4 uur rond gegoogled, dus ik kan je daar geen specificatie van geven...

.....

Dus je hebt 4 uur op google gezocht en niks gevonden? Dat vind ik echt raar. Beheers je wel de basis van javascript dan? Kijk eens rond op w3schools.org en doe eens een bezoekje aan de Mozilla Developer Center, echt veel informatie. Geen hapklare oplossing, maar dat ga je juist leren ermee.

[Wim Leers]

Als je geen K*T JavaScript wilt leren, kun je eens kijken naar jQuery, wat JavaScript weer FUN maakt En het is een stuk makkelijker dan gewone JavaScript ook! Zie ook Visual jQuery als een reference.

[Steph Kai]

Nee, ik beheers ook niet javascript, maar ik was gewoon op zoek naar een oplossing die mij kon helpen om dit probleem op een makkelijke manier op te lossen, en als dat een site is die verteld hoe je zoiets makkelijk kan toepassen ben ik daar blij mee, en natuurlijk hoef ik geen code hier te hebben staan die dat precies verteld, want dan leer ik er nog niets van, en kan ik het dus ook niet onderbouwen (het is namelijk voor school )

Maar ik wil ook geen hele javascript tuturial hoeven leren voordat ik dat kan, want daar heb ik gewoon weg geen tijd voor. Maar ik ga ff kijken naar die link die padschild stuurde, kijken of ik daar mee uit de voeten kan

[Steph Kai]

Bashrat schreef op vrijdag 22 juni 2007 @ 21:35:
Als je geen K*T JavaScript wilt leren, kun je eens kijken naar jQuery, wat JavaScript weer FUN maakt En het is een stuk makkelijker dan gewone JavaScript ook! Zie ook Visual jQuery als een reference.

Hehe, ik kijk ook daar ff, thnx

[XWB]

Bashrat schreef op vrijdag 22 juni 2007 @ 21:35:
Als je geen K*T JavaScript wilt leren, kun je eens kijken naar jQuery, wat JavaScript weer FUN maakt En het is een stuk makkelijker dan gewone JavaScript ook! Zie ook Visual jQuery als een reference.

Dat mag allemaal wel leuk zijn maar ik zou me toch eerst in javascript verdiepen voor je met zo'n libs aan de slag gaat. Als je tegen problemen aanloopt sta je mooi te kijken.

[Verwijderd]

Steph Kai schreef op vrijdag 22 juni 2007 @ 17:28:
In de rechter div staan thumbs van de foto's en links wil ik dat de foto's geladen worden. Ik wil dit graag met javascript doen (ik heb gehoord dat het kon, maar weet niet precies hoe meer).

Zoiets?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Gallery</title>
<script type="text/javascript">
function showPic(pic){
    document.getElementById("groot").src=pic;
}
</script>
<style type="text/css">
img#groot {
    width:600px;
    height:480px;
}
</style></head>
<body>

<div id="links">
   <img id="groot" src="http://static.flickr.com/26/99012599_f6f3a0ef6c.jpg"
alt="fruit">
</div>

<div id="rechts">
   <a href="#"
    onclick="showPic('http://static.flickr.com/26/99012599_f6f3a0ef6c.jpg');return false">plaatje 1</a>
   <a href="#"
    onclick="showPic('http://static.flickr.com/95/251542138_69a420316d.jpg');return false">plaatje 2</a>
</div>

</body></html>

Maar dan met je eigen pics en thumbs.

[Steph Kai]

Hey Bart, daar ben ik best blij mee, ik had het aan de hand van de tip van Padschild gedaan, maar die site geeft aan dat je best wat Javascript in je html hebt staan, met deze is dat niet het geval, en dus meer overzicht. Bedankt!

En ik denk dat ik deze ook beter kan omzetten om zo te gebruiken voor een flashmenu.

[ Voor 16% gewijzigd door Steph Kai op 24-06-2007 17:40 ]

[sopsop]

Ik heb ooit eens een javascript fotogallery gemaakt. Die kun je vrij eenvoudig serverside vullen, maar ook in de source zetten.

Je vult dus een viertal javascript arrays met foto's, titels en teksten (de vierde array is een methode om een foto te selecteren, ik gebruikte die om serverside een zipbestand aan te maken met daarin de geselecteerde foto's op origineel formaat). Je geeft op waar de foto's en thumbnails zich bevinden en je bent klaar. Hij maakt automatisch een indexpagina aan (die ook nog eens gepagineerd is, en het aantal thumbnails per pagina kun je opgeven).

En er zit een slideshow-optie in die je ook nog van snelheid kunt laten veranderen.

Onderstaand voorbeeld is gevuld met foto's en plaatjes direct van het internet, het zijn dus niet mijn foto's, maar puur ter illustratie. Het voorbeeld is trouwens redelijk fucked up in Firefox, maar dat ligt puur aan deze twee regels css:

code:

.stripflow { float:left; }
.indexflow { float:left; }

Het geheel is gewoon te stylen met css.

=edit=
Hmmm... de code was te lang om hier te posten
Een linkje dan maar:
http://kennisbank.brinkster.net/testjes/gallerytest.htm

[ Voor 99% gewijzigd door sopsop op 25-06-2007 13:35 ]