ดาวน์โหลดฟรี

ดาวน์โหลด HTML5 and jQuery filter images Portfolio
เข้าชมทั้งหมด : 724 ครั้ง | ดาวน์โหลด : 155 ครั้ง | หมวด : HTML5


HTML5 and jQuery filter images Portfolio

we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

The HTML

The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag:

index.html

01 <!DOCTYPE html>
02 <html>
03     <head>
04         <meta charset="utf-8" />
05  
06         <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
07  
08         <!-- Our CSS stylesheet file -->
09         <link rel="stylesheet" href="assets/css/styles.css" />
10  
11         <!-- Enabling HTML5 tags for older IE browsers -->
12         <!--[if lt IE 9]>
13           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
14         <![endif]-->
15     </head>
16  
17     <body>
18  
19         <header>
20             <h1>My Portfolio</h1>
21         </header>
22  
23         <nav id="filter">
24             <!-- The menu items will go here (generated by jQuery) -->
25         </nav>
26  
27         <section id="container">
28             <ul id="stage">
29                 <!-- Your portfolio items go here -->
30             </ul>
31         </section>
32  
33         <footer>
34         </footer>
35  
36         <!-- Including jQuery, the Quicksand plugin, and our own script.js -->
37  
38         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
39         <script src="assets/js/jquery.quicksand.js"></script>
40         <script src="assets/js/script.js"></script>
41  
42     </body>
43 </html>

In the body, there are a number of the new HTML5 elements. The header holds our h1 heading (which is styled as the logo), the section element holds the unordered list with the portfolio items (more lists are added by jQuery, as you will see later), and the nav element, styled as a green bar, acts as a content filter.

The #stage unordered list holds our portfolio items. You can see what these items should look like below. Each of them has a HTML5 data attribute, which defines a series of comma-separated tags. Later, when we use jQuery to loop through this list, we will record the tags and create categories that can be selected from the green bar.

01 <li data-tags="Print Design">
02     <img src="assets/img/shots/1.jpg" />
03 </li>
04  
05 <li data-tags="Logo Design,Print Design">
06     <img src="assets/img/shots/2.jpg" />
07 </li>
08  
09 <li data-tags="Web Design,Logo Design">
10     <img src="assets/img/shots/3.jpg" />
11 </li>

ข้อมูลการดาวน์โหลด HTML5 and jQuery filter images Portfolio

เข้าชมทั้งหมด

: 724 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 155 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 219.9 kb

หมวดหมู่

: HTML5

แนะนำโปรแกรมที่เกี่ยวข้อง


Html5 canvas loading animation effect


Html5 canvas loading animation effect
เข้าชมทั้งหมด : 949 ครั้ง | ดาวน์โหลด : 271 ครั้ง | หมวด : HTML5

HTML5 Demo: Drag and drop


Drag the list items over the dustbin, and drop them to have the bin eat the item
เข้าชมทั้งหมด : 673 ครั้ง | ดาวน์โหลด : 205 ครั้ง | หมวด : HTML5

Neon Text Effect With jQuery & CSS


In this combined design and coding tutorial, we are creating a neon glow text effect with CSS and jQuery, perfect for spicing up your web pages while keeping an eye on SEO. Read more。
เข้าชมทั้งหมด : 661 ครั้ง | ดาวน์โหลด : 183 ครั้ง | หมวด : HTML5

jQuery html5 canvas 3D animation effect


Directions: Step 1: Add the below code inside the section of the page: …
เข้าชมทั้งหมด : 661 ครั้ง | ดาวน์โหลด : 185 ครั้ง | หมวด : HTML5

Editable CSS3 jQuery html5 Image Gallery


We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with…
เข้าชมทั้งหมด : 904 ครั้ง | ดาวน์โหลด : 182 ครั้ง | หมวด : HTML5

หมวดหมู่โปรแกรม

 เกมส์
 ไดร์ฟเวอร์
 โปรแกรมด้านความปลอดภัย
 บราวเซอร์และปลั๊กอิน
 โปรแกรมด้านธุรกิจ
 โปรแกรมการติดต่อสื่อสาร
 เครื่องมือ สำหรับนักพัฒนา
 โปรแกรมสำหรับจัดการภาพ
 โปรแกรมเพื่อการศึกษา
 โปแกรมการออกแบบกราฟฟิก
 โปรแกรมด้านอินเตอร์เน็ต
 โปรแกรมสำหรับ iTunes & iPod
 โปรแกรมสำหรับ MP3 & Audio
 โปรแกรมด้านเครือข่าย
 โปรแกรมทั่วไป & OS
 โปรแกรมจัดการวีดีโอ&ภาพยนต์
 เว็บไซต์สำเร็จรูป (CMS)

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form