login  Naam:   Wachtwoord: 
Registreer je!
 Forum

image gallery

Offline hondasport - 09/11/2007 22:38
Avatar van hondasportNieuw lid Hallo, ik zou graag op mijn site een image gallery hebben .Graag zou ik een tekst met een foto ernaast , en eronder kleinere foto's die als je erop op klikt dan in de plaats van de grote foto komt .Liefst volledig in css .Kan iemand mij helpen?

19 antwoorden

Gesponsorde links
Offline mathiasB - 09/11/2007 22:44
Avatar van mathiasB HTML interesse > samenwerken? Niet
Offline Koen - 10/11/2007 12:52
Avatar van Koen PHP expert Dit doe je met Javascript..
Offline Scott - 10/11/2007 22:51
Avatar van Scott Gouden medaille

PHP ver gevorderde		 "Kan iemand een auto voor me maken die kan vliegen als ik op een knop drukt ? Liefst zonder vleugels."

Onmogelijk dus om alleen met CSS te doen, en ik denk niet dat je heel veel mensen zult vinden die dit 'even' voor je maken. Kijk eens op hotscripts.com ;)
Offline Soebam - 11/11/2007 00:29
Avatar van Soebam HTML ver gevorderde Het kan prima met css hoor.. (En trouwens, een auto die vliegt zonder vleugels is voor mij ook niet ondenkbaar, als je maar voldoende aandrijving hebt )
Offline Scott - 11/11/2007 01:19
Avatar van Scott Gouden medaille

PHP ver gevorderde		 Hoe wil jij in CSS een plaatje weergeven dan ?

En al zet je een vliegtuigmotor op een auto dan nog kan hij - zonder vleugels - niet vliegen.
Offline Godlord - 11/11/2007 01:34 (laatste wijziging 11/11/2007 01:34)
Avatar van Godlord PHP gevorderde @Scott: een hovercraft heeft geen vleugels nodig, hetzelfde kan men verwerken in een auto.

In CSS een plaatje weergegeven?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: url(test.png) no-repeat;
Offline vinTage - 11/11/2007 02:00
Avatar van vinTage Nieuw lid Volledig css kan niet, want css kan je niet aanklikken en dus geen grotere foto tonen.

scott = ownt@hovercraft opmerking 

Lets face it, dit is gewoon een item voor samenwerken, nul input, geen vastloop probleem, alleen een vraag, dus...

Daarbij is de vraagstelling zo onbenullig dat je al weet dat hij het zelf never gaat maken (niet vervelend bedoeld, maar het is gewoon zo)


[nuttig]
Die css skippen we dus gewoon even, want dat is onmogelijk, maar een superdeftige slideshow incl CMS voor <30 dollar.
[/nuttig]
Offline Godlord - 11/11/2007 02:21 (laatste wijziging 11/11/2007 02:23)
Avatar van Godlord PHP gevorderde @vinTage: die slideshow is wel mooi .

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.     function toon_vergroot(object) {
  3.         var thumbnail = document.getElementById('afbeelding').style;
  4.         var picture = document.getElementById('groteafbeelding').style;
  5.         thumbnail.display = 'none';
  6.         picture.display = 'inline';
  7.     }
  8.  
  9.     function toon_verkleind(object) {
  10.         var thumbnail = document.getElementById('afbeelding').style;
  11.         var picture = document.getElementById('groteafbeelding').style;
  12.         picture.display = 'none';
  13.         thumbnail.display = 'inline';
  14.     }
  15. </script>
  16.  
  17. <img id="afbeelding" onclick="toon_vergroot()" src="afbeelding.png" alt="Een mooie afbeelding van Bill Gates" style="display: inline; max-width: 200px; max-height: 200px;" />
  18.  
  19. <img id="groteafbeelding" onclick="toon_verkleind()" src="afbeelding.png" alt="Een mooie afbeelding van Bill Gates" style="display: none;" />


Dit is zo'n beetje de code. Voor de rest is toch wel wat modificatie vereist... Dit is enkel een soort basis .
Offline Scott - 11/11/2007 02:27
Avatar van Scott Gouden medaille

PHP ver gevorderde
Godlord schreef:
@Scott: een hovercraft heeft geen vleugels nodig, hetzelfde kan men verwerken in een auto.

In CSS een plaatje weergegeven?
[..code..]


Ik heb een CSS-bestandje gemaakt en dat er in gezet, maar 't werkt niet ?

Heb gewoon letterlijk de code gekopieerd die jij postte en opgeslagen...

Oh en btw: letterlijk gezien is dat wat een hovercraft doet idd vliegen, maar als een object enkele centimeters boven de grond hangt dan noem ik dat geen vliegen.
Offline Godlord - 11/11/2007 02:32 (laatste wijziging 11/11/2007 02:32)
Avatar van Godlord PHP gevorderde Oh en btw: letterlijk gezien is dat wat een hovercraft doet idd vliegen, maar als een object enkele centimeters boven de grond hangt dan noem ik dat geen vliegen.

Sinds wanneer hangt een hovercraft aan een touwtje of iets dergelijks?

Dat is ook niet hoe je het moet gebruiken.
xhtml code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="background: url(test.png) no-repeat; display: block; width: 200px; height: 200px;" /></div>
Offline Scott - 11/11/2007 02:38 (laatste wijziging 11/11/2007 02:40)
Avatar van Scott Gouden medaille

PHP ver gevorderde		 Hééé, kijk eens: xhtml code. Dus géén CSS en dat wilde de topicstarter niet.


PS: han·gen1 (onov.ww.)
1 van boven ondersteund, door eigen zwaarte neerwaarts gestrekt blijven
2 van de opgerichte houding of rechte lijn afwijken
3 zonder steunsel zweven, drijven
4 tot straf opgehangen zijn
5 vastzitten
6 [inf., sport] (van de bal) in het doel gebracht zijn
Offline Godlord - 11/11/2007 03:14 (laatste wijziging 11/11/2007 03:16)
Avatar van Godlord PHP gevorderde Dan kun je toch beter het werkwoord zweven gebruiken. Hangen gebruikt men eerder als iets/iemand aan een touw hangt. En een steunsel is dat zich onder het object bevindt en niet boven. Want het object steunt op iets. Dus dat betekent dat het nogal altijd gebruik kan maken van een touw.

(X)HTML is basis code in web development, zonder zo'n code heb je niet eens een website dus doe niet zo achterlijk. Daarbij is dit makkelijk om te vormen naar HTML als je van mening bent dat XHTML geen basis code is. CSS is een taal om objecten in (X)HTML stijl te geven. Niet om opzich een object aan te maken. Je moet niet alles letterlijk nemen. Daarbij ben je nu echt het topic van het werkelijke onderwerp aan't afhalen. Hij vroeg enkel om een bepaalde code en dat die code het liefst in CSS kan. Er staat niet eens "volledig" voor "in CSS". Dus dit is een discussie over niks. Daarbij is zo'n soort script gegeven of in ieder geval een soort basis.

Daarbij:
Citaat:
vlie·gen1 (onov.ww.)
1 zich door de lucht voortbewegen => wieken
2 (van tijd) snel voorbijgaan => omvliegen
3 zeer snel gaan => sjezen
4 (van zaken die aan één einde vastzitten) wapperen
5 [bouwk.] (van gebouwen) vooroverhellen

vlie·gen2 (ov.ww.)
1 (een vliegtuig) besturen
2 door de lucht vervoeren
Offline hondasport - 11/11/2007 17:02
Avatar van hondasport Nieuw lid Alvast bedankt voor jullie reacties .Ik heb mij misschien wat verkeerd uitgedrukt . Mijn bedoeling is dat ik onderaan een aantal thumbails heb die je kan aanklikken en de grote foto erboven.Eigenlijk dus geen slideshow.Ik heb dit vroeger nog gedaan in html met frames ,maar nu zit ik met het probleem dat ik niet weet hoe je die thumbails linkt met die grote foto , als die indezelfde pagina staan .
Offline Godlord - 11/11/2007 18:08 (laatste wijziging 11/11/2007 18:11)
Avatar van Godlord PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.     function toon_afbeelding(object) {
  3.         var hoofdafbeelding = document.getElementById('hoofdafbeelding');
  4.         var afbeelding = object;
  5.         hoofdafbeelding.src = afbeelding.src
  6.     }
  7. </script>
  8.  
  9. <div>
  10.      <img id="hoofdafbeelding" src="geenafbeelding.png" alt="" style="display: inline;" />
  11. </div>
  12.  
  13. <div>
  14.      <img id="afbeelding1" onclick="toon_afbeelding(this)" src="billgates.png" alt="Een mooie afbeelding van Bill Gates" style="display: inline; max-width: 200px; max-height: 200px;" />
  15.      <img id="afbeelding2" onclick="toon_afbeelding(this)" src="stevejobs.png" alt="Een mooie afbeelding van Steve Jobs" style="display: inline; max-width: 200px; max-height: 200px;" />
  16.      <img id="afbeelding3" onclick="toon_afbeelding(this)" src="linustorvalds.png" alt="Een mooie afbeelding van Linus Torvalds" style="display: inline; max-width: 200px; max-height: 200px;" />
  17.      <img id="afbeelding4" onclick="toon_afbeelding(this)" src="osamabinladen.png" alt="Een mooie afbeelding van Osama Binladen" style="display: inline; max-width: 200px; max-height: 200px;" />
  18.      <img id="afbeelding5" onclick="toon_afbeelding(this)" src="bush.png" alt="Een lelijke afbeelding van Bush" style="display: inline; max-width: 200px; max-height: 200px;" />
  19. </div>
Offline timmie_loots - 11/11/2007 20:18 (laatste wijziging 11/11/2007 20:27)
Avatar van timmie_loots PHP gevorderde Om even in te haken over de discussie over het werkwoord "hangen":

In dit geval heeft Scott natuurlijk gewoon gelijk. Hangen kan inderdaad op de manier gebruikt worden, en wordt ook geregeld op die manier gebruikt. De verwarring ontstaat bij Godlord omdat hij verwacht dat hangen alleen kan wanneer dit aan een bepaald object gebeurd. Waarschijnlijk is hij in zoverre onkundig dat hij niet weet dat hangen ook regelmatig, en daarbij correct, gebruikt wordt om het op een plek zwevende blijven van een bepaald object te beschrijven. Het is daarbij onbelangrijk of het object zich wel voort kán bewegen.

EDIT: Overigens kun je ook gebruikmakende van Godlord's definitie van hangen stellen dat een hovercraft hangt, namelijk aan de propellors die de luchtstroom creeëren waar de rok mee wordt gevult.

Ontopic

Misschien is het handiger als er geen gebruik gemaakt wordt van niet goed ondersteunde CSS properties als min-height en max-height, Godlord.

EDIT: Interessante links-populistische hints in je post trouwens
Offline Scott - 11/11/2007 20:29 (laatste wijziging 11/11/2007 20:31)
Avatar van Scott Gouden medaille

PHP ver gevorderde
Godlord schreef:
Dan kun je toch beter het werkwoord zweven gebruiken. Hangen gebruikt men eerder als iets/iemand aan een touw hangt. En een steunsel is dat zich onder het object bevindt en niet boven. Want het object steunt op iets. Dus dat betekent dat het nogal altijd gebruik kan maken van een touw.

Als het woordenboek zegt dat dit een prima toepassing is van het werkwoord hangen, kun je niet zeggen dat ik beter zweven kan gebruiken. Ja, dat kun je wel (en deed je ook, of eigenlijk postte je het), maar 't slaat nergens op.

Citaat:
(X)HTML is basis code in web development, zonder zo'n code heb je niet eens een website dus doe niet zo achterlijk. Daarbij is dit makkelijk om te vormen naar HTML als je van mening bent dat XHTML geen basis code is. CSS is een taal om objecten in (X)HTML stijl te geven. Niet om opzich een object aan te maken. Je moet niet alles letterlijk nemen. Daarbij ben je nu echt het topic van het werkelijke onderwerp aan't afhalen. Hij vroeg enkel om een bepaalde code en dat die code het liefst in CSS kan. Er staat niet eens "volledig" voor "in CSS". Dus dit is een discussie over niks. Daarbij is zo'n soort script gegeven of in ieder geval een soort basis.

Uiteraard weet ik dat een website in principe altijd is opgebouwd uit XHTML of HTML. Maar gezien de vraag van de topicstarter, weet ik niet of hij dat ook weet. Dat noem ik geen achterlijk doen, maar door het voorbeeld dat ik gaf, het een beetje relativeren voor de mogelijk onwetende topicstarter.

Ik geloof dat je z'n topicstart nog even moet doorlezen, want er staat wel degelijk volledig voor in css.

Citaat:
Daarbij:
[..quote..]


Ik had je al min of meer gelijk gegeven dat een hovercraft officieel gezien vliegt, alleen ik noem 5 cm boven het water hangen (of zweven, als je dat liever hebt) géén vliegen. Ook al is het dat officieel wel.

edit: oh, en ik ben niet degene die offtopic gaat hoor, dat ben jij.
Offline Godlord - 12/11/2007 16:30 (laatste wijziging 12/11/2007 17:11)
Avatar van Godlord PHP gevorderde Ik begin niet over een auto die zonder vleugels kan vliegen, dus ik ben er niet mee begonnen ik ben er wel op verder gegaan maar dat betekent niet dat ik er mee ben begonnen.

Scott schreef:
"Kan iemand een auto voor me maken die kan vliegen als ik op een knop drukt ? Liefst zonder vleugels."


timmie_loots schreef:
Misschien is het handiger als er geen gebruik gemaakt wordt van niet goed ondersteunde CSS properties als min-height en max-height, Godlord.

In IE wordt dit niet echt geondersteund. In ieder geval test ik het onder verschillende platformen en browsers.

Macintosh (Versie 9):
Netscape 7: ja.
IE 5: nee.

Windows (XP):
Firefox 2: ja.
IE 7: ja.
IE 6: nee. (In een bepaalde latere versie van IE6 wel)
IE 5.5: nee.
IE 5: nee.
IE 4: nee.
IE 3: nee. (De afbeeldingen zijn niet eens vindbaar voor IE3).
Opera 9: ja.
Netscape 9: ja.

Linux:
Ik heb Ubuntu maar ik denk dat daar enkel Firefox 2 op zit en hij zou dus moeten werken. Als je wilt kan ik dat ook uitproberen. Konqueror heb ik ook maar die staat op mijn Linux Knoppix CD welke redelijk oud is.

Wat blijkt hier dus, dat het niet geondersteund wordt door Internet Explorer en wel door andere browsers zoals Firefox, Netscape en Opera. En er is trouwens een CSS hack voor IE.

Godlord schreef:
Dit is zo'n beetje de code. Voor de rest is toch wel wat modificatie vereist... Dit is enkel een soort basis.


timmie_loots schreef:
EDIT: Interessante links-populistische hints in je post trouwens

Ik wou eigenlijk maar een voorbeeld geven...

Edit: even wat aangepast in het bovenste stuk.
Offline olminator - 28/07/2008 02:03 (laatste wijziging 06/09/2008 20:53)
Avatar van olminator Nieuw lid ik heb een oplossing voor je gevonden...
je moet de plaatjes image01, image02 enz. noemen, en in de map images stoppen. verder moet je bij de regel
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. for (z=1; z<=10; z++)

het getal na 'z<=' aanpassen aan de hoeveelheid foto's die je hebt.
als je de foto's in een rijtje wilt, moet je het stukje
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if (z%5 == 0){
  2. document.write('</tr><tr>')
  3. }

verwijderen.
hier komt hij dan:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Gallery</title>
  5. <script type="text/javascript">
  6. <!--
  7. function pictureChange(mylink){
  8. if (!window.focus){return true}
  9. var href
  10. if (typeof(mylink) == 'string'){
  11. href = mylink
  12. }
  13. else {
  14. href = mylink.href
  15. }
  16. document.getElementById('plaatje').innerHTML = '<img src="' + href + '" alt="" />'
  17. return false
  18. -->
  19. }
  20. </script>
  21. </head>
  22.  
  23. <body>
  24. <center>
  25. <div id="plaatje">
  26. <img src="images/image01.jpg" alt="" />
  27. </div>
  28. <script type="text/javascript">
  29. <!--
  30. x='images/image';
  31. document.write('<table><tr>');
  32. for (z=1; z<=10; z++)
  33. {
  34. if (z<=9)
  35. {
  36. z="0"+z;
  37. }
  38. y=x+z+".jpg";
  39. document.write('<td><a href="' + y + '" onclick="return pictureChange(this)"><img src="' + y + '" alt="" width="100" /><\/a><\/td>');
  40. if (z%5 == 0){
  41. document.write('<\/tr><tr>')
  42. }
  43. }
  44. document.write('<\/tr><\/table>');
  45. -->
  46. </script>
  47. </center>
  48. </body>
  49. </html>


en trouwens...
Citaat:
Oh en btw: letterlijk gezien is dat wat een hovercraft doet idd vliegen, maar als een object enkele centimeters boven de grond hangt dan noem ik dat geen vliegen.

Sinds wanneer hangt een hovercraft aan een touwtje of iets dergelijks?

Dat is ook niet hoe je het moet gebruiken.
xhtml code - Bekijk de code zonder highlighting - Klap code in
<div style="background: url(test.png) no-repeat; display: block; width: 200px; height: 200px;" /></div>

1.
<div style="background: url(test.png) no-repeat; display: block; width: 200px; height: 200px;" /></div>

heel leuk om zo een plaatje te laten zien, maar het is een background, hoe wil je dan dat op elk willekeurig scherm het plaatje op de goede plaats komt...  
Offline Koen - 06/09/2008 22:05
Avatar van Koen PHP expert
olminator schreef:
ik heb een oplossing voor je gevonden...
je moet de plaatjes image01, image02 enz. noemen, en in de map images stoppen. verder moet je bij de regel
[..code..]
het getal na 'z<=' aanpassen aan de hoeveelheid foto's die je hebt.
als je de foto's in een rijtje wilt, moet je het stukje
[..code..]
verwijderen.
hier komt hij dan:
[..code..]

en trouwens...
[..quote..]
heel leuk om zo een plaatje te laten zien, maar het is een background, hoe wil je dan dat op elk willekeurig scherm het plaatje op de goede plaats komt...  

En daarom haal je dit topic vanonder het stof vandaan?  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.24s