Tạo “hiệu ứng đặc biệt” cho hình ảnh

Cuối cùng thì tôi cũng đã cập nhật lại giá cho tất cả các sản phẩm trong Tùm-lum-shop , mời mọi người tham quan 🙂 . Để cho mọi người xem được hình ảnh thực tế của sản phẩm, tôi đã phải cắt/ghép nhiều tấm lại thành một tấm và đưa đường link để mọi người bấm xem. Nhưng tôi thấy hình như nó có vị…”chuối” :cuoibebung: Tùm-lum-shop dù gì thì cũng là trang bán hàng, tại sao mình không làm giống như người ta ? Bạn chỉ cần bấm vào tấm hình bên dưới là sẽ rõ :

Dây đeo cổ

Cách hiển thị này được rất nhiều trang bán hàng sử dụng để người dùng xem được nhiều hình ảnh của một sản phẩm mà không tốn quá nhiều không gian trên trang web. Sau một thời gian tìm kiếm, tôi đã tìm được cách làm cho blog WordPress 🙂

Chúng ta sẽ cần sự hỗ trợ của plugin có tên là WP-Slimbox2 và một vài thủ thuật nhỏ để đạt được mục đích 🙂

Bạn tải plugin về và cài đặt cho Blog, sau đó active nó lên là có thể sử dụng được ngay. Phần cấu hình cho Plugin có thể để sau cũng được.

Cách sử dụng như sau :
Tôi lấy ví dụ cho dễ. Đoạn mã giúp bạn làm được như tấm hình bên trên là :

<a href=”Đường_dẫn_file_hình_lớn.jpg” rel=”lightbox”><img src=”Đường_dẫn_file_hình_nhỏ.jpg” alt=”” title=”” class=”aligncenter” /></>

Trong đó :
– Đường_dẫn_file_hình_lớn : là tấm hình bạn muốn hiển thị khi người dùng bấm chuột vào tấm hình nhỏ trên web
– Đường_dẫn_file_hình_nhỏ : là tấm hình nhỏ nhỏ bạn muốn hiển thị trên xe
– rel=”lightbox” : đây là tham số quan trọng nhất, nếu không có tham số này thì hiệu ứng sẽ không chạy, bạn phải giữ nguyên chữ “lightbox”.

Cách sử dụng bên trên chỉ áp dụng cho 1 tấm hình, tức là khi bấm vào cái hình nhỏ, bạn chỉ xem được 1 hình lớn hiện ra. Cách xem nhiều hình tôi sẽ cập nhật vào ngày mai bởi vì bây giờ đã quá khuya rồi, 2 con mắt muốn đóng sập xuống luôn :khoc1: . Bạn có thể ghé thăm Tùm-lum-shop và bấm vào 6 mặt hàng đầu tiên (mới cập nhập nhật được nhiêu đó 🙂 ), bạn sẽ thấy hình thức xem nhiều hình là như thế nào. Khi khung hình lớn hiện ra, bạn hãy rê chuột vào đầu tấm hình rồi bấm một phát, nó sẽ chuyển sang tấm hình thứ hai và tiếp tục.

3 Comments
  1. cái ông ashampo này nhẹ mà ngon nè, nero thì hơi nặng, từ khi sử dụng ashampo thì rất thích, cám ơn bài viết

  2. cái này dùng Opera ko thấy hiệu ứng j :D. Mình thấy xài plugin highslide thấy đỡ cực hơn, chỉ cần cài là xong khỏi chỉnh sửa mất công hơn

  3. Cha cái này chèn thủ công hả AHX. Nếu chèn thủ công thì hơi mệt à

Trả lời Đoàn Vĩnh Thái Huỷ phản hồi