Membuat Slider Foto di Drupal Menggunakan jCarousel dan Views

Dengan menggunakan jCarousel kita bisa membuat slider foto bergerak secara otomatis sedangankan dengan views kita bisa menaruh silder foto tersebut di “block” atau bagian tertentu yang kita inginkan. Saya tidak bisa menjelaskan semuanya secara detail, karena disini yang paling penting adalah kita bisa membuat sebuah halaman foto dengan efek slider bergerak. Proses pembuatan slider ini sebenarnya hampir mirip seperti yang sudah sudah jelaskan pada artikel tentang Membuat Halaman Galeri di Drupal Menggunakan Gallery Formatter, hanya saja kita menambahkan modul “VIEWS” untuk mengatur peletakan slider pada halaman web drupal sesuai dengan yang kita inginkan

Untuk Membuat Slider Foto di Drupal Menggunakan jCarousel dan Views, Anda perlu menyiapkanmenginstal beberapa modul diantaranya

1. CTOOLS
2. VIEWS
3. jCAROUSEL
4. TOKEN
5. AUTOPATH

Saya tidak mengerti kelima hal diatas, karena Saya juga masih belajar dari orang lain jadi silahkan Anda cari sendiri tentang fungsi – fungsi dari kelima modul diatas. Bila semua modul diatas sudah diinstal maka Anda bisa mengikuti langkah – langkah berikut :

1. Buatlah sebuah content field baru dengan nama missal “Myslider”
2. Klik Structure > Menu > Add content. Klik Save and add fileds 

3. Pada jendela “Manage field” tambahkan field baru dengan nama missal 

   “MySlider” kemudian field tipenya adalah “image”. Klik Save 

4. Pada jendela “FIELD SETTINGS” klik Save Field 

5. Berikutnya pada jendela “EDIT” Anda bisa mengaktifkan “Enable Alt field”

   dan “Enable Title field” untuk “Myslider field settings” dan number valuesnya

   di set “1” saja. Klik “Save Settings” 

6. Pada jendela berikutnya Klik Content > Add content > MySlider 

7. Pada jendela berikutnya uploadkan sebuah gambar di “MySlider” missal

   dengan nama “gambar2”. Klik Save, ulangi langkah ini hingga gambar yang

   sudah di upload mencapai 10 gambar / sesuaikan dengan keinginan

8. Sekarang klik Struture > Views > Add new view 

9. Pada jendela berikunya masukan nama view pada “view name”. Hilangkan

    tanda centang pada “Create a Page”. Klik “Continue and Edit” 

10. Pada jendela berikutnya akan terlihat tampilan seperti ini.

 11. Pada bagian “Fields” > “Add” turunkan atau pilih “Rearrange” dan muncul

     tampilan berikut, Klik “Remove” 

12. Selanjutnya pada bagian Field tambahkan filed baru klik “Add” lalu pilih

     content “myslider” klik Apply 

13. Selanjutnya hilangkan tanda centang pada create a label. Klik Apply 

14. Selanjutnya nanti akan tampil tampilan seperti berikut : 

15. Berikutnya pada bagian “FORMAT” jCarousel | Settings, klik Settings, 

     nanti akan muncul tampilan berikut, ini tampilan untuk mengatur scroll 

     gambar dan waktu scroll gambar. 

16. Untuk Warp Content pilih “Circular”. Klik Apply 

17. Proses selanjutnya adalah menampilkan slider content pada “BLOCK”

     tertentu yang kita inginkan. Perhatikan pada bagian “View: myslider” pilih 

     “None” menjadi “Featured”

18. Anda juga bisa menentukan di bagian mana slider tersebut akan

     ditampilkan. Klik Configure, pada bagian “Pages” Anda bisa memasukan

     url tertentu missal content/nama halaman. Jadi disini memang harus buat

     halaman baru terlebih dahulu nanti Anda copykan urlnya, atau Anda

     mengaturnya untuk tampil di semua halaman dengan memilih “All Pages

     excpect those listed” 

 19. Bila berhasil maka nanti slidernya akan tampil seperti ini, slider ini 

Anda juga bisa menambahkan efek Lightbox2 pada saat gambar di klik, Anda tinggal mengatur pada bagian “Manage Display” dari content type yang Anda buat (MySlider) kemudian atur bagian link imagenya ke Lightbox2, Untuk lebih jelasnya Anda bisa membaca artikel tentang Menambah efek Lightbox2 Pada Module Gallery Formatter. 

Selamat Mencoba…..

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple