foto klikken, grotere weergave in nieuw venster

Status
Niet open voor verdere reacties.
R

robertjan

Gebruiker
Lid geworden
27 apr 2001
Berichten
375
Hey allemaal,

Ik ben opzoek naar een, ik denk javascriptje. De bedoeling is dat er op een site wat kleine foto's komen te staan en door erop te klikken er een nieuw venster opent, zonder knoppen met een bepaalde afmeting met daarin dus de foto op een grotere weergave. Dit venster moet je dan kunnen sluiten door op de afbeelding te klikken.

Ik kon niks vinden wat dit deed, weet iemand een scriptje voor me?

Bedankt alvast
 
Lees even mee in dit topic.
Er wordt een voorbeeld gegeven naar deze site.
Op de pagina bron daarvan vind je vast wel de code die je nodig hebt.
Ik denk dat het precies is wat je zoekt.
 
Ehm, plaats je bericht eens in dit topic.
Ik haal hem bij die andere weer weg. Daar is ie offtopic.
Even kopieren / plakken.

Maar het concept is hetzelfde.
Alleen heb je wat aanpassingen in de code nodig, en de foto's anders opzetten.
 
Dit is wat ik nu heb, hiermee krijg ik de foto in een popup op de goede grootte.


<a href="/images/normal008.JPG" onclick="window.open('/images/normal008.

JPG','Showroom',
'width=816,height=616,scrollbars=yes,toolbar=no,location=no'); return false">
<img border="0" src="images/thumb008.JPG" alt="Klik op de foto om originele grootte te bekijken"></a>


Alleen, nu wil ik dus eigenlijk dat je wanneer je nu op de foto klikt in de popup, je het venster kan laten sluiten. Maar ik heb geen htm bestanden natuurlijk waar ik die code in kan zetten omdat het popups zijn die je met javascript tevoorschijn toverd. Dus, nu is de vraag..

hoe krijg ik dit:
<a href="javascript: window.close()">
in me popup venster
 
Ja, dat is een soortgelijk iets.

Maar, waar het mij nou om gaat is:
Ik heb dus een pagina met thumbnails, in dezelfde dir op de server heb ik de grotere versies van de images. Iemand klikt op de Thumbnail en een nieuw venster opent. Daarin staat enkel het plaatje en omdat de width en hight 16 pixels meer is heb je een wit randje eromheen.

Maar, nu wil ik dus dat je op de foto kan klikken, dus de foto van de popup en dat het venster dan sluit.

Alleen, het probleem is dus dat ik geen html files heb naar die popup toe zeg maar. Dus ik kan die onclickclose code nergens doen.

Dat is het probleem

Ik zie dat die keversite ook gewoon naar een JPG linkt, hoe kan het dan dat jij wel een achtergrond kleur kan kiezen etc..jij hebt toch ook niet allemaal htm files klaarstaan waar naar wordt doorverwezen
 
Laatst bewerkt:
Pak de bijlage uit, klik op open.htm, klik op de thumbnail en sta versteld. :)

Uit de code van open.htm en bloem.htm zal duidelijk zijn hoe dit alles werkt.

Nog een paar opmerkingen: je komt er inderdaad niet onderuit om een html-document voor elke foto te maken. Zonder zo'n document zou je de sluitcode nergens kwijt kunnen. En je zult dan ook altijd een witte rand rond de afbeelding krijgen.
Als je in die documenten de body-tag de attributen leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" geeft, krijgt de foto geen witte rand, zoals in het voorbeeld ook te zien is. Voorwaarde is dan wel dat je voor elke foto de precieze maten in pixels opgeeft, anders kan er rechts en onderaan nog een witte rand verschijnen. En scrollbars kun je maar beter helemaal weglaten, tenzij je echt geen andere keus hebt.
Let ook even op left en top in de code van open.html. Daarmee bepaal je de positie van de linkerbovenhoek van het venster vanaf resp. de linkerrand en de bovenrand van het scherm, gerekend in pixels.
Verder is het van belang dat er tussen de haakjes achter window.open GEEN spaties staan - niet achter de komma's en ook niet in de beschrijving van de afbeelding die geopend wordt (vandaar Afbeelding_bloem en niet Afbeelding bloem). Met spaties werkt de code niet.
En tot slot: gebruik geen ALT, maar TITLE om een tekst boven een plaatje te laten verschijnen. ALT wordt wel zichtbaar in IE, maar niet in Firefox en andere browsers. Wat je achter TITLE zet is in alle browsers te zien.

Guus.
 
Laatst bewerkt:
Het kan met html onthefly, zoals ook bij de site van peter.
Met een javascript schrijf je dan elke keer een nieuw venstertje.
Code: 
  <script language="JavaScript">
   <!-- PopUp venster | Egel 051018
    function show(photo,width,height,padding,color) {
     if (!padding) var padding = 0; padding = 2 * (padding + 2); // +2 => Fx!
     if (!color) var color = '#c0c0c0';
     var format = 'resizeable=no,width=' + (width + padding) + ',height=' + (height + padding);
     var title = photo.split('/'); title = title[title.length - 1]; title = title.split('.'); title = title[0];
     var console = open('','',format);
     function cw(text) { console.document.writeln(text);};
     console.document.open();
     cw('<html>');
     cw(' <head>');
     cw('  <title>' + title + '</title>');
     cw('  <style type="text/css">');
     cw('   body { margin: 0px; border: 0px; padding: 0px; background: ' + color + ';}');
     cw('   table { width: 100%; height:100%;');
     cw('  </style>');
     cw(' </head>');
     cw(' <body>');
     cw('  <table cellspacing="0" cellpadding="0"><tr><td align="center"><a href="javascript:window.close()"><img src="' + photo + '" border="0" title="Klik om dit venster te sluiten"></a></td></tr></table>');
     cw(' </body>');
     cw('</html>');
     console.document.close();
     return false;
     };
   // -->
  </script>


  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
Zie bijlage.


Vr.Gr. Egel.
Met dank aan Guus voor het bloemetje. :)
 

Bijlagen

Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan