استفاده از thickbox در بلاگر

Thickbox يكي از پلاگين‌هاي jQuery است كه جهت نمايش صفحات modal بكار مي‌رود.

روش استفاده بسيار ساده‌اي هم دارد:
الف) jquery.js بايد به صفحه معرفي شود.
ب) سپس thickbox.js بايد به صفحه الحاق شود.
ج) و فايل css آن يعني thickbox.css نيز بايد به صفحه افزوده شود.

براي استفاده از آن كافي است يك لينك به صفحه اضافه كنيد كه ويژگي class آن مساوي thickbox باشد. مثلا:

<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>

TB_inline و طول و عرض و غيره، جزو خواص استاندارد اين پلاگين است. inlineId جهت معرفي id يك div در صفحه بكار مي‌رود كه قرار است محتويات آن زمانيكه روي اين لينك كليك شد به صورت modal نمايش داده شود.

<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>

و يا مانند مثال فوق مي‌تواند يك صفحه خارجي را نيز به صورت modal بارگذاري و نمايش دهد. Title بكارگرفته شده، همان عنوان صفحه Modal ما خواهد بود.
و مثال‌هاي ديگري از اين دست كه در صفحه رسمي آن موجود است و نيازي به تكرار آن‌ها نيست.

اما مشكلي كه در بلاگر وجود دارد اين است كه شما نمي‌توانيد اين ويژگي‌ها را در بسياري از موارد به صورت دستي تنظيم كنيد. يك ويجت ظاهر مي‌شود كه فقط به شما امكان ثبت يك عنوان و لينك مربوطه را مي‌دهد و همين.
براي انتساب ويژگي‌هاي thickBox به اين نوع لينك‌ها كه كنترلي روي آن نيست مي‌توان از خود jQuery كمك گرفت:

$(document).ready(function(){
  $("a[href='http://www.mysite.com/page.htm?TB_iframe=true&height=340&width=530']").each(function(){
      var obj = $(this);
      obj.attr("title","Contact me");
      obj.attr("class","thickbox");
     }).bind("contextmenu",function(e){
        return false;
    });
});

در اينجا http://www.mysite.com/page.htm?TB_iframe=true&height=340&width=530 همان صفحه‌اي كه قرار است پس از كليك بر روي لينكي منتسب به آن در صفحه به صورت modal باز شود. با استفاده از جي‌كوئري آن‌را يافته (لينكي كه href آن مساوي مقدار ياد شده است) و سپس ويژگي‌هاي title و class آن را به صورت پويا تنظيم مي‌كنيم تا توسط thickbox قابل شناسايي شود.
همچنين در اينجا كليك راست نيز بر روي اين لينك بسته شده تا كاربر فقط كليك معمولي را انجام دهد (فقط روي همين يك لينك در صفحه اعمال مي‌شود و نه كل صفحه).