Pixel-slide tạo album ảnh nhúng vào web

13/08/2016 Nguyễn Trung Hiếu

Đối với các trang web thì sự sinh động là không thể thiếu, hôm này mình xin giới thiệu với các bạn một plugin jquery tạo album ảnh sinh động đó là pixel-slide cho phép tạo album ảnh qua lại nhẹ nhàng, plugin khá là nhé phù hợp với các giao diện web

Download

Các bạn vào đây download về nhé Pixel-slide 1.1

Giới thiệu

pixel-slide là một plugin jquery tạo slide ảnh chuyên nghiệp cho những ai đang thiết kế web hay quản trị web và nó do đội ngũ pixeladd phát triển để sử dụng vào hệ thống của pixeladd lên các bạn không phải no về tính ổn định cũng như các phiên bản cập nhật của nó.

nói về giao diện nó khá đơn giản cộng thêm các bạn có thể tùy biến thêm bên trong file css hoặc có thể css của riêng mình

nói về tốc độ thì nó khá là nhẹ chỉ 2k như vậy thì tốc độ chắc các bạn không phải no

Cài đặt và sử dụng

trước tiên cần phải đưa các file chạy của nó vào cặp thẻ head

<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

<script type="text/javascript" src="js/pixel-slide.js"></script>
<link rel="stylesheet" href="css/pixel-slide.css" type="text/css" />

với file jquery thì các bạn lựa chọn tùy phiên bản tại jquery.com

tiếp theo là gọi nó ra

- Các bạn sử dụng cú pháp

$([tên đối tượng]).pixel_slide();

- Để khởi tạo kèm theo thuộc tính các bạn sử dụng như sau:

$([tên đối tượng]).pixel_slide({
   thuộc tính 1: giá trị 1,
   thuộc tính 2: giá trị 2,
});

mã code cài đặt và sử dụng đầy đủ như sau:

<div class="pixel-slide">
	<div class="content-slide" data-img="images/album/img01.jpg">
	   <div class="content-title">
	      Xe hơi đẹp
	</div>
	</div>
	<div class="content-slide" data-img="images/album/img02.jpg">
	   <div class="content-title">
	      Hot girl
	   </div>
	</div>
	<div class="content-slide" data-img="images/album/img03.jpg"></div>
	<div class="content-slide" data-img="images/album/img04.jpg"></div>
	<div class="content-slide" data-img="images/album/img05.jpg"></div>
</div>
<script type="text/javascript">
	$(".pixel-slide").pixel_slide({
	    height: "500px",
	    delayTime:5000,
	});
</script>

Tùy chọn

hiện tại thì mới chỉ có một số tùy chọn cho plugin này mình hi vọng pixeladd sẽ nâng cấp sản phẩm này lên vào một ngày sớm nhất

Các tùy chọn mặc định

width:"100%",
height:"100%",
delayTime:3000,
mouseEnterStop:false,
pageSlide:true,

Giải thích

width Chiều ngang của slide mặc định là 100%
height Chiều cao của slide mặc định là 100%
delayTime Thời gian trễ khi chuyển hình ảnh
mouseEnterStop Sự kiện nếu giá trị "true" dừng chuyển hình ảnh qua lại và ngược lại
pageSlide Cho phép hoặc không cho phép hiển thị nút chuyển nhanh các hình ảnh

Tag: tạo album ảnh độngpixel-slide plugin jqueryplugin pixel-slidetạo slide ảnh với jquerytạo album ảnh với jquery

Đang phát triển ...

Bài viết liên quan

PIXEL METRO - PLUGIN JQUERY TẠO ALBUM ẢNH

Pixel Metro là một plugin jquery được xây dựng từ nền tảng jquery để tạo ra một công cụ slide ảnh dạng metro sử dụng cho thiết kế web, giúp tạo ra các album ảnh thể hiện trên trang web đa dạng và phong phú đẹp mắt hơn

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php