Text diatas gambar pada FlexSlider

FlexSlider merupakan salah satu modul image gallery yang sudah mengadopsi teknologi responsive design. Selain sebagai gallery, FlexSlider juga bisa sebagai Slide Show. Dari sisi tampilan, FlexSlider sebenarnya masih kalah sama Juicebox HTML5 Responsive Image Galleries. Namun jika dilihat dari banyaknya yang memakai FlexSlider (saat ini rekornya adalah 38.620 untuk FlexSlider dan 3.420 untuk Juicebox).

Untuk instalasinya cukup sederhana, tinggal baca petunjuknya saja sudah bisa diterapkan, tapi ukuranya cukup merepotkan, yakni mencapai 3,8MB (versi 7.x-2.0-alpha3), tapi nggak papalah, yang penting keren:-)

Hal pertama yang tidak ane sukai adalah judul gambar yang tidak "overlay", berdiri sendiri dan berada di bawah gambar sehingga terkesan tidak menyatu dan makan tempat.

Namun dengan sedikit coding, maka tulisan "Pintu Perlintasan Kereta Api" sudah bisa nempel di gambarnya:

.flexslider .slides li {
    position:relative;
}

.flex-caption {
    position:absolute;
    left:6px;
    right:-6px;
    bottom:12px;
    height:24px;
    background:rgba(0, 0, 0,0.6);
    z-index:1;padding:6px;
    color:rgb(255,255,255);
}

dan hasilnya adalah:

Add new comment

CAPTCHA
mari kita ingat kembali masa-masa di TK dulu...
Target Image
By submitting this form, you accept the Mollom privacy policy.