Implementasjonen av panoramabildene
kommentarer Onsdag 01. Oktober 2008, kl. 14:32:22
På etterspørsel beskriver jeg her kort hvordan jeg har implementert «panoramafunksjonen» på sidene mine. De epostene jeg har fått om saken tyder på at det er mange som tror det er vanskelig- eller krever tilleggsprogramvare, men det er ikke mye som kunne være lengre fra sannheten.
Min panoramakode
Det hele er relativt enkelt å få til. CSS fungerer etter hvert rimelig bra, og metoden jeg bruker baserer seg 100% på denne teknologien. På denne måten slipper man tillegg man ikke vet om den besøkende bruker.
Her er koden jeg har skrevet- og lagt til i stilarket mitt. Den er på hele ti linjer, men kan enkelt kortes ned eller endres etter som du garantert har andre ønsker til størrelser, farger og marger.
p.panorama {
margin: 1em auto;
padding: 0;
text-align: center;
overflow: auto;
width: 500px;
height: 320px;
background-color: #444;
border: 5px solid #444;
}
For å hindre at bildet i «panorama»- klassen skal få rammer og marginer har jeg også denne lille kodesnutten i stilarket mitt.
p.panorama img {
border: 0;
padding: 0;
margin: 0;
}
For å sette inn ett bilde i denne beholderen trenger du altså bare å legge til klassenavnet «panorama» til paragrafen. Omtrent som dette.
<p class="panorama"><img src="" ... /></p>
Eksempel og forklaring
For ytterligere eksempler på hvordan det pr. dato ser ut med denne koden; her er ett søk etter panorama på mine sider. Husk at du med fordel kan endre disse få linjene til å se bedre ut i forhold til dine egne sider.
Det eneste jeg må passe på når jeg skal bruke koden er at bildene jeg laster opp har en høyde på 300px. Dette må jeg passe på etter som koden tilsier at «panoramafunksjonen» skal være på 320px. De ekstra 20px i koden er gjort så man kan slippe den vertikale rullemenyen. I tillegg må jeg sørge for at bildet er bredere enn 500px, men det er vel hele poenget med denne koden.
Legg til en kommentar
Trackback URL: http://kyrrebaker.com/cgi-bin/tb.r8481930.cgi/458
Alle kommentarer og tilbaketråkk kan bli moderert før visning. Send derfor skjemaet kun en gang. Du kan bruke Textile når du skriver. Enkel HTML er også greit for formatering. Dersom du aldri ser posten din er det en grunn til dette, og poster du anonymt vil kommentaren uten unntak bli slettet.
Kommentarer
Onsdag 01. Oktober 2008, kl. 15:41:12
Jeg liker inplementasjonen din i alle fall. Mange steder må jeg ha flash eller java og det er fint å slippe unna. Og så der det fint ut på maskinen min.
Onsdag 01. Oktober 2008, kl. 15:41:59
Jeg synes dette er en glimrende måte å gjøre det på, og som du jo vet har jeg også tjuvlånt både idé og kode fra deg. :-)
Takk! :-)
Onsdag 01. Oktober 2008, kl. 16:36:00
Hrmf. Kjeltringer og banditter ;-)
Onsdag 01. Oktober 2008, kl. 23:24:03
Jeg er nysgjerrig på teksteffekten du har lagd i eksempelbildet ditt. Hvordan gjorde du det?