SharePoint Haber Uygulaması #4 – jQuery News Slider

Merhaba Arkadaşlar,
Bu yazımızda haber modülümüz de kullanmak üzere ansayfayamıza yerleştireceğimiz jQuery ile yapılmış bir Haber Slider’ı anlatacağım.

Bu işlem için ücretsiz bir plug-in olan Slider Pro’yu kullanacağım. Bu plug-in’e http://bqworks.com/slider-pro/ adresinden ulaşabilirsiniz. Ben kendi demom için http://bqworks.com/slider-pro/#example5 adresindeki örneği kullanacağım.

Bu Plug-in’i nasıl kullanacağız

1. https://github.com/bqworks/slider-pro/archive/master.zip adresinden ilk olarak plug-in imizi indirelim ve bir klasöre çıkartalım
2. Examples klasöründe yer alan example5.html dosyasını açalım ve slider’ın nasıl gözüktüğüne bakalım
3. Dosyanın kaynak kodlarını düzenleyebileceğimiz şekilde açalım
4. Dikkat edeceğimiz kod kısımları
   1. Referans olarak eklenen js ve css dosyaları
   2. Plug-in’in çağırıldığı ve ayarlarının belirtildiği kısım
   3. Slider’ı oluşturan html yapısı
5. Slider’ın görünümünde ufak değişiklikler yapalım
   1. sp-slides sınıflı div’in altında yer alan sp-slide isimli div içerisindeki sp-caption sınıflı div i silelim ve yerine aşağıda ekran görüntüsünde yer alan h3 ve p elementlerini ekleyelim
   2. Example5.html dosyasını refresh ettiğimizde farkı görebilirsiniz
6. Slider’ın yapısal kısmını aşağıdaki görseli inceleyerek daha iyi anlayabilirsiniz.
   • slider-pro sınıflı bir genel kapsayıcı
     • sp-slides sınıflı slide’ları barındıran kapsayıcı
       • sp-slide sınıflı her slide için yer alan div’ler
     • sp-thumbnails sınıflı thumbnail’leri barındıran kapsayıcı
       • sp-thumbnail sınıflı her slide’a ait thumbnailllerin yer aldığı divler
7. Slider’a hazırlık için gerekli dosyaları aşağıdaki görselleri takip ederek Site Assets kitaplığında daha önce açtığımız klasörlere taşıyalım
   1. slider-pro-master\dist\js kalsöründe yer alan jquery.sliderPro.min.js dosyasını Site Assets altındaki js klasörüne
   2. slider-pro-master\dist\css klasöründeki slider-pro.min.css dosyasını Site Assets altındaki css klasörüne
   3. slider-pro-master\dist\css\Images klasöründeki dosyaları ise Site Assets altındaki img klasörüne taşıyalım
8. Son olarak boş bir html dosyası oluşturup içerisine en son görselde yer alan içeriği ekleyip bu dosyayı da SPNews.html olarak kaydedip Site Assets altındaki html klasörüne taşıyalım.

Dosya yapımızı hazırlamış bulunuyoruz.
Bir sonraki makalemizde görüşmek üzere.

TOC

1. SharePoint Haber Uygulaması #1 – Giriş
2. SharePoint Haber Uygulaması #2 – Publishing Feature
3. SharePoint Haber Uygulaması #3 – Custom Master Pages
4. SharePoint Haber Uygulaması #4 – jQuery News Slider
5. SharePoint Haber Uygulaması #5 – Content Types
6. SharePoint Haber Uygulaması #6 – Page Layouts
7. SharePoint Haber Uygulaması #7 – Image Renditions
8. SharePoint Haber Uygulaması #8 – Rest Api ile Slider Hazırlama
9. SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama