jQuery, 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>
RSS
