Menyambung catatan membuat slideshow dalam node. Kali ini mempercantik tampilan dari slide tersebut. Dimana caption di tampilkan di bagian bawah gambar dengan latar transparan.
Buka view field_photo, pada bagian fields.
Content: Gambar kecil_300 image (ini menggunakan imagecache)
Content: Author Default = kasi ceklist pada Exclude from display
Node: Teaser = kasi ceklist pada Rewrite the output of this field dan isi kotak Text dengan
<div id="transparant"></div>
<div id="myauthor">
[field_author_value]
</div>
<div id="mycontent">
[teaser]
</div>
Update dan save view. Berikutnya edit file css yang dipakai oleh theme. tambahkan baris seperti dibawah.
untuk baris css yang pertama cari dulu dengan fasilitas firebug dari mozilla. posisi silahkan di atur berapa px sehingga bisa mencapai posisi yang di inginkan.
#views_slideshow_singleframe_teaser_section_field_photo-default{
position:relative;
}
#transparant{
position:absolute;
bottom:0px;
left:0px;
width:300px;
height:75px;
background-color:#000000;
filter:alpha(opacity-90);
opacity:0.9;
-moz-opacity:0.9;
}
#myauthor{
position:absolute;
top:150px;
right:10px;
color:#FFFFFF;
}
#mycontent{
position:absolute;
top:170px;
left:10px;
color:#FFFFFF;
}
Bagaimana jika aku ingin seperti ini, thumbnail ada di sebelah kanan gambar. Bagusnya sih ini buat tampilan frontpage.
Perbedaannya adalah, disini aku memakai Thumbnail hover yang sebelumnya Single frame (modul tersebut bawaan dari view slideshow, tinggal di aktifkan saja).
Catatan pentingnya:
Main frame fields = main image
Breakout fields = thumbnailnya, di sini aku pakai field yang menggunakan imagecache ukuran thumb.
Display breakout fields last = ceklist supaya thumbnailnya ada di bawah
untuk CSS nya aku ubah main image supaya float kiri, jadi thumbnailnya otomatis disebelah kanan
#views_slideshow_thumbnailhover_main_field_photo-page_1{
float:left;
}
Sumber: drupal.org