文章出處

起因

在博客園寫文章，有時需要上傳好多大圖片，如果這些圖片過大，則會導致頁面變形。

因此有一個實際的需求，能夠在博客園的編輯頁面，直接批量修改所有圖片的大小，然后給這些圖片添加鏈接，以便點擊時轉到大圖。

簡單實現

  1. 在博客園編輯頁面，上傳一些圖片到博文中
  2. 點擊“編輯HTML源代碼”按鈕，此時彈出框中就是博客的HTML表示
  3. 打開瀏覽器調試窗口，拷貝如下 JavaScript 代碼，并運行，此時編輯框中HTML代碼已經被修正，保存即可！
var doc = $($('iframe[id^=mce]')[0].contentWindow.document);
var textarea = doc.find('#htmlSource');
var source = $('<div>').html(textarea.val());
source.find('img').each(function () {
    var cnode = $(this);
    if (cnode.parent().is('a')) {
        return;
    }
    var src = cnode.attr('src');
    cnode.width(450).wrap($('<a>', {
        'target': '_blank',
        'href': src
    }));
});
textarea.val(source.html());

注：這里已經加入了容錯處理，如果已經為圖片添加鏈接，則不做處理

 

實際操作如下圖所示：

 

48 張FineUI（專業版）高清大圖

 上一篇文章 使用 FineUI 制作簡單的購物車頁面（源代碼免費下載，另附 24 張專業版截圖） 尚有一些圖片未提供，這里一并提供。用的就是本文介紹的小技巧。

 

 

好文要頂

如果本文對你有所啟發或者幫助，請猛擊“好文要頂”，支持原創，支持三石！

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄