Ensimmäiset kuvat kestää normaalia aikaa ladata, joten jos Internet linja on hidasta, sinun (käyttäjä) voi huomata joitakin aikaviiveen ensimmäinen sarja kuvia saapuu. Tämän jälkeen huomaat enää viivästyksiä, koska kuten olet kiireinen katsot ensimmäiset ja laajentaa sen kuvaa, yksi kerrallaan, muut kaksi ovat ladata kuvan tunnisteet alareunassa sivun. On 15 kuvan tunnisteet on painiketta sivun. Kukin näistä tunnisteet on CSS näytön kiinteistö /arvo-pari, "display: none" Kuvien tulevat ja pysyvät sivun alareunassa.
Ne eivät ole näkyvissä ja ne eivät vie tilaa, koska "display: none" omaisuus /arvo-pareja. Aina kun jokainen tarvitaan, arvo sen lähdemäärite kopioidaan korvata arvon kuvan lähdemäärite että on jo näkyvissä. Joten, latausaika palvelimelta jätetään pois, ja käyttäjä huomaa nopeasti tuoda kaikki kuvat jälkeen ensimmäiset on arrived.Enlarging ImageAs sanoi edellä, jokaisen sarjan kuvia näyttää viisi kuvaa peräkkäin. Kun klikkaat jotain kuvista, näet sen suurennettuna sen yläpuolella.
Osana suunnittelun, kun ensimmäiset kuvat saapuu selaimen, näet ensimmäinen kuva (vasemmalla eniten rivi) suurennettu. Suurennettua kuvaa yksinkertaisesti on suuremmat mitat kuin kuvia rivillä (jotka eivät ole laajentuneen). Nämä suuremmat mitat ovat CSS. Kun klikkaat pieniä kuvaa, arvo (URL) lähdemäärite on suurempi kuva on korvattu pienemmän kuvan. Kun korvaava tapahtuu, näet kuvan napsautti laajentuneen (ylempänä). Mistään suurennettua kuvaa, sinulla on sama URL-osoite kuvan tag laajentuneen kuvan kuin kuva tag vastaavan pienen kuvan.
Se on lähdemäärite kuvan tunniste, joka määrittää, mitä kuva tag näyttöjä image.ResolutionThe suurennettua kuvaa, pikseleinä, ei saisi olla suurempi kuin mikä tahansa kuvia palvelimelle. Jos et kunnioita tätä sääntöä, siellä menetetään päätöslauselman yhden tai useamman laajentuneen image.Let meitä mennä toteuttamaan project.Implementing ProjectThe koodi on 3 osaa. Ensimmäi