HTML, CSS ve JavaScript Kullanarak Basit Bir Resim Galerisi Nasıl Oluşturulur

HTML, CSS ve JavaScript kullanarak basit bir resim galerisi oluşturmak, web geliştirmenin temellerini öğrenmenin harika bir yoludur. Resim galerisinde, web sayfasındaki resmi büyütmek için küçük resimleri seçerek resimler arasında gezinebileceksiniz.

Galeriyi oluşturmak için web sayfası içeriğini eklemek için HTML'yi ve stili eklemek için CSS'yi kullanabilirsiniz. Kullanıcı küçük resimlerden herhangi birini tıkladığında galeriyi etkileşimli hale getirmek için JavaScript'i kullanabilirsiniz.

Resim Galerisi için Kullanıcı Arayüzü Nasıl Oluşturulur

HTML ve CSS kullanarak resim galerisi için kullanıcı arayüzünü ekleyin. Bu, web sayfasının ortasına seçilen küçük resme göre değişen büyük bir resim eklemeyi içerir. Tam örneği de görüntüleyebilirsiniz

1. "index.html" adlı yeni bir dosya oluşturun.
2. Bu dosyanın içine, temel HTML kod yapısını ekleyin:

   html>
   <htmldil="tr-US">
   <KAFA>
   <başlık>Resim Galerisibaşlık>
   KAFA>
   <vücut>
   <divsınıf="giriş">
   <h2>Resim Galerisih2>
   <P>Resmi görüntülemek için aşağıdan bir küçük resim seçinP>
   div>
   vücut>
   html>

3. "Görüntüler" adlı bir alt klasör oluşturun. Birkaç görüntü ile doldurun ve "image1.jpg" den "image10.jpg" olarak adlandırın.
4. HTML dosyanıza resim galerisi için bir div ekleyin:

   <divİD="Resim Galerisi">
   div>

5. Büyütülmüş seçili görüntüyü görüntülemek için resim galerisi div'inin içine bir resim etiketi ekleyin. Varsayılan olarak, "görüntüler" klasörü içindeki ilk görüntüyü görüntüleyin:

   <imgİD="Geçerli resim"kaynak="resimler/resim1.jpg"alternatif="Resim 1">

6. HTML dosyanızla aynı klasöre, aşağıdaki CSS ile "styles.css" adlı yeni bir dosya ekleyin. Eklemek için CSS'yi değiştirmekten çekinmeyin neumorfik tasarım bileşenleri veya kullanarak başka tasarım ince ayarları yapın bu CSS ipuçları ve püf noktaları.

7. .giriş { 
   Metin hizalama: merkez; 
   font ailesi: Arial;
   }
   h2 { 
   yazı Boyutu: 36piksel;
   }
   P { 
   yazı Boyutu: 14nokta;
   }
   #Resim Galerisi { 
   Genişlik: 600piksel; 
   marj: 0 Oto;
   }
   #Geçerli resim { 
   Genişlik: 100%;
   } 

8. HTML dosyanızın head etiketine CSS dosyanıza bir bağlantı ekleyin:

   <bağlantırel="stil sayfası"tip="metin/css"href="stil.css">

Galerideki Diğer Görsellerin Küçük Resimleri Nasıl Eklenir?

Şu anda resim galerisi yalnızca ilk resmi gösteriyor. Seçilen görüntünün altına bir küçük resim listesi ekleyin. Bu küçük resimler, "görüntüler" klasörü içindeki tüm görüntülerin önizlemesini görüntüler.

1. HTML dosyasındaki resim galerisi div'inin içine, diğer resimlerin küçük resimlerini görüntülemek için başka bir div ekleyin:

   <divİD="resim başparmak">div>

2. CSS dosyasının içinde, küçük resimler listesi için biraz stil ekleyin:

   #image-thumbs { 
   görüntülemek: esnek; 
   haklı içerik: merkez; 
   kenar boşluğu: 20piksel;
   }

3. HTML ve CSS dosyalarınızla aynı klasöre "script.js" adlı yeni bir dosya ekleyin.
4. HTML gövde etiketinin altına JavaScript dosyanıza bir bağlantı ekleyin:

   <vücut>
    Kodunuz burada 
   <senaryokaynak="script.js">senaryo>
   vücut>

5. JavaScript dosyasının içinde, küçük resimlerin listesini saklayacak olan div'in HTML öğesini alın:

   var görüntüThumbs = belge.getElementById("resim başparmak");

6. Galerideki 10 görüntünün her biri arasında dolaşmak için bir for-loop ekleyin:

   için (var ben = 1; ben <= 10; ben++) {
   }

7. Döngünün içinde, her görüntü için yeni bir img öğesi oluşturun:

   var başparmak = belge.createElement("resim");

8. "src" ve "alt" nitelikleri için değerler ekleyin. Bu durumda, "src" niteliği, "images" klasörü içindeki aynı dizinde bulunan görüntünün dosya yoludur:

   başparmak.src = "resimler/resim" + ben + ".jpg";
   başparmak.alt = "Resim" + ben;

9. CSS dosyanızın içine, görüntünün küçük resmine stil vermek için yeni bir sınıf ekleyin. Ayrıca küçük resimler için başka vurgulu veya geçişli CSS stilleri de ekleyebilirsiniz. web sitenizi duyarlı ve etkileşimli hale getirin.

   .baş parmak { 
   Genişlik: 80piksel; 
   yükseklik: 80piksel; 
   nesneye uygun: kapak; 
   sağ kenar boşluğu: 10piksel; 
   imleç: Işaretçi;
   }

10. JavaScript dosyasının içinde, yukarıdaki sınıfı yeni küçük resme ekleyin:

    thumb.classList.add("baş parmak");

11. Yeni küçük resmi, küçük resim listesini içeren HTML öğesine ekleyin:

    imageThumbs.appendChild (başparmak);

Kullanıcı Küçük Resmi Tıkladığında Görüntü Nasıl Değiştirilir?

Kullanıcı küçük resimlerden birine tıkladığında, sayfanın ortasındaki büyütülmüş resmi seçilen resimle değiştirin. Bu işlevi JavaScript dosyasının içine ekleyebilirsiniz.

1. JavaScript dosyasının en üstünde, seçili olan resmin HTML öğesini alın:

   var mevcutGörüntü = belge.getElementById("Geçerli resim");

2. for döngüsünün içinde, olay işleyicisi ekle kullanıcı sayfanın altındaki küçük resimlerden herhangi birini seçtiğinde tetiklenir:

   thumb.addEventListener(
   "tıklamak", işlev() {
    }
   );

3. Olay işleyicinin içinde, geçerli görüntünün "src" özniteliğini yeni seçilen görüntüyle değiştirin. "alt" özelliğini de güncelleyebilirsiniz:

   currentImage.src = Bu.src;
   currentImage.alt = Bu.alt;

4. Bir web tarayıcısında açmak için "index.html" dosyasına tıklayın.
5. Görüntüyü görüntülemek için küçük resimlerden birini seçin.

JavaScript Bilginizi Genişletmeye Devam Edin

Deneyiminiz ne olursa olsun, bilginizi genişletmek için projeler oluşturmaya devam etmek önemlidir. Satranç oyunu, hesap makinesi veya yapılacaklar listesi oluşturmak gibi diğer projeleri keşfetmeye devam edin.