Previous
Next

ColorBox kullananlar için jQuery çakışmasının çözümü

by Cem Kefeli 12. Ekim 2009 04:45

JQuery LogojQuery, dinamik içerik sunan birçok JavaScript uygulaması tarafından kullanılıyor. Fakat kullanıldığı platformlardaki diğer java script'ler ile de bazı çakışmaları oluyor ve problem yaşatıyor. Bunlardan birisi de BlogEngine.NET platformunda kullanılan ve blog.js içerisinde yer alan bazı script kodlarının blogunuzda ColorBox kullanmayı istediğinizde çakışması sonucu ortaya çıkıyor. ColorBox'ın kullandığı değişken isimleri ile BlogEngine'in kullandığı değişkenler çakışıyor ve ColorBox çalışamaz hale geliyor. Çakışmaları önlemek için aşağıdaki kod bloğunu script çağırma bölümünden hemen sonra eklemelisiniz. Eklemeniz gereken kısmı yeşil renge boyadım.

<head>
	.
	.
	<!-- ColorBox code starts -->
	<link type="text/css" media="screen" rel="stylesheet" href="/ColorBox/Skin1/colorbox.css" />  
	<script type="text/javascript" src="/ColorBox/jquery.min.js"></script>
	<script type="text/javascript" src="/ColorBox/jquery.colorbox.js"></script> 
	<script type="text/javascript">
	$j = jQuery.noConflict();
	</script> 
	<script type="text/javascript">
		$(document).ready(function(){
			//Examples of how to assign the ColorBox event to elements
			$("a[rel='example1']").colorbox();
			$("a[rel='example2']").colorbox({transition:"fade"});
			$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
			$("a[rel='example4']").colorbox({slideshow:true});
			$(".single").colorbox({}, function(){
				alert('Howdy, this is an example callback.');
			});
			$(".colorbox").colorbox();
			$(".youtube").colorbox({iframe:true, width:650, height:550});
			$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
			$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

			//Example of preserving a JavaScript event for inline calls.
			$("#click").click(function(){ 
				$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).
text("Open this window again and this message will still be here.");
				return false;
			});
		});
	</script> 
	<!-- ColorBox code ends --> 
	.
	.
</head>	

Bu değişikliklerin ardından artık jQuery'nin kullandığı '$' değişkenini yeniden tanımladık ve '$j' haline getirdik. Böylece BlogEngine'in kullandığı değişken ile karışmayacak yeni bir değişkenimiz oldu. Fakat init scriptinde yazan değişkenleri de '$j' olarak değiştirmemiz gerekiyor. Yani yukarıdaki scriptteki 12, 14, 15, 16, 17, 18, 21, 22, 23, 24, 27 ve 28 nolu satırlardaki '$' değişkenini '$j' ile değiştirmeliyiz. Init scriptinin değiştirilmiş halini ilgili satırları yeşile boyayarak aşağıda veriyorum.

<script type="text/javascript">
	$j(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$j("a[rel='example1']").colorbox();
		$j("a[rel='example2']").colorbox({transition:"fade"});
		$j("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
		$j("a[rel='example4']").colorbox({slideshow:true});
		$j(".single").colorbox({}, function(){
			alert('Howdy, this is an example callback.');
		});
		$j(".colorbox").colorbox();
		$j(".youtube").colorbox({iframe:true, width:650, height:550});
		$j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
		$j(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

		//Example of preserving a JavaScript event for inline calls.
		$j("#click").click(function(){ 
			$j('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"})
.text("Open this window again and this message will still be here.");
			return false;
		});
	});
</script> 	

Yorumlar (2) -

Sinan Duman
Sinan Duman Turkey
15.12.2012 04:19:30 #

Selamlar , teşekkür ederim. Çok basit bir olay olmasına rağmen türkçe kaynak bulamamıştım. Sayende hallettim , teşekkür etmen istedim .: )

Yanıtla

admin
admin Turkey
15.12.2012 14:58:55 #

Faydalı olmasına sevindim.

Cem

Yanıtla

Yorum ekle

biuquote
  • Yorum
  • Canlı önizleme
Loading

Hakkımda...

Cem KEFELİ

Electronics and
Telecommunication Eng.
devamı...


Son yapılan yorumlar...

Comment RSS

Yasal bir uyarı...

Disclaimer"Bu web sitesinde görmüş olduğunuz bilgilerin, dokümanların ve diğer materyallerin kullanılmasından doğabilecek hiç bir sorumluluktan site sahibi sorumlu tutulamaz. Web sitesi içerisinde yer alan yazılar, yorumlar, resimler ve diğer tüm içerikler yalnızca sahibinin görüşünü yansıtmakta olup içeriğin sahibi kişilerin çalıştığı kurumları bağlayıcı hiç bir nitelik taşımamaktadır. Yapılan tüm alıntılar mutlaka kaynak gösterilerek verilmeye çalışılmaktadır. Web sitesi içerisinde bulunan ilgili materyaller, ilgili yasal kurumlar tarafından uygun görülmemesi durumda kaldırılacaktır."
General