Tin học 88 - chia sẻ kiến thức
ADS

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

Mục lục

    Download Trang chủ tải về pixel-metro.thoidaijsc.vn

    - CÀI ĐẶT VÀ SỬ DỤNG - SETUP

    Đưa các file sau vào trong thẻ head

    <head>
       <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    
       <script type="text/javascript" src="js/pixel-metro.js"></script>
       <link rel="stylesheet" href="css/pixel-metro.css" type="text/css" />
    </head>

    Với jquery thì các bạn có thể tùy chọn phiên bản từ 2.2.3 trở lên với những phiên bản dưới thì chúng tôi chưa kiểm tra hoạt động.

    CÀI ĐẶT

    - 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:

    - 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_metro({
       thuộc tính 1: giá trị 1,
       thuộc tính 2: giá trị 2,
    });

    Ví dụ:

    <script type="text/javascript">
    	$(".pixel-metro").pixel_metro({
    		height:"500px",
    		bg_metro:"images/dulieu/bg-metro3.jpg",
    		bg_opacity:0.55,
    		metro_rows:3,
    	});
    </script>

    Cấu trúc đầy đủ

    <section>
    
    	<div class="your-css">
    
    		<div class="pixel-metro">
    			<div class="content-metro" size-o="normal">
    				<div class="metro-sheet">
    					<img src="images/album/img01.jpg">
    				</div>
    				<div class="metro-sheet">
    					<img src="images/album/img02.jpg">
    				</div>
    				<div class="metro-sheet">
    					<img src="images/album/img03.jpg">
    				</div>
    			</div>
    
    			<div class="content-metro" size-o="wide">
    				<div class="metro-sheet">
    					<img src="images/album/img04.jpg">
    				</div>
    				<div class="metro-sheet">
    					<img src="images/album/img05.jpg">
    				</div>
    			</div>
    
    			<div class="content-metro" size-o="small">
    				<div class="metro-sheet">
    					<img src="images/album/img06.jpg">
    				</div>
    				<div class="metro-sheet">
    					<img src="images/album/img07.jpg">
    				</div>
    				<div class="metro-sheet">
    					<img src="images/album/img08.jpg">
    				</div>
    			</div>
    
    		</div>
    		<script type="text/javascript">
    			$(".pixel-metro").pixel_metro({
    				height:"500px",
    				bg_metro:"images/dulieu/bg-metro3.jpg",
    				bg_opacity:0.55,
    				metro_rows:3,
    			});
    		</script>
    
    	</div>
    </section>

    - Mỗi một thẻ div class content-metro trong thẻ div class pixel-metro đóng vai trò là 1 ô metro và trong mỗi div class content-metro sẽ có nhiều div class metro-sheet sẽ đóng vai trò là một cảnh trong ô metro.

    - Trong div class metro-sheet sẽ có 2 lựa chọn class cho thẻ div bên trong là:
    div có class là "text-metro" và div có class là "icon-metro"

    - Thuộc tính size-o trong thẻ div class content-metro có 3 tùy chọn cho 3 kích thước của ô metro

    • normal là tùy chọn hiện thị ô metro theo hình vuông kích thước cơ bản của metro
    • wide là tùy chọn hiện thị ô metro theo hình chữ nhật gấp đôi kích thước ô metro normal
    • small là tùy chọn hiện thị ô metro theo hình vuông với kích thước nhỏ bằng 1/4 ô normal

    Tại phiên bản 1.0 này chúng tôi mới chỉ phát triển 3 tùy chọn trên và sẽ nâng cấp lên nhiều tùy chọn hơn cho người dùng.

    Ví dụ:

    <div class="content-metro" size-o="normal">
    	<div class="metro-sheet">
    		<div class="text-metro">
    			<p><span class="glyphicon glyphicon-camera"></span></p>
    			<p><a href="#">Chụp ảnh phong cảnh đẹp cho photographer</a></p>
    		</div>
    	</div>
    	<div class="metro-sheet">
    		<div class="icon-metro">Icon thể hiện</div>
    	</div>
    </div>

    - TÙY CHỌN - OPTION

    CÁC THUỘC TÍNH TÙY CHỌN MẶC ĐỊNH

    width:"100%",
    height:"100%",
    delayTime:5000,
    bg_color:"#2d92f4",
    txt_color:"#ffffff",
    metro_rows:3,
    padd_s:6,
    padd_box:20,
    autoFixHeight:false,
    bg_metro:"",
    bg_opacity:0.35,

    GIẢI THÍCH

    Thuộc tính Giải thích
    width Chiều ngang của pixel metro mặc định sẽ là 100% lấy theo thẻ trước nó, các bạn có thể đặt theo giá trị cho phù hợp với dự án của mình.
    height Chiều cao của pixel metro mặc định sẽ là 100% lấy theo thẻ trước nó, các bạn có thể đặt theo giá trị cho phù hợp với dự án của mình.
    delayTime Thời gian chuyển cảnh/hiệu ứng từng ô trong metro, thời gian trễ mặc định là 5 giấy tương ứng với giá trị 5000 (1000=1s) thời gian này là thời gian mặc định sẽ được cộng thêm một khoảng thời gian ngẫu nhiên trong 5 giấy
    bg_color Mầu nền của ô trong metro, mặc định là mầu #2d92f4, với những ô metro không có ảnh thì nó sẽ thể hiện mầu nền này, bạn có thể đặt mầu khác cho phù hợp
    txt_color Mầu chữ trong ô metro, mặc định sẽ là mầu trắng #ffffff, bạn có thể đặt mầu khác cho phù hợp
    metro_rows Số hàng trong pixel metro, mặc định là 3 hàng, các bạn có thể đặt số hàng cho phù hợp với dự án web cảu các bạn
    padd_s Là khoảng cách giữa các ô metro
    padd_box Là khoảng cách giữa lề metro và các ô metro
    autoFixHeight Thuộc tính này mặc định là false, nếu nó được kích hoạt là true thì metro sẽ tự động căn chỉnh đều các ô metro theo chiều ngang nhưng chiều cao sẽ bị thay đổi với giá trị xấp xỉ giá trị gán
    bg_metro Là ảnh nền của metro, nhận giá trị là đường dẫn của một hình ảnh làm ảnh nền cho metro, có giá trị mặc định là rỗng.
    bg_opacity Là độ tàng hình của lớp mầu đen phủ trên ảnh nền và ở dưới các ô của metro, mặc định là 0.35 và nó nhận giá trị từ 0-1




    Bài viết khác

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

    Đố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

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

    Học lập trình PHP

    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,
    Bài 6: Session và Cookies trong PHP
    Bài 6: Session và Cookies trong PHP
    Để chuyền biến từ trang web này sang trang web khác như bài trước ta có thể dung biến form, nhưng như vây hơi phức tạp để
    Bài 5: Làm việc với biến form trong PHP
    Bài 5: Làm việc với biến form trong PHP
    Biến form trong PHP được biết đến như một loại biến, thay vì khai báo thì biến đó chính là tên của thẻ nhập liệu trong
    Bài 4: Phép toán và biểu thức có điều kiện trong PHP
    Bài 4: Phép toán và biểu thức có điều kiện trong PHP
    Trong bài học này các bạn sẽ tìm hiểu các phép gán, các toán tử, đồng thời giúp cho các bạn hiểu thêm vào các phát biểu
    Bài 3: Hằng trong PHP
    Bài 3: Hằng trong PHP
    Trong bài này, chúng ta tìm hiểu cách khai báo hằng, biến và sử dụng hằng biến. Ngoài ra, bạn cũng tìm hiểu cách chuyển
    Bài 2: Kiểu dữ liệu trong PHP
    Bài 2: Kiểu dữ liệu trong PHP
    Tìm hiểu cơ bản về các kiểu dữ liệu trong ngôn ngữ lập trình PHP, các kiểu dữ liệu thông thường và được sử dụng
    Bài 1: Cú pháp cơ bản trong ngôn ngữ PHP
    Bài 1: Cú pháp cơ bản trong ngôn ngữ PHP
    Về cơ bản ngôn ngữ lập trình PHP là ngôn ngữ dễ sử dụng, thông dụng hiện này, mạnh mẽ, vì là mã nguồn mở được

    Đề thi tham khảo