1. Etusivu
  2. Sivuston liittäminen muihin palveluihin
  3. Kansion ja kuvaselaimen upotus sivulle (iframe)

Kansion ja kuvaselaimen upotus sivulle (iframe)

Voit upottaa kuvaselaimen toiselle web-sivulle, joka näyttää kuvia mistä tahansa julkisesta kansiosta. Käytössä on iframe-tekniikka, joten sivulle ei tarvitse asentaa mitään kirjastoja tms.

Upotus tapahtuu yksinkertaisesti lisäämällä seuraava html-koodinpätkä:

<iframe 
  src='https://demo.kuvat.fi/kuvat/Kuvakollaasi/embed' 
  width='100%' 
  height='746' 
  frameborder='0' 
  webkitallowfullscreen mozallowfullscreen allowfullscreen 
  scrolling='no'>
</iframe>

Korvaa linkissä kursivoitu osa omalla kansiopolullasi, jonka perässä on /embed

Voit määritellä elementin leveyden ja korkeuden haluamaksesi.

Lisää /embed -linkin perään ?thumbstrip=1, jos haluat että kuvan alareunassa näkyy thumbnail-kuvarivi.

Parametri bgcolor=2 muuttaa taustavärin valkoiseksi. Kuvatekstit saat näkyviin, kun laitat parametrilistaan captions=1.

Jos haluat, voit vaikuttaa taustaväriin myös tarkemmin. Lisäämällä parametrin &bg=%23aabbcc voit antaa värin heksamuodossa (#aabbcc). Get-parametreissa # -merkki (värikoodin alussa) täytyy kirjoittaa muotoon %23.

Jos kuvatekstit ovat käytössä, tulee valkoisen kuvatekstin taustalle tumma varjostus joka helpottaa luettavuutta. Halutessasi voit korvata varjostuksen myös kiinteällä taustavärillä ja tekstin värillä. Voit antaa värit joko heksamuodossa #ffffff tai rgb/rgba-muodossa. Esimerkisi läpinäkyvä punainen tausta valkoisella tekstillä: captiontext=%23ffffff&captionbg=%23ff0000. Get-parametreissa # -merkki (värikoodin alussa) täytyy kirjoittaa muotoon %23.

Linkki voisi olla esimerkiksi:

https://demo.kuvat.fi/kuvat/Perinteinen+kuvakansio/embed?thumbstrip=1&bgcolor=2&captions=1

Esimerkki upotettavasta selaimesta löytyy täältä.

thumbstrip0 / 1Thumbnail-pikkukuvien
näyttö kuvan alapuolella
bgcolor0 / 1 /2Taustavärin teema (0 harmaa,
1 musta, 2 vaaleanharmaa)
bg%23aabbccTaustavärin tarkempi määrittely heksamuodossa.
Korvaa #-merkki koodilla %23
captions0 / 1Kuvatekstin näyttö kuvan yhteydessä
captionbg%23aabbccKuvatekstin taustavärin valinta
heksamuodossa. Korvaa #-merkki
koodilla %23. Jos ei määritelty,
käytetään automaattista varjostusta
captiontext%23aabbccKuvatekstin värin valinta heksamuodossa.
Korvaa #-merkki koodilla %23.
Päivitetty 27.3.2020

Asiaan liittyvät ohjeet