Panoramafotos presenteren II: draggable image
Als je foto's laat afdrukken bij een afdrukautomaat, ontwikkelcentrale of fotograaf kun je kiezen uit een aantal standaardformaten.
Zo zijn er bijvoorbeeld 10 x 15 cm (2:3; ouderwetse fotorolletjes) of 9 x 12 cm (3:4; digitale camera's).
Met sommige typen digitale camera's kun je ook panorama-foto's maken. Dan zijn foto's met extreme lengte-breedte verhoudingen,
bijvoorbeeld 9 cm hoog en 40 cm lang. Er bestaat ook software waarmee je een aantal overlappende gewone foto's aan elkaar
kunt 'plakken', met een panorama-foto als resultaat.
Hieronder zie je (sterk verkleinde) uitvoering van zo'n foto.
Het tonen van dergelijke foto's met HTML, CCS en JavaScript is eenvoudiger dan het lijkt, omdat het versleepbaar (draggable) maken van een foto met CSS kan worden ingesteld.
Op deze pagina wordt een methode gepresenteerd waarmee je panorama-foto's kunt laten zien op je website, waarbij gewerkt
wordt met een draggable element.
Dit is een vereenvoudigde versie van het panorama-album dat je vindt op mijn foto-website: www.webmasterij.nl/fotoalbum/. Klik door naar Album 3.
Het werken met een draggable element wordt uitgelegd in het item Figuur
in een Viewport (Draggable Content).
De code kun je downloaden voor toepassing op je eigen website.
Panorama-foto's zijn er in twee soorten: Foto's die een volledige cirkel beschrijven (360°-foto's) en foto's die alleen een heel breed (of hoog) formaat hebben. Deze pagina behandelt alleen de "breedbeeld"-foto's.
Als je op de knop Voorbeeld drukt verschijnt er een lijstje miniaturen. Als je op zo'n miniatuur klikt wordt de
foto in een venster van 700 bij 400 pixels getoond. Je kunt de foto in het venster verslepen met de muis.
N.B.: Het voorbeeld werkt niet met aanraakschermen. swipen kan dus niet. Zie ook het item
Programmeren voor aanraakschermen.
- Er worden twee items besproken:
- De opbouw van de code.
- Inbouwen in je eigen website
- De code bestaat uit vier HTML-bestanden, waarin zowel style-blokken als JavaScripts voorkomen. Behalve dat je de fotobestanden moet opgeven, moet je ook de opmaak van de pagina's aanpassen voor je eigen website.
- Het foto-album is opgebouwd als een 'zelfstandig' website-onderdeel. Het staat in Frames. Dit is nodig voor de
correcte werking.
Aanbevolen wordt om het album te openen in en nieuw venster (target="..." in de <a>-tag) of een popup, zoals op deze pagina.
Het openen van een pagina in een popup wordt beschreven in het item "Window openen/sluiten vanuit een ander window". - De bestanden zijn:
Naam Functie en aanpassingen p2_index.htm Top-level code, bevat de paginakop en het <iframe>.
Aanpassen: <title>, opmaak: figuur, kleuren, enz., inclusief de <body>-tag.p2_content.htm Inhoudsopgave van het album, toont de miniaturen. Verschijnt in het <iframe> in p2_index.htm.
Aanpassen: <title>, opmaak: style-block, kleuren, enz., inclusief de <body>-tag.
Hier staat ook de lijst met panorama-foto's en de opmaak van het <iframe> in p2_index.htm.
De betreffende parameters worden hier onder beschreven.p2_frame.htm Toont een panoramafoto. Vervangt p2_content.htm in het <iframe>.
Deze file bevat zelf ook een <iframe>, waarin de foto verschijnt.
Aanpassen: <title>, opmaak: style-block, kleuren, enz., inclusief de <body>-tag.p2_photo.htm Toont een panoramafoto in een <iframe> in p2_frame.htm.
Aanpassen: <title>, opmaak: style-block, kleuren, enz., inclusief de <body>-tag. - De vier .htm-bestanden moeten bij elkaar in de zelfde directory staan. De foto-bestanden kunnen desgewenst in een andere directory worden geplaatst, zie hieronder.
- Voor het instellen van het foto-album in p2_content.htm moet een aantal variabelen worden ingesteld, zie onderstaande
tabel.
Naam Betekenis MaxThumbnailX Maximale breedte van de miniaturen (pixels) in p2_content.htm.
Hier: 500.MaxThumbnailY Maximale hoogte van de miniaturen (pixels) in p2_content.htm.
Hier: 100.AlbumTitel Titel in p_content.htm.
Hier: "Voorbeeld Album Panoramafoto's".AlbumLokatie Verwijzing naar een directory in je website waar de foto-bestanden van het album staan. Als die bijvoorbeeld in een subdirectory 'aaaa' zet, onder de plaats waar de HTML-code van dit album staat, zet je hier neer: "aaa/".
Alle binnen een website geldige pathnamen zijn hier mogelijk.
In het voorbeeld dat je kunt downloaden is AlbumLokatie = "". De foto's staan dus in de zelfde directory als de HTML-code. Op deze website is echter: AlbumLokatie = "../images/". De foto's staan dus ergens anders.ThumbnailPrefix Karakterstring waarmee een thumbnail van een 'grote' foto wordt onderscheiden.
Hier: tn_. Voorbeeld: als de naam van de foto zzzz.jpg is, is de naam van de thumbnail gelijk aan tn_zzzz.jpg.PanoramaFoto Dit is de lijst met bestandsnamen van de foto's die in het album getoond worden. De afmetingen van elke foto moeten worden meegegeven. Dit zijn de parameters w en h, zoals hierbij is aangegeven. Hier is gebruikt:
PanoramaFoto[0] = 'pan_foto_a.jpg?w=4000&h=500';
PanoramaFoto[1] = 'pan_foto_b.jpg?w=2000&h=100';
Het aantal foto's in het album is onbeperkt. De nummering van PanoramaFoto mag geen gaten bevatten. - De thumbnails die in p2_content.htm worden getoond zijn verkleinde uitgaven van de panorama-foto's. Het wordt aanbevolen om ze niet groter te maken dan MaxThumbnailX en MaxThumbnailY. Dit moet je bij het voorbereiden van de publicatie regelen met je foto-software.
- De grootte van de viewport in de presentatie (700 x 400 pixels) is "hard" geprogrammeerd, en kan dus niet door
een eenvoudige instelling worden aangepast. Dit zul je zelf moeten regelen:
- Grootte van het <iframe> in p2_frame.htm
- Hoogte van ContainerBox in de CSS in p2_photo.htm
- Regel:
my_shift = 400 - my_heightin het JavaScript, p2_Photo.htm. Als je de hoogte van ContainerBox aanpast, moet je de waarde 400 ook aanpassen.
- Alle bij dit album horende foto-bestanden moeten bij elkaar worden gehouden in één directory.
Gebruik:
- De code kan onderdeel gemaakt worden van een website,
maar kan ook als zelfstandige (sub-)website functioneren.
Downloaden:
Druk op de knop:
File: voorb362.zip, 39 746 bytes.
