Jquery Resimleri Siyah Beyaz Yapma
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Resimleri Siyah Beyaz Yapma

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2342)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/1fd2fsd4f1d.png




uzman13
uzman13 3 Yıl Önce Cevaplandı
admin bu bilgilere nasıl ulaştın valla hayran kaldım



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol