Hướng dẫn cắt ảnh bằng Jquery

Như các bạn cũng thấy, Với template mặc định của Blogger hay là 1 số Tempalte được chia sẻ trên mạng thì hình ảnh Thumbnail của bài viết 1 là sẽ có kích thước ảnh là 72x72 hoặc sẽ là full kích thước của ảnh luôn. Như vậy thì khá là bất tiện và thân thiện với trang web của chúng ta.

Chúng ta đang loay hoay trong việc chỉnh sửa CSS để làm sao cho nó thật đẹp thật vừa vặn? Nhưng tiếc là nếu thumbnail có kích thước là 72x72 thì chẳng thể nào làm nó to lên được vì nếu cho giãn ra thì sẽ bị nhòe hình. Còn nếu là ảnh full thì load trang sẽ rất nặng về hình ảnh.

Vì vậy mình sẽ quyết định chia sẻ cho các bạn 1 đoạn js nhỏ để cắt hình ảnh theo ý thích của mình. Bạn hãy copy và chèn đoạn Javascript sau đây vào trên thẻ </head> và cảm nhận nhé!

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
    <script type='text/javascript'>
        // < ![CDATA[$(document).ready(function () {
            var w = 340;
            var h = 150;
            $('.secondary-post').find('img').each(function (n, image) {
                var image = $(image);
                image.attr({
                    src: image.attr('src').replace(/s\B\d{2,4}/, 'w' + w + '-h' + h + '-c')
                });
                image.attr('width', w);
                image.attr('height', h);
            });
        });
        //]] >
    </script>

Nhớ thay đổi 340 và 150 thành con số phù hợp với Template của bạn nhé!