- vừa được xem lúc

Hướng dẫn sử dụng jQuery Lightbox cho trang web của bạn

0 0 20

Người đăng: Hoàng Quang

Theo Viblo Asia

Lightbox plugin của jquery là một thư viện javascript dùng để tạo image slide. Khi người dùng click vào một hình thumbnail, lightbox sẽ tạo một khung để hiển thị hình ảnh được phóng lớn, cung cấp các nút để người dùng duyệt hình ảnh. Cái này sẽ rất tiện khi chúng ta xem ảnh gốc trực tiếp.

Các bạn có thể xem qua một vài demo: https://bevry-archive.github.io/jquery-lightbox/demo/

Để sử dụng Lightbox cho vào trong website của mình, các bạn làm như sau:

  1. Tải thư viện Lightbox về dưới máy tính của mình.
  2. Giải nén và di chuyển thư mụcjquery-lightbox đến một nơi nào đó trên máy chủ web của bạn.
  3. Chèn thư viện jquery vào trong thẻ <head>
<!-- Include jQuery (Lightbox Requirement) -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  1. Chèn thư viện Lightbox vào trong thẻ <head>
<!-- Include Lightbox (Production) -->
<script type="text/javascript" src="http://www.yoursite.com/somewhere/on/your/webserver/jquery-lightbox/scripts/jquery.lightbox.min.js"></script>
  1. Sử dụng thuộc tính rel có chứa lightbox vào thư viện của Lightbox

<a rel="lightbox-mygallery" href="...

hoặc

<a rel="lightbox" href="...

Sau đó, sử dụng đoạn code bên dưới vào trước thẻ </body>

<script type="text/javascript"> $('a:has(img)').lightbox();
</script>

Ngoài ra, bạn có thể tuỳ chỉnh thêm các tham số cho phù hợp với mục đích của mình. Chúc các bạn thành công!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Use maxlength method jquery validate in ruby on rails

. Khi làm việc với ruby on rails ngoài việc validate ở model, database thì validate trên view cũng rất cần thiết. Để có thể validate trên view thì chúng ta có thể sử dụng jquery validate.

0 0 32

- vừa được xem lúc

Custom selectbox jquery

Giới thiệu. Các bạn làm frontend chắc chắn đã gặp những design selectbox dạng dropdown khác với UI mặc định của trình duyệt. . Lý thuyết.

0 0 23

- vừa được xem lúc

Module Pattern trong Javascript

Việc giới hạn phạm vi ảnh hưởng và khả năng bị ảnh hưởng của các property và các biến và một việc cực kỳ quan trọng thế nhưng, Javascript lại không phải là một ngôn ngữ OOP và nó cũng không có cơ chế riêng cho phép chúng ta tạo ra các private property cho instance của các constructor function. Tuy n

0 0 31

- vừa được xem lúc

Một số tips trick với JQuery có thể bạn chưa biết hoặc biết rồi =))

Chắc hẵn ai làm việc với những ứng dụng web thì đều đã nghe qua thậm chú là làm việc với JQuey rất nhiều. jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript

0 0 24

- vừa được xem lúc

Hướng dẫn về cách dùng hàm $.ajax() của JQuery

Mở đầu. Ajax đã nhanh chóng trở thành một phần quan trọng và phổ biến trong việc phát triển web và là một trong các mô hình thành công nhất từ trước đến giờ.

0 0 27

- vừa được xem lúc

Download all images trên website sử dụng javascript

1. Vấn đề. Chắc hẳn trong thực tế khi làm các dự án việc phát sinh tính năng tải ảnh là rất nhiều. <a href="/images/myw3schoolsimage.

0 0 31