jQuery + GreaseMonkey #2 TSB Fixed

[ball6847]

Bitthailand Preview Image By P' Tee++;
http://www.thaiseoboard.com/index.php/topic,40078.msg527857.html#msg527857

ThaiSEOBoard Avartar and Linkpr Fixed By Ball6847
http://www.thaiseoboard.com/index.php/topic,40078.msg552033.html#msg552033


// =======================================

เวลาก็ไม่ค่อยจะมีเท่าไหร่ แต่ก็หาเรื่องอู้งานศึกษาอะไรเพิ่มเติม
ล่าสุดหัด jQuery มาได้ประมาณ 5 วัน

คิดไปคิดมา เอ...อยากจะฝึกเขียน jQuery แต่ไม่รู้จะเอาไปใช้กับกรณีไหนดี ก็เลยเกิด idea นำเอา jQuery เข้ามาใช้ผสมเข้ากับ GreaseMonkey แล้วหาไรที่มันน่าจะเป็นประโยชน์ทดลองง่ายๆดูสักโปรแกรม

ชั่วแว๊บบนึงกำลังคิดไป+หาโหลดบิตที่สยามบิตไปพลาง ไอเดียนึงเลยผุดขึ้นมาในสมอง "ถ้ารูปภาพมันโชว์หน้าเลือกไฟล์เลยก็ดีดิเนี่ย" ขี้เกียจเปิดดูบ่อยๆ

เลยเอาอันนี้ซะเลย

เริ่มวางแผนเอางัยดีหว่า (ใครเชี่ยวๆ jQuery ขอคำชี้แนะด้วย)
- คิดวิธีใช้ selector เหมาะๆ ก็ view source ดู เลยเอาเป็น attribute selector แระกันเพราะรูปมันจะมี alt="รูปภาพ" อยู่
- ที่อยู่ของรูปจะอยู่ที่ href ของลิ้งค์ซึ่งเป็น parent ของ img อีกที เลยเลื่อน node มาเป็น parent เพื่อจะเอาที่อยู่ของภาพ
- ได้รูปภาพแระ จับยัดรูปภาพต่อจากลิ้งค์เลย แต่แอบไว้ก่อน รอให้รุปภาพโหลดเส้ดก่อน เอิ้กๆ
- เมื่อรูปภาพพร้อมก็จัดแจง คำนวน scale รูปแล้ว resize ซะใหม่
- ครอบรูปภาพด้วย <p> ให้มันอยู่ให้ถูกที่ถูกทางสักนิด
- เมื่อเส็ดหมดก็แสดงรูปภาพขึ้นมาได้
ปัญหาที่เกิด
- รูปภาพเอามาแสดงได้แค่รูปที่เป็นลิ้งค์ตรง แต่หลายที่ต้องเข้าไปดูที่เว็บทำให้รูปเจ้ง เหอๆ เลยต้องจัดการกับรูปที่เจ้งสักนิด รูปไหนเจ้ง remove ออกไปให้หมด

โค้ด เลือก ขยาย


// ==UserScript==
// @name           Siambit Torrent Images
// @namespace      ball6847
// @include        http://sb.in.th/*
// ==/UserScript==

var width = 250;
var height = 250;
var wait4dom = false;

function SB_preview_images() {
$('img[@title="รูปภาพ"]').parent().each(function(key , link) {
$(link).after('<img src="'+ $(link).attr('href') +'" style="display:none;border:none;">');
$(link).next().load(function() {
var dim = scaleImg($(this).width() , $(this).height());
$(this).width(dim.width);
$(this).height(dim.height);
$(this).wrap('<p></p>');
$(this).css('display' , 'block');
});
$(link).next().error(function() {$(this).remove()});
});
}

function scaleImg(w , h) {
var scale = (w > h) ? (width / w) : (height / h) ;
var dim = {width: Math.round(w * scale) ,height: Math.round(h * scale) }
return dim;
}


if(wait4dom) $(document).ready(function() {SB_preview_images()});
else SB_preview_images();


ใครกำลังหัด jQuery ลองไล่อ่านโค้ดดูเอานะคับ แหะๆ มั่วๆเอาเหมือนกัน





จิงๆแล้วมันก็ไม่ได้วิเศษวิโสอะไรมากมาย แต่มันก็น่าจะต่อยอดไปได้ไกลนะผมว่า โดยเฉพาะ jQuery ไม่นึกเลยว่ามันจะเทพขนาดนี้

อีกข้อได้เปรียบของ greasemonkey  คือ greasemonkey มีฟังก์ชั่นสามารถใช้งาน xmlhttpRequest จากเว็บไหนก็ได้ ไม่จำกัดว่าต้องอยู่เฉพาะในโดเมนใดโดเมนหนึ่ง

ปล. ใครจะเล่นบ้าง อย่าลืมลง jQuery ลงไปใน Greasemonkey ก่อนเด้อ (อย่าลืมตั้งให้เป็นลำดับแรกด้วยล่ะ)

[digitalex]

ผมเคยลองเล่นอยู่นิดหน่อยครับ ยืนยันความเทพอีกเสียง

[DJJome]

code less, do more.

[awat]

อะนะ ผมก็เคยลองเขียนอยู่พักหนึ่ง ใช้งานง่ายดีครับ ไม่ต้องยุ่งยากกับ การเขียน js ทั้งดุ้ง

[BosnoS]

สู้ๆ คุณบอล Seeeeeeeeeeeeeed

[Tee++;]

อ๊ะโห Idea เก๋เลย เล่นบ้างดีกว่า อิอิ ขอบคุณนะครับ ที่มา Share

---------------------------------
หนุกดี เลยไปขอลองมาบ้างอิอิ อันนี้เป็นแบบคลิกที่ภาพ or hotlink แล้วมันจะไปดึงมาลอยอยู่กลางจอ

โค้ด เลือก ขยาย

// ==UserScript==
// @name           Bitthailand
// @namespace      http://jquerytips.com/greasemonkey
// @description    Image Show Up
// @include        http://www.bitthailand.com/browse.php*
// ==/UserScript==


function getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}


var pageSize = getPageSize();
var el = $('<div>');

$(el).css({
width: '580px',
height: '500px',
backgroundColor: '#000000',
display: 'none',
position: 'absolute',
left: ((pageSize[0] / 2) - 290 * 1) + 'px'
});

$(el).attr('id', 'temp');

$('body').append(el);

$('img[@alt="Picture"]').click(function() {

t = (window.pageYOffset + 20*1) + 'px';
href = $(this).parent().attr('href');
ifr = '<iframe src="' + href + '" width="100%" height="100%"></iframe>';
$('#temp').css('top', t).html(ifr).show();
return false;

});

$('body').click(function() {
$('img[@alt="Picture"]').unbind('click');
$('#temp').fadeOut();
});



ปล.เขียน Support Greasemonkey ที่ include jQuery เท่านั้นนะ

[ball6847]

TSB Fixed

- avatar ของคนที่มีขนาดกว้างเกินแล้วขึ้น scrollbar สคิรปท์นี้ช่วยให้ปรับขนาดลงมาให้พอดีกับพื้นที่
- linkpr ไม่ต้องเข้า 2 ต่อ สคิรปท์นี้ช่วยเปลี่ยนให้ linkpr กลายเป็น directlink คลิ้กไปปลายทางได้ทันที

ตัวอย่าง

avatar





linkpr






code

โค้ด เลือก ขยาย


// ==UserScript==
// @name           ThaiSEOBoard FIX
// @namespace      ball6847
// @include        http://www.thaiseoboard.com/*
// ==/UserScript==


// Fix avatar Size
$('.avatar').each(function(k,v){
w = $(this).width();
h = $(this).height();
mw = $(this).parent().width();
if(w > mw) {
diff = w - mw;
h = h - diff;
$(this).width(mw).height(h);
}
});

// Fix linkpr
$('a[@href^="http://www.thaiseoboard.com/go/?"]').each(function(i,a) {
$(a).attr('href' , 'http://' + $(a).attr('href').replace(/http:\/\/www\.thaiseoboard\.com\/go\/\?(http:\/\/)?/, ''));
});



เล็กๆน้อยๆ แต่ก็ดีกว่าเดิมหล่ะนะ แหะๆ ถือว่าเป็นการแก้ปัญหาที่ตัวเองคับ 

ขอบคุณครับ

ปล. จริงๆ ผมจะทำแก้ปัญหา quick reply และก็ quote ที่เป็นมีปัญหาอยู่ด้วย แต่ยุ่งยากไปหน่อย
รอท่าน admin แก้ดีก่า เด๋สคนใช้ IE จะเซ็งเป็ด

[Tee++;]

หนุกดีๆ เจ๋งๆ เอาอีกเยอะๆ นะ ^^

[tosakp]

หนุกครับ เล่นด้วย ชอบตัด linkpr ออกอ่ะ

[chanun]

อ๊ะโห Idea เก๋เลย เล่นบ้างดีกว่า อิอิ ขอบคุณนะครับ ที่มา Share

---------------------------------
หนุกดี เลยไปขอลองมาบ้างอิอิ อันนี้เป็นแบบคลิกที่ภาพ or hotlink แล้วมันจะไปดึงมาลอยอยู่กลางจอ

โค้ด เลือก ขยาย

// ==UserScript==
// @name           Bitthailand
// @namespace      http://jquerytips.com/greasemonkey
// @description    Image Show Up
// @include        http://www.bitthailand.com/browse.php*
// ==/UserScript==


function getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}


var pageSize = getPageSize();
var el = $('<div>');

$(el).css({
width: '580px',
height: '500px',
backgroundColor: '#000000',
display: 'none',
position: 'absolute',
left: ((pageSize[0] / 2) - 290 * 1) + 'px'
});

$(el).attr('id', 'temp');

$('body').append(el);

$('img[@alt="Picture"]').click(function() {

t = (window.pageYOffset + 20*1) + 'px';
href = $(this).parent().attr('href');
ifr = '<iframe src="' + href + '" width="100%" height="100%"></iframe>';
$('#temp').css('top', t).html(ifr).show();
return false;

});

$('body').click(function() {
$('img[@alt="Picture"]').unbind('click');
$('#temp').fadeOut();
});



ปล.เขียน Support Greasemonkey ที่ include jQuery เท่านั้นนะ

ขอโทษนะครับ พอจะอธิบายคราวๆ ได้ไหมครับว่าเอาไปใช้ยังไง ผมพอมีพื้นอยู่ เอาคราวๆก็ได้ครับ

[SvZ]

chanun, Greasemonkey เป็น add-ons ของ firefox น่ะ

[chanun]

แล้วถ้าเป็น ie จะใช้ไมได้หรือครับ
คือตอนนี้อยากทำแบบ พอเอาเม้าสไปวางบนลิงค์แล้วมันมีรุปเวบที่เราจะลิงค์ไปโผล่มาให้ดูก่อนนะครับ เหมือนด้านบน นั่งหาสารพัดจนปวดตาเลยยังไม่ได้เลยครับ

[figaro]

วิธีนี้จะใช้คุณสมบัติของ Greasemonkey เพื่อรัน javascript โดยเฉพาะ ซึ่งมันมีเฉพาะ ff

ie ทำไมได้นะคับ

[visavavit]

jquery หาลงจากไหนกันหรอครับ เจอแต่ GreaseMonkey

[figaro]

http://docs.jquery.com/Downloading_jQuery

โหลดมาแล้วเพิ่ม script เข้าไปที่ GreaseMonkey

โดเมนก็ตั้งตามนี้ http://www.thaiseoboard.com/*

[chanun]

ตอนนี้ผมใช้ff โหลด greasemonkey มาแล้ว และลง ใส่ jquery.js เข้าไปที่ headแล้ว
แล้วโคตที่คุณตรีให้มาเอาไปทำอะไหรือครับ

[smapan]

ปรกติผมเอาไว้รันพวก web game online อ่ะครับ พวก travian อะไรพวกนี้   

[Design108]

1. ติดตั้ง monkey
2. jQuery ดาวน์โหลดมาแล้ว แต่เอามาใส่ใน monkey อย่างไร

รบกวนพี่ ๆ

[raptor]

ถ้าใช้ใน thaiseoboard.com จะมีการ include jquery อยู่แล้ว view source ดูจะเห็น <script language="JavaScript" type="text/javascript" src="http://www.thaiseoboard.com/Themes/thaiseoboard_rev2009/js/jquery.js"></script>

ให้เรียกใช้ได้เลย code แบบนี้ดูครับ
$ = unsafeWindow.jQuery;
alert($("title").html());    // alert($); เฉย ๆ ก็ได้ถ้ามีค่าแปลว่าใช้ jquery ได้แล้ว

แต่ถ้าใช้ในเว็บที่ไม่มีการ include jquery อยู่แล้ว ผมใช้แบบนี้
var include_jq = document.createElement('script');
include_jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js';
include_jq.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(include_jq);
function include_jq_wait() {
   if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(include_jq_wait,100); }
   else { $ = unsafeWindow.jQuery; main(); }
}
include_jq_wait();

function main(){
   alert($("title").html());
}
เป็นการ include jquery จาก google api
ท่านใดมีวิธี include jquery จากในเครื่องเราเองเลยบ้างครับ ทำยังไงอยากรู้เหมือนกันครับ