Sử dụng hiệu ứng Fancybox cho tất cả các image trong bài viết [Blogspot]

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Hiện tại thì blogger đã hỗ trợ chức năng xem các ảnh trong bài viết bằng hiệu ứng Lightbox. Tuy nhiên nếu bạn không thích hiệu ứng này - hoặc muốn sử dụng hiệu ứng xem ảnh khác đẹp hơn, đơn giản hơn thì có thể tắt hiệu ứng Lightbox và cài đặt các hiệu ứng khác. Blog mình hiện đang sử dụng hiệu ứng Fancybox và đã có bài giới thiệu cho các bạn tham khảo.

Bây giờ một vấn đề mới đặt ra là làm sao để áp dụng Fancybox cho tất cả các image trong bài viết bởi thật sự Fancybox chỉ hoạt động cho các image được đặt trong thẻ <a>...</a>. Đối với các image ta chèn đơn theo dạng <img src="..." /> thì sẽ không hoạt động được.

Bài viết này sẽ giúp các bạn thực hiện việc xem tất cả các image trong bài viết - dù image có hay không có anchor tag (a tag)

Đầu tiên bạn mở template và tìm đoạn <data:post.body/> và thay bằng

<div class="post-body-content"><data:post.body/></div>
<script type='text/javascript'>//<![CDATA[
    $(".post-body-content").find('img').each(function () {
        var _parentNode = $(this).parent().get(0);
        if (_parentNode.tagName != "A") {
            $(this).wrap('<a href="' + $(this).attr('src') + '" target="_blank"></a>')
        }
    })
//]]></script>

Mục đích đoạn script trên là tự động thêm thẻ <a>...</a> cho tất cả các image trong bài viết không có anchor tag

Bây giờ bạn cần chèn đoạn code sau trước thẻ </head> trong template

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<link href='http://webdesignandsuch.com/posts/fancybox-youtube/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/59939888/itdl/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/59939888/itdl/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $(".post-body-content").find("a[href$=.jpg],a[href$=.png],a[href$=.gif]").attr('rel', 'gallery').fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'none',
        'titlePosition': 'over',
        'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Hình ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp;: ' + title : '') + '</span>'
        }
    });
});
//]]></script>

OK vậy là xong ! Bạn lưu template lại và xem kết quả nhé ^^

Lưu ý là bạn nên tải các file css, js lên host riêng sử dụng đề phòng trường hợp host của mình die nhé.

Các thuộc tính transitionIn, transitionOut, titlePosition,titleFormat... trong đoạn script thứ hai bạn có thể tham khảo thêm tại trang http://fancybox.net/api và thay đổi theo ý muốn