Jquery Resimleri Siyah Beyaz Yapma

Anasayfa

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

Jquery Resimleri Siyah Beyaz Yapma

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik