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 


Membuat Slider Foto di Drupal 1

3. Pada jendela “Manage field” tambahkan field baru dengan nama missal 
   “MySlider” kemudian field tipenya adalah “image”. Klik Save 

Membuat Slider Foto di Drupal 2

4. Pada jendela “FIELD SETTINGS” klik Save Field 


Membuat Slider Foto di Drupal 3

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” 

Membuat Slider Foto di Drupal 4

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


Membuat Slider Foto di Drupal 5

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

Membuat Slider Foto di Drupal 6


8. Sekarang klik Struture > Views > Add new view 


Membuat Slider Foto di Drupal 7

9. Pada jendela berikunya masukan nama view pada “view name”. Hilangkan
    tanda centang pada “Create a Page”. Klik “Continue and Edit” 

Membuat Slider Foto di Drupal 8


Membuat Slider Foto di Drupal 9



10. Pada jendela berikutnya akan terlihat tampilan seperti ini.


Membuat Slider Foto di Drupal 10

 11. Pada bagian “Fields” > “Add” turunkan atau pilih “Rearrange” dan muncul
     tampilan berikut, Klik “Remove” 

Membuat Slider Foto di Drupal 11


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

Membuat Slider Foto di Drupal 12

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


Membuat Slider Foto di Drupal 13


14. Selanjutnya nanti akan tampil tampilan seperti berikut : 


Membuat Slider Foto di Drupal 14

15. Berikutnya pada bagian “FORMAT” jCarousel | Settings, klik Settings, 
     nanti akan muncul tampilan berikut, ini tampilan untuk mengatur scroll 
     gambar dan waktu scroll gambar. 

Membuat Slider Foto di Drupal 14
16. Untuk Warp Content pilih “Circular”. Klik Apply 

Membuat Slider Foto di Drupal 15

17. Proses selanjutnya adalah menampilkan slider content pada “BLOCK”
     tertentu yang kita inginkan. Perhatikan pada bagian “View: myslider” pilih 
     “None” menjadi “Featured”

Membuat Slider Foto di Drupal 16

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” 

Membuat Slider Foto di Drupal 16
 19. Bila berhasil maka nanti slidernya akan tampil seperti ini, slider ini 

Slider jCarousel berhasil dibuat


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…..

26 Responses to "Membuat Slider Foto di Drupal Menggunakan jCarousel dan Views"

  1. wah di drupal ya, mau dicoba gimana gak punya drupalnya, hehe
    makasih infonya kang...

    ReplyDelete
  2. lanjutkan Mas sambil belajar. saya belum pernah main di srupal.

    ReplyDelete
    Replies
    1. iyah kang ini juga Saya masih belajar... heheh

      Delete
    2. ah mang admin suka gituh deh, padahal mah urusan drupal mah mamang teh rajanya, sok lihat keluar rumah deh, nggak ada lagi yang pembahasannya drupal selalu, saya sampe penasaran dan lagi memulai untuk maen drupal.

      Delete
  3. Mas jaelany makin hari makin kreatif ya....Untuk Membuat Slider Foto di Drupal Menggunakan jCarousel dan Views saya like aja deh....karna ini sangat perlu di ketahui bagi masing masing blogger

    ReplyDelete
  4. foto slide itu yang berganti-ganti sendiri yah mas ..?
    kereeen. Saya simpan dulu tahapannya membuat slider foto ...
    Terimakasih mas saya jadi semangat belajar .. drupal.

    ReplyDelete
    Replies
    1. okelah mba,, semangat terus yah... XD

      Delete
  5. Wah Drupal ya...kalau tentang Drupal, saya nyimak aja mas...cz belum paham, tapi ini bagus siapa tau suatu hari nanti perlu kalau sudah punya drupal

    ReplyDelete
    Replies
    1. iyah mas sapa tahu nanti punya project bikin website pemerintaha pakai drupal,, kan bisa di praktikan hehe

      Delete
  6. saya manggut-manggut aja kang soalnya belum instal apk yang 5 itu :D
    lengkap juga penjelasannya, saya bookmark dulu yaa, mesti dicoba nih buat slider fto di drupal.

    ReplyDelete
    Replies
    1. okelah kang...pura - pura ngerti aja kang,, kasih komen seolah - olah artikel ini membantu heheh :D

      Delete
  7. ilmu tingkat tinggi inimah. tidak punya kompenennya saya

    ReplyDelete
    Replies
    1. Wah mang adulmah suka berlebihan,,, xexexe :D

      Delete
  8. hanya bisa membaca tanpa bisa menerapkan tips atau panduannya mas, setidaknya artikel ini bisa menambah pengetahuan saya tentang drupal

    ReplyDelete
    Replies
    1. Bener sekali mba,,, setidaknya artikel saya dibaca... xexexe :D

      Delete
  9. Waw boleh juga nih, lumayan buat nambah nambah pengetahuan saya yang menurut saya belum cukup luas.

    ReplyDelete
  10. sepertinya mesti kudu praktek nih mas, gak paham kalo gak praktek langsung,,

    ReplyDelete
    Replies
    1. Wah berarti harus sambil praktik dong...

      Delete
  11. izin amankan mas, butuh pengulangan yang mendalam ini :)

    ReplyDelete
  12. Klau ngomongi soal drupal ataupun drupil kayak nya pada nyerah semua......ha...ha....ha..

    ReplyDelete
  13. Izin baca - baca dulu Ma...
    Maklum saja, belum pernah nyobain "DRUPAL" ini...
    Salam,

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...