Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Foto's openen, maar niet in een apart html

19 antwoorden
  • Ik ben bezig m'n vakantiefoto's in een website te gooien. Nu heb ik 4 pagina's met thumbnails gemaakt, klikken op thumbnail en je gaat de foto zien. Maar ik wil niet voor elke foto een nieuw html bestand maken. Dan krijg je een onoverzichtelijke zooitje. Ik had zoiets in de gedachten als dit: <a href="plaatje1 in een standaardpagina">thumbnail</a> Dus dat ik een pagina maak, waarin met een aanpassing van de link, een foto in zet. Dus een html pagina, maar waarin verschillende foto's in kunnen worden geopend. Iemand een idee?? of moet ik dan met php of javascript aan het klooien. Bij voorbaat dank
  • Je voorbeeld: <a href="plaatje.gif">plaatje</a> is prima. Ik zou er nog ff target="_blank" bij doen. Edit: ik lees ff wat beter. :D Is te doen met php, asp, cgi [perl] etc, maar ik ben zelf niet de beste progger op deze aardkloot. :)
  • [quote:8c1b06c225]Je voorbeeld: <a href="plaatje.gif">plaatje</a> is prima. Ik zou er nog ff target="_blank" bij doen. Edit: ik lees ff wat beter. Is te doen met php, asp, cgi [perl] etc, maar ik ben zelf niet de beste progger op deze aardkloot. [/quote:8c1b06c225] Je eerst zin is met frames. Aangezien men hier allemaal negatief over doet, heb ik besloten om niet met frames te werken. Is er toevallig geen javascriptje voor ofzo?
  • Wie heeft het hier over frames? Ikke iig niet.
  • Zijn ook programma's die e.e.a. heel voor je kunnen oplossen, wel iets anders als je vraag. O.a. Web Album Generator en IrfanView.
  • [quote:c06318f368="Johnny321"]Ik ben bezig m'n vakantiefoto's in een website te gooien. Nu heb ik 4 pagina's met thumbnails gemaakt, klikken op thumbnail en je gaat de foto zien. Maar ik wil niet voor elke foto een nieuw html bestand maken. [/quote:c06318f368] Ik doe het met javascript. zoals [url=http://www.wimb.net/index.php?s=home&page=5]hier[/url] De source ervan staat in de pagina. wimb
  • [quote:c0ab569051="WimB"]Ik doe het met javascript. zoals hier De source ervan staat in de pagina. wimb[/quote:c0ab569051]Bij jouw voorbeeld gaat het doormiddel van een foto openen in een nieuw venster. Ik wil graag dat een foto geopend wordt in een bestaand html bestand (zeg maar een sjabloon, waar ik eventueel tekst kan bijvoegen) Is zoiest mogelijk??
  • Natuurlijk is dat mogelijk (als ik je goed begrepen heb). Het is mogelijk om via de querystring waarden mee te geven aan je andere pagina. En deze zijn ook gewoon uit te lezen via javascript (uitgebreide voorbeelden hiervan moeten wel ergens te vinden zijn op dit forum of anders via google). Een simpel voorbeeldje om een foto mee te sturen is: <a href="foto.html?kiekje.jpg">foto</a> en dan in foto.html onderstaande js code om de naam van de foto tonen [code:1:72f634872a] <script type="text/javascript"> alert( window.location.search.substr(1) ); </script> [/code:1:72f634872a] En als je dit weet is het een kwestie van de waarde gebruiken in de html pagina. Bijvoorbeeld door met document.write() wat weg te schrijven, of de src van een bestaand image object te wijzigen, of een div te vullen met innerHTML, of via de DOM een nieuw <img> element toevoegen, of... enz. enz.
  • tager=openen in _blank-nieuw venster en verder zoek op arles creator! superporgramma zie http://tupac.community.nl/Pictures je kan ook aangeven of je wil target_blank of geowon normaal
  • target="_blank" is afgeraden en hoort niet meer gebruikt te worden. Mag nog wel onder een Transitional DTD (Document Type Definiton) (en waarschijnlijk ook onder een Frameset DTD in het base element). Anne
  • [quote:cee02c6cec="Anni"]Natuurlijk is dat mogelijk (als ik je goed begrepen heb). Het is mogelijk om via de querystring waarden mee te geven aan je andere pagina. En deze zijn ook gewoon uit te lezen via javascript (uitgebreide voorbeelden hiervan moeten wel ergens te vinden zijn op dit forum of anders via google). Een simpel voorbeeldje om een foto mee te sturen is: <a href="foto.html?kiekje.jpg">foto</a> en dan in foto.html onderstaande js code om de naam van de foto tonen [code:1:cee02c6cec] <script type="text/javascript"> alert( window.location.search.substr(1) ); </script> [/code:1:cee02c6cec] En als je dit weet is het een kwestie van de waarde gebruiken in de html pagina. Bijvoorbeeld door met document.write() wat weg te schrijven, of de src van een bestaand image object te wijzigen, of een div te vullen met innerHTML, of via de DOM een nieuw <img> element toevoegen, of... enz. enz.[/quote:cee02c6cec] Hey annie, bedankt, het begint wat beter te worden. 'k heb nu een sjabloon gemaakt, script erin gezet, maar nu krijg ik het bericht van 'kiekje.jpg'. Dat schijnt ook de bedoeling te zijn (tis niet voor nix alert(window....) Maar zou je ook kunnen zeggen hoe je er kunt voor zorgen dat je het betreffende plaatje ziet. Ik ben namelijk een absolute leek wat betreft js :oops: . CSS/HTML gaat nog wel, maar js. Ik hoop dat iemand dat wil doen.
  • Uit het hoofd:[code:1:7ce62f6833]function showImage(){ var img = document.createElement('img'); img.setAttribute('src',window.location.search.substr(1)); img.setAttribute('alt','Alt tekst'); document.getElementsByTagName('body')[0].appendChild('img'); } window.onload = function(){ showImage(); }[/code:1:7ce62f6833]Ik hoop dat het werkt :).
  • Jammergenoeg niet termin8ter, helaas. Ik krijg een foutmelding over de volgende regel: [code:1:677223bc6e] document.getElementsByTagName('body')[0].appendChild('img'); [/code:1:677223bc6e] Fout: Type komt niet overeen. In de thumbnailpagina staat deze verwijzing: [code:1:677223bc6e] <a href="Foto.html?1Johanbed.jpg"><img border="0" src="Foto4\klein_1Johanbed.jpg" width="97" height="150"></a>[/code:1:677223bc6e] In foto.html staat dit: [code:1:677223bc6e]<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nieuwe pagina 1</title> <script type="text/javascript"> function showImage() { var img = document.createElement('img'); img.setAttribute('src',window.location.search.substr(1)); img.setAttribute('alt','Alt tekst'); document.getElementsByTagName('body')[0].appendChild('img'); } window.onload = function() { showImage(); } </script> </head> <body bgcolor="#008000"> Hier komt de foto<br> </body> </html>[/code:1:677223bc6e] Wie weet de oplossing?? Moet er nog iets in de <body> gedeelte? een link naar het js??
  • Klein foutje van Anne in de showImage functie. Maar ja dat kan eens gebeuren als je iets uit de losse pols doet. [code:1:3bcbd2662a] function showImage() { var sImageSrc = window.location.search.substr(1); if (sImageSrc.length > 0) { var img = document.createElement('img'); img.setAttribute('src', sImageSrc); img.setAttribute('alt', 'Alt tekst'); document.getElementsByTagName('body')[0].appendChild(img); // onderstaande regel is optioneel om // een error op de image af te vangen // bijv. als deze niet gevonden kan worden // dan wordt de image error.gif getoond img.onerror = function() { this.setAttribute('src', 'error.gif'); } } } [/code:1:3bcbd2662a] Heb ook even de vrijheid genomen om iets van een [i:3bcbd2662a]"fout-afhandeling" [/i:3bcbd2662a]in te bouwen.
  • Hardstikke bedankt voor je verbetering, Annie, maar ik heb nu nog steeds geen foto. Foutmelding is wel verdwenen nu. Dit heb ik in de thumbnailspagina staan.[code:1:cf3a406cc6]<a href="Foto.html?1Johanbed.jpg"><img border="0" src="Foto4\klein_1Johanbed.jpg" width="97" height="150"></a>[/code:1:cf3a406cc6]en dit in foto.html:[code:1:cf3a406cc6]<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nieuwe pagina 1</title> <script type="text/javascript"> function showImage() { var sImageSrc = window.location.search.substr(1); if (sImageSrc.length > 0) { var img = document.createElement('img'); img.setAttribute('src', sImageSrc); img.setAttribute('alt', 'Alt tekst'); document.getElementsByTagName('body')[0].appendChild(img); // onderstaande regel is optioneel om // een error op de image af te vangen // bijv. als deze niet gevonden kan worden // dan wordt de image error.gif getoond img.onerror = function() { this.setAttribute('src', 'error.gif'); } } } </script> </head> <body bgcolor="#008000"> Hier komt de foto<br> </body> </html>[/code:1:cf3a406cc6] Wie weet nog een aanpassing aan het js waardoor ik wel een foto krijg??? Alle hulp is welkom! BTW. scipt wisselen tussen <head> en <body> gedeelte heeft geen nut.
  • Je moet natuurlijk wel mijn onload functie erbij houden he ;). Daarnaast is het het beste om scripts extern te zetten. Anne
  • Oja, :oops: , vergeten. Hij doet het nu (wist trouwens niet dat er zo'n verschil zat tussen hoofd/kleine letters. Had eerst ShowImage -> foutmelding. showImage -> Toen deed ie het. Nu nog een vraagje. De foto wordt nu tegen de linkerkant aangezet, naar mijn tekst: 'hier komt de foto'. Is het ook zo te regelen dat de foto in een tabel komt. Een verwijzing naar een script in een TD??
  • Ja, dat kan. Met onderstaande regel uit de code zeg je dat je de image wil toevoegen aan een ander element (in dit geval de body). En dat kan je dus wijzigen. [code:1:58edae659c]document.getElementsByTagName('body')[0].appendChild(img);[/code:1:58edae659c] Door een ander element te kiezen (bijv een div met een id) "hang" je de image daar onder. Daarvoor gebruik je dan wel de functie [i:58edae659c]getElementById()[/i:58edae659c] om een referentie naar dat object te krijgen. Uit de losse pols ;) [code:1:58edae659c]document.getElementById('plaatje').appendChild(img);[/code:1:58edae659c] En dan ergens in je html [code:1:58edae659c]<div id='plaatje'></div>[/code:1:58edae659c] Overigens lijkt het me verstandig dat je probeert wat te lezen/zoeken over het onderwerp javascript en DOM (document object model). Zonder deze kennis zal je niet veel verder komen als je eens wat specifieke zaken wil wijzigen of als iets niet direct lukt. Wij zullen er niet altijd zijn om al je vragen te beantwoorden.
  • Okay, alvast bedankt voor je hulp. Ik zal morgen ff proberen. Je hoort nog van mij. Over die JS/DOM. Ik 'verzamel' scripts van andere site's die ik in m'n eigen site toevoeg, zodat ik daar niet zoveel vragen over stel. Aangezien ik nog nooit zoiets gezien heb zoals m'n vraag, stel ik m'n vraag hier. Verder gebruik ik ook niet zoveel scripts. Ik vind het een beetje onhandig, en heb ook niet de aandacht voor zoiets. (programmeren op m'n TI83 gaat nog wel, maar JS is net iets moeilijker.) Ook wil ik m'n site zo degelijk mogelijk hebben, dus zonder toeters en bellen. Een beetje 'zakelijk'.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.