• Değerli kullanıcılarımız, eğer forumda açılmasını istediğiniz kategoriler varsa lütfen Görüş ve Önerileriniz kısmına bunu konu açarak belirtin.

JQuery Slider & Galeri Hazırlama - JQuery Dersleri

EmirhanBvk

Hile Bizim İşimiz :)
ONAYLI UYE
STANDART UYE
Katılım
15 Ara 2019
Mesajlar
11
Beğeniler
1
Puanları
3
Slider Örneğine Ait Açıklamalar
Html Bölümü

Slider sayfa içerisinde pozisyon olarak hangi konumda gözükmesini istiyorsanız, sayfanın o konumuna aşağıda bulunan html kodlarını eklemeniz gerekir.

Kullanmak istediğiniz bütün fotoğrafları, aralarında boşluk olmaması şartı ile yerleştirin. CSS ile başlangıç aşamasında yalnız 1 fotoğrafın gözükmesi gerektiğini ve diğerlerinin ise gizlenmesi gerektiğini sağlamış olacağız.

Tetikleyici olarak kullanılmakta olan button.png fotoğrafını da farklı bir div etiketi içerisinde yer alacak şekilde yan yana 10 defa yerleştirmeniz gerekiyor. Fakat her biri için farklı bir id vermeniz gerekiyor, çünkü JQuery bölümü dahilinde hangi kısma tıklanmaktaysa bu tıklanma reaksiyonuna göre tepki gösterece ve işlem sağlayacaktır.
Kod:
<div id="slideShow">
<img src="sliderImages/ustfoto01.jpg"  id="foto1"  />
<img src="sliderImages/ustfoto02.jpg"  id="foto2"  />
<img src="sliderImages/ustfoto03.jpg"  id="foto3"  />
<img src="sliderImages/ustfoto04.jpg"  id="foto4" />
<img src="sliderImages/ustfoto05.jpg"  id="foto5" />
<img src="sliderImages/ustfoto06.jpg"  id="foto6" />
<img src="sliderImages/ustfoto07.jpg"  id="foto7" />
<img src="sliderImages/ustfoto08.jpg"  id="foto8" />
<img src="sliderImages/ustfoto09.jpg"  id="foto9" />
<img src="sliderImages/ustfoto10.jpg"  id="foto10" />

<div id="butonlar">
<img src="sliderImages/button.png" id="button1" />
<img src="sliderImages/button.png" id="button2" />
<img src="sliderImages/button.png" id="button3" />
<img src="sliderImages/button.png" id="button4" />
<img src="sliderImages/button.png" id="button5" />
<img src="sliderImages/button.png" id="button6" />
<img src="sliderImages/button.png" id="button7" />
<img src="sliderImages/button.png" id="button8" />
<img src="sliderImages/button.png" id="button9" />
<img src="sliderImages/button.png" id="button10" />
</div>
</div>
Css Bölümü:

Aşağıda belirtmiş olduğum alan dahilinde CSS kodlarını kendi isteğinize göre düzenleyerek kullanabiliriz. Önem arz eden kısımlar kodların yan tarafında açıklanmıştır.
Kod:
<style type="text/css">

#slideShow{ // bu slider'a ait olan temel katmanımız
width:750px; // genişliği ve yüksekliği fotoğraflara göre ayarlıyoruz.
height:350px;
margin:0px;
padding:0px;}

#foto10,#foto9, #foto8, #foto7, #foto6, #foto5, #foto4, #foto3, #foto2
{display:none;} // ilk anda görünecek olan resim haricindeki tüm resimleri gizliyoruz.

#butonlar{ // tıklanacak olan resimleri koyduğumuz div
position:relative;
bottom:60px;
width:458px;
margin:0px auto;
}
#slideShow img{
cursor:pointer;
margin:0px;}

</style>
JQuery Bölümü:

Html bölümünde gösterilmesi gereken bütün fotoğraflar için birer buton yerleştirdik ve bu butonlara ayrı id'ler yazdık.

Şimdi ise bütün butonlar için aşağıda vermiş olduğum örnekteki gibi bir özellik eklemeliyiz. Aşağıda yer alan button1 için çalışması gereken özelliği görebilir ve diğer butonlar için çoğaltma işlemini kendiniz gerçekleştirebilirsiniz. Ayriyeten örnek dosyalarını download işlemi gerçekleştirirseniz bütün kodları görebilirsiniz.

ALIINTIDIR...
 

Şu an konuyu görüntüleyenler (Üye: 0, Misafir: 1)

Üst