JQUERY TUTORIALS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Hiển thị popup hình ảnh trong nội dung bài viết

Có một số website có chức năng khi bạn click vào hình ảnh của bài viết đó thì nó sẽ phóng to hình ảnh lên, chức năng này khá hay và đơn giản nhưng nhiều bạn không biết làm nên mình viết một bài hướng dẫn cho bạn nào có nhu cầu đọc.

1. Ý tưởng gán Popup vào hình ảnh

Nhiều bạn nghĩ rằng để làm được chức năng này thì lúc thêm hình ảnh trong Editor (có thể là ckeditor hay bất kì editor nào khác) ta phải thêm một class nào đó để nhận diện, điều này khá hay và đó chính là ý tưởng để bắt đầu thực hiện đấy.

Tuy nhiên nếu bạn muốn khi click vào bất kì một hình ảnh nào trong phần nội dung đó đều hiển thị popup thì bạn không cần phải thêm class cho hình ảnh lúc đăng bài làm gì mà thay vào đó ta sẽ lấy hết hình ảnh và gán Popup.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Nhưng có một vấn đề là làm thế nào để hiệu ứng không lây lan ra các phần khác như sidebar, footer? Ta sẽ sử dụng một thẻ div bao quanh phần nội dung bìa viết lại để làm mốc. Như vậy cấu trúc của nó sẽ có dạng như sau:

<!-- PHẦN Ở TRÊN -->
<div id="post-content">
    <?php echo $content; ?>
</div>
<!-- PHẦN Ở DƯỚI -->

Vậy làm thế nào để thêm Popup vào hình ảnh? Ta sẽ thực hiện các bước như sau:

  • Bước 1: Chọn một Plugin Popup nào đó, mình chọn Fancybox Plugin.
  • Bước 2: Lấy danh sách hình ảnh
  • Bước 3: Lặp từng hình ảnh và Gán Fancybox vào

2. Hiển thị popup hình ảnh trong nội dung bài viết

Như mình phân tích ở trên ta sẽ thực hiện các bước như sau:

Bước 1: Download Fancybox Plugin và jQuery

Bạn vào trang chủ Fancybox và download plugin này về, sau đó vào file ví dụ để xem cách sử dụng nhé.

Bước 2: Viết Javascript hiển thị Popup

$(document).ready(function ()
{
    $("#post-content img").fancybox();
});

Còn nếu bạn muốn chỉ gán Popup cho hình ảnh có class nào đó thôi thì sử dụng cú pháp sau:

$(document).ready(function ()
{
    $("#post-content img.class-name").fancybox();
});

Vì Fancybox dễ sử dụng nên ta không cần phải lặp qua từng hình ảnh nên nếu bạn sử dụng một Plugin khác thì có thể sẽ phải mất thêm công đoạn lặp nữa.

3. Lời kết

Bài này khá đơn giản nhưng nhiều bạn mới học sẽ không biết nên mình viết bài này để hỗ trợ các bạn., hy vọng sẽ có ích.

Quan trọng nhất của lập trình đó là phân tích ý tưởng cho từng chức năng, cách tiếp cận xử lý bài toán nhanh thì tương lai bạn sẽ trở thành một lập trình viên giỏi là điều chắc chắn.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Top