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
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”
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
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
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
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
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,
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”
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
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…..
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…..
wah di drupal ya, mau dicoba gimana gak punya drupalnya, hehe
ReplyDeletemakasih infonya kang...
oh berarti harus coba dulu gan..
Deletelanjutkan Mas sambil belajar. saya belum pernah main di srupal.
ReplyDeleteiyah kang ini juga Saya masih belajar... heheh
Deleteah 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.
DeleteMas 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
ReplyDeletebetul sekali mas
Deleteokelah mang terima kasih likenya/... :D
Deletefoto slide itu yang berganti-ganti sendiri yah mas ..?
ReplyDeletekereeen. Saya simpan dulu tahapannya membuat slider foto ...
Terimakasih mas saya jadi semangat belajar .. drupal.
okelah mba,, semangat terus yah... XD
Delete