Matkatoimiston sivu
<![CDATA[
html_css_basics
|
├── demos
│ ├── ...
│ └── d18
│ ├── index.html
│ ├── style.css
│ ├── kreikka.html (muokattu index kopio)
│ ├── lightbox-plus-jquery.min.js
│ ├── lightbox.min.css
│ ├── images (lightbox)
│ | ├── close.png
│ | ├── loading.gif
│ | ├── next.png
│ | └── prev.png
│ └── img
│ ├── large
│ | └── 1920x1080 kuvia
│ ├── small
| | └── 400x255 kuvia
│ ├── kuu_matkat_logo.png
│ ├── pointer.svg
│ ├── sand.jpg
│ └── snow.jpg
│
|
]]>
Screenshots (index.html)
Screenshot (kreikka.html)
images
img
img/small
img/large
Galleriasivu (kreikka.html)
- Galleriasivulla on sama navigaatio kuin etusivulla
- mainin sisällä on div class="split" elementti, jonka tarkoitus on asemoida otsikko (h1) ”Kreikassa on lämmintä”
ja nappi (a class="buy_link") ”Varaa nyt” vastakkaisiin päätyihin flexillä
- split divin jälkeen voit lisätä kuvaustekstin div class="desc" jossa on p tagissa tekstiä esim.
Välimeren kestosuosikki lumoaa lomailijat safiirin sinisillä merinäkymillä ja historiallisilla kohteillaan.
Tule läkähtymään helteeseen ja saa auringonpistos minuuteissa!
- divin jälkeen on varsinainen lightboxia hyödyntävä galleria div id="images_gallery"
- sen sisällä on ryhmä elementtejä:
<![CDATA[<a href="img/large/greece.jpg" data-lightbox="set1" data-title="Greece">
<img src="img/small/greece_small.jpg" alt=""/>
</a>
]]>
- href linkki osoittaa isompaan kuvaan kansiossa img/large, jonka halutaan avautuvan lightboxiin
- data-lightbox määrittää mihin galleriaan/settiin valokuva kuuluu
aseta kaikille kuville data-lightbox="set1" jolloin kaikki kuuluvat samaan kokonaisuuteen
siten käyttäjä voi selata kaikki 4 kuvaa läpi avaamalla lightboxin kerrran
- data-title asettaa kuvatekstin joka näkyy kun kuva on avattu isompana
- img tagi toimiii esikatselukuvana (thumbnail), aseta siihen img/small kansiosta vastaava kuva
Lightbox
Lähde: lightbox2 by lokeshdhakar
Ennen body-tagin sulkeutumista:
<![CDATA[<script src="lightbox-plus-jquery.min.js"></script>
]]>
Lomake
- Toteuta matkanvarauslomake, jossa on kentät:
- meno ja paluupäiville
- matkalle lähtevien ihmisten ja lemmikkien määrät
- Käytä input type=”date” päivämäärien asettamiseen
- Seuraava skripti asettaa nykyisen päivän date-tyyppiselle syötekentälle, jos sillä on id ”startdate”
- Lisäksi se asettaa paluupäivän 21 päivän päähän, jos loppumispäivä-kentän id on ”enddate”
<![CDATA[<script>
const total_days = 21
const set_enddate = () => {
const startdate = new Date(document.getElementById('startdate').value)
document.getElementById('enddate').valueAsDate = new Date(startdate.setDate(startdate.getDate() + total_days));
}
set_enddate(total_days)
const startdate_elem = document.getElementById('startdate')
const enddate_elem = document.getElementById('enddate')
startdate_elem.addEventListener('change', set_enddate.bind(null, event, total_days));
const today = new Date();
startdate_elem.valueAsDate = today
</script>]]>
