Galeri Foto HTML Sederhana dengan Kode Sumber

sukma
sukma
9 minute read

Hari ini kami memiliki tutorial yang mudah dipahami tentang membuat galeri foto HTML sederhana dengan kode sumber lengkap. Saya juga menyiapkan demo agar Anda bisa melihatnya.

Ini adalah galeri yang terorganisir dengan baik dengan contoh. Ini termasuk fitur hebat yang menggantikan foto utama galeri saat Anda mengklik thumbnail.

Kami tahu bahwa itu biasanya hanya mungkin dengan Javascript atau jQuery tetapi di sini kita akan melakukannya dengan CSS hanya tanpa menyentuh skrip apa pun.

Untuk membuat acara klik berfungsi, kami akan mengambil bantuan CSS3 :checked. Kami akan membuat serangkaian tombol radio yang secara default akan disembunyikan dan dikontrol melalui CSS.

Selanjutnya, saya akan membuat tata letak unik yang dimungkinkan dengan Kisi CSS. Galeri akan memiliki thumbnail di sisi kiri dan kanan penampung, tetapi gambar utama akan dipamerkan di tengah halaman.

Anda mungkin berpikir tentang bagaimana tampilannya di ponsel, bukan? Galeri foto HTML akan terlihat sangat keren di perangkat seluler dan perangkat yang lebih kecil dan tata letaknya akan memberi Anda pengalaman yang sama sekali berbeda.

Saya akan membantu "grid-template-columnsgrid-template-rows" yang mengubah tata letak sehingga gambar utama akan tetap berada di tengah tetapi gambar mini kedua sisi akan berada tepat di bawahnya.

Ini membuatnya tampak hebat dan menawarkan pengalaman pengguna yang luar biasa saat menonton di layar yang lebih kecil.

Saya yakin, Anda akan menikmati Galeri Gambar CSS Sederhana ini dan menyukai desain & kesederhanaan kodenya. Tanpa berbicara lebih jauh, Mari kita lanjutkan untuk melihat bagaimana kita dapat melakukan kode HTML & CSS.

Cara Membuat Kode Galeri Foto HTML Sederhana

Sekarang bagian terpenting dari tutorial ini dimulai. Pertama-tama kita akan melihat bagaimana kita dapat menangani fungsi klik dan untuk ini, saya akan menggunakan tombol radio.

Semua tombol radio ini akan disembunyikan melalui CSS dan akan ditangani :checked Elemen CSS3.

<input class="gallery__select" type="radio" name="gallery-select" id="0" checked="checked"/> <input class="gallery__select" type="radio" name="gallery-select" id="1"/> <input class="gallery__select" type="radio" name="gallery-select" id="2"/> <input class="gallery__select" type="radio" name="gallery-select" id="3"/> <input class="gallery__select" type="radio" name="gallery-select" id="4"/> <input class="gallery__select" type="radio" name="gallery-select" id="5"/> <input class="gallery__select" type="radio" name="gallery-select" id="6"/> <input class="gallery__select" type="radio" name="gallery-select" id="7"/> <input class="gallery__select" type="radio" name="gallery-select" id="8"/> <input class="gallery__select" type="radio" name="gallery-select" id="9"/> <input class="gallery__select" type="radio" name="gallery-select" id="10"/> <input class="gallery__select" type="radio" name="gallery-select" id="11"/> <input class="gallery__select" type="radio" name="gallery-select" id="12"/>

Sekarang kode galeri kami dimulai di sini. Kami memiliki utama div elemen dengan galeri kelas. Di dalam utama div, Saya memiliki tempat dua tambahan div nama kelas yang mana gallery__filler. Ini hanya digunakan untuk menambahkan spasi ekstra di atas thumbnail.

Hal terakhir kami akan menentukan gambar di dalam label. Setiap label mengontrol melalui tombol radio di atas sehingga kami akan tetap menggunakan nama kelas yang sama gallery__item untuk setiap label.

<div class="gallery">   <div class="gallery__filler"></div>   <div class="gallery__filler"></div>   <label class="gallery__item" for="0"> <img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=18" alt="Something random"/> </label>   <label class="gallery__item" for="1"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=3" alt="Something random"/></label>   <label class="gallery__item" for="2"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=4" alt="Something random"/></label>   <label class="gallery__item" for="3"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=20" alt="Something random"/></label>   <label class="gallery__item" for="4"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=9" alt="Something random"/></label>   <label class="gallery__item" for="5"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=16" alt="Something random"/></label>   <label class="gallery__item" for="6"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=15" alt="Something random"/></label>   <label class="gallery__item" for="7"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=9" alt="Something random"/></label>   <label class="gallery__item" for="8"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=25" alt="Something random"/></label>   <label class="gallery__item" for="9"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=12" alt="Something random"/></label>   <label class="gallery__item" for="10"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=11" alt="Something random"/></label>   <label class="gallery__item" for="11"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=12" alt="Something random"/></label>   <label class="gallery__item" for="12"><img src="https://source.unsplash.com/random/400x400?bear,cat&amp;v=23" alt="Something random"/></label> </div>

Terapkan Gaya CSS

Mari terapkan gaya di galeri agar berfungsi dengan CSS saja. Kami akan mulai dengan gaya dasar.

* {   box-sizing: border-box;   -webkit-animation: fadeIn 0.5s;           animation: fadeIn 0.5s; } body {   background: linear-gradient(65deg, #000, #000 20%, #639);   display: grid;   width: 100vw;   padding-top: 20px;   margin: 0; } img {   height: 100%;   width: 100%;   min-height: 50px;   -o-object-fit: cover;      object-fit: cover; } .gallery {   display: grid;   justify-content: center;   grid-gap: 20px;   grid-template-columns: repeat(2, 100px) minmax(200px, 800px) repeat(2, 100px);   grid-template-rows: repeat(5, 100px); } .gallery__item {   cursor: pointer;   border-radius: 5px;   grid-row: span 1;   grid-column: span 1;   transition: -webkit-transform 0.1s ease-in-out;   transition: transform 0.1s ease-in-out;   transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; } .gallery__item:hover {   -webkit-transform: scale(1.1) rotate(5deg);           transform: scale(1.1) rotate(5deg); } .gallery__select {   display: none; } .gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1):hover {   -webkit-transform: none;           transform: none; }

Terakhir, kami memiliki CSS untuk menangani setiap gambar menggunakan :checked. Selain itu, kueri media membantu kami membuatnya berfungsi pada area pandang yang lebih kecil.

@media (max-width: 768px) {   .gallery {     grid-gap: 10px;     grid-template-columns: repeat(auto-fit, 50px);     grid-template-rows: 300px repeat(auto-fit, 50px);   } } .gallery__filler {   grid-column: span 2; } @media (max-width: 768px) {   .gallery__filler {     display: none;   } } @media (min-width: 768px) {   body {     align-content: center;     padding: 20px;   } } @media (max-width: 768px) {   .gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12) {     grid-row: 1/-3;     grid-column: 1/-1;   } } .gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13) {   cursor: default;   display: grid;   align-items: center;   grid-row: 1/-1;   grid-column: 3; } .gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13):hover {   -webkit-transform: none;           transform: none; } @media (max-width: 768px) {   .gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13) {     grid-row: 1/-3;     grid-column: 1/-1;   } } @-webkit-keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   } } @keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   } }

Itu dia.