Using both jQuery and Prototype (javascript)

วันนี้เอาโค้ด enlarge image แบบที่ blur ข้างหลัง (lightbox?) มาจากเพื่อน ซึ่งมันเขียนโดยใช้ jquery มา

ทีนี้เนื่องจากทั้ง jquery และ prototype ใช้ namespace “$” ในการเข้าถึง element ต่างๆในหน้าเหมือนกัน

พอเอาโค้ดจากเพื่อนมารวมกับโค้ดที่ทำไว้แล้ว (ซึ่งใช้ prototype) ก็เลยใช้งานไม่ได้ – –

สำหรับวิธีแก้ก็ไม่ยาก
แค่เพิ่ม บรรทัด jQuery.noConfilct(); เข้าไป
แล้วเวลาต้องการใช้ jQuery ก็ให้ใช้คำว่า ‘jQuery’ แทนเครื่องหมาย $
ส่วนเครื่องหมาย $ ก็ให้ prototype ใช้ตามเดิม

ตัวอย่าง

โค้ดจากเพื่อน
<script type="text/javascript" src="jquery.js" language="javascript"> </script>
<script type="text/javascript" language="javascript">
function getH(v,w){
var x = $(v).children().width();
var y = $(v).children().height();
return w*y/x;
}
$(document).ready(function(){

var $enlargedCover = $('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');
var $backCover = $('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = $('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = $('.thumb');
$covers.click(function(event){
var h = getH(this,800);
$enlargedCover.attr('src', $(this).attr('href'))
.css({
'left' : ($('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

});
</script>

เมื่อแปลงแล้วจะได้แบบนี้

<script type="text/javascript">
jQuery.noConflict();

function getH(v,w){
var x = jQuery(v).children().width();
var y = jQuery(v).children().height();

return w*y/x;
}

jQuery(document).ready(function(){
var $enlargedCover = jQuery('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');

var $backCover = jQuery('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = jQuery('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = jQuery('.thumb');
$covers.click(function(event){
var h = getH(this,800);

$enlargedCover.attr('src', jQuery(this).attr('href'))
.css({
'left' : (jQuery('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});

$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

 

});

 

 

 

 

 

 

(ยังต้องแก้เรื่องสเกลกับตำแหน่งอีกสินะ = =)

Advertisements

2 thoughts on “Using both jQuery and Prototype (javascript)

  1. Pingback: Utilizzare jQuery e Prototype insieme | sastgroup.com

  2. Pingback: Utilizzare jquery e prototype insieme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s