 |
| FancyBox |
FancyBox adalah sebuah tool atau alat untuk menampilkan gambar-gambar, isi html dan media lain dalam sebuah gaya yang menarik dengan sedikit cahaya di box web.
Ini dibangun menggunakan library jQuery. Tapi setiap library atau plugins tentunya ada kendala dalam penerapannya, contohnya saja popups konten web saat dizoom lebih dari 100% maka akan seperti ini:
Disable zoom on a div, but allow zoom on the page (an alternate div)
 |
Tampilan popups 110% (sebelum diperbaiki) |
Bagaimana supaya tampilan popups baik dizoom in atau pun zoom out masih rapi seperti ini?
 |
Tampilan popups 100% (setelah diperbaiki) |
Di bawah ini adalah solusi menggunakan javaScript.
document.getElementById("id_button_popups").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
Atau fitToView dan autoSize diset "true"
$('.pilih').on("click", function (e) {
$.fancybox.showLoading();
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href,
data: $(this).serializeArray(),
success: function (data) {
$.fancybox(data, {helpers: {overlay: {
fitToView: true,
minWidth: 600,
maxWidth: "80%",
minHeight: 600,
maxHeight: "80%",
autoSize: true,
openMethod: 'dropIn',
openSpeed: 250,
closeMethod: 'dropOut',
closeSpeed: 250,
nextMethod: 'slideIn',
nextSpeed: 250,
prevMethod: 'slideOut',
prevSpeed: 250,
closeClick: false
}
}
});
}
});
});
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon