Bu dersimizde jquery ile resimleri siyah beyaz yapan
black and white plugini işleyeceğiz.Plugini uyguladığımız alanlarda resimler otomatik siyah beyaz olur.Plugin ayarlarında hover ile normal hale döndürme seçeneği bulunuyor.Siyah beyaz yapmaişlemini css3 ilede yapabilirsiz.Şurada
http://ustaderslik.com/konu/CSS3_Resim_Biçimlendirme_(filter) anlatmıştım.Şimdi kodlara geçelim.
İndir : http://ustaderslik.com/dosya/siyah-beyaz.zip
İncele : http://ustaderslik.com/ornek/siyah-beyaz/
Öncelikle jquery ile plugini sayfaya dahil edelim.Örnekte 2 sinide bulabilirsiniz.Ardından bir div açıp içine resim ekleyin.
<div id="resim"> <img src="resim.jpg"/> </div>
Bu div olması şart değil ama inline eleman ise
display:block; ile block eleemnt etmemiz gerek.Ayrıca dive
position:relative; de vermemiz gerek.
<script type="text/javascript">
$(function(){
$('div#resim,div#resim2').BlackAndWhite({
hoverEffect : true,//hover efekti ile normal renge dönmesi için
intensity:1,//siyah beyaz oranı.1siyah 0.1 normal renk
speed: {
fadeIn:300, //Normal renge dönüş süresi 1000=1 saniye
fadeOut:1000 //Siyah beyaz oluş süresi
},onImageReady:function(img) {
//resim yüklendiğinde işlem yapmak için
}
});
})
</script>
Yukarıda parametreleri anlattım.İstediğiniz gibi düzenleyebilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.BlackAndWhite.min.js"></script>
<script type="text/javascript">
$(function(){
$('div#resim,div#resim2').BlackAndWhite({
hoverEffect : true,//hover efekti ile normal renge dönmesi için
intensity:1,//siyah beyaz oranı.1siyah 0.1 normal renk
speed: {
fadeIn:300, //Normal renge dönüş süresi 1000=1 saniye
fadeOut:1000 //Siyah beyaz oluş süresi
},onImageReady:function(img) {
//resim yüklendiğinde işlem yapmak için
}
});
})
</script>
<style type="text/css">
#resim{width:90%;height:400px;margin:auto;margin-bottom:10px;position:relative;}
#resim img{width:100%;height:400px;}
</style>
</head>
<body>
<div id="resim"> <img src="resim.jpg"/> </div>
<div id="resim"> <img src="resim.jpg"/> </div>
</body>
</html>
Görüntüsü :
UstaDerslik
