Đăng kí­ | Quên mật khẩu ?
ĐĂNG NHẬP

Tạo Slide Image bằng jcarousel Plugin của jquery

Thứ Sáu, tháng 11 11, 2011 |

Nguồn vnhow

Trong hướng dẫn này, mình sẽ sử dụng jQuery với Plugin jCarousel để  hiển thị slide các hình nhỏ và chú thích. Hình thu nhỏ có thể được cuộn với việc sử dụng các nút trước và sau khi bất kỳ hình ảnh thu nhỏ, các chú thích hoặc tiêu đề của hình nhỏ sẽ trượt lên.

Để thao tác bạn làm như sau: 

1. Tải jCarousel pulugin tại địa chỉ: http://sorgalla.com/projects/download-zip.php?jcarousel

2. Giải nén tập tin vừa tải, copy 2 thư mục lib(chứa thư viện javascript) và skins(chứa các giao diện cho slide) vào thư mục web của bạn.

3. Đặt đoạn mã sau vào thẻ <head> của trang web để load các thư viện javascript và css.

<!--
 jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<!--
 jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<!--
 jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>


5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.

<ul id="mycarousel" class="jcarousel-skin-tango">
 <li><img src="images/image1.jpg" width="75" height="75" alt="" /></li>
 <li><img src="images/image2.jpg" width="75" height="75" alt="" /></li>
 <li><img src="images/image3.jpg" width="75" height="75" alt="" /></li>
 <li><img src="images/image4.jpg" width="75" height="75" alt="" /></li>
</ul>
6. Và kết quả hiển thị slide trên trang web.

Cách sử dụng Lightbox Plugin của jquery

Thứ Sáu, tháng 11 11, 2011 |


Nguồn: vnhow

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.

1.Tải thư viện jquery tại địa chỉ:  http://code.jquery.com/jquery-1.4.2.min.js

2. Tải lightbox plugin tại địa chỉ:  http://github.com/balupton/jquery-lightbox/downloads

3. Giải nén, chép các thư mục css, js, images vào thư mục chứa các thư viện javascript của bạn, chẳng hạn js/jquery.lightbox. Bạn có thể Upload file js lên Google Code.

4. Chèn đoạn mã sau vào trong thẻ <head>

<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox/js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.lightbox/css/jquery.lightbox.css" /> <script type="text/javascript"> $(document).ready(function(){
 $('.lightbox').lightBox();
 });

5. Chèn đoạn mã sau vào vị trí bạn muốn hiển thị hình thumbnail:
<a href="images/large.jpg" class="lightbox">
<img src="images/thumbnail.jpg">
</a>

Tạo Gradient Button với CSS3

Thứ Năm, tháng 11 10, 2011 |

Nguồn: Sưu tầm.

Tình cờ lang thang trên Google kiếm mấy cái button về làm blog thấy có 1 bài viết làm về Button bằng CSS, mà lại là CSS3  và thấy nó cũng hay hay nên mình post lên để mọi người tham khảo và làm thử. Rất đẹp khi sử dụng nút Read more bằng phương pháp này.Vì CSS3 này cũng mới nên mình xem xem nó thế nào và Bài viết sau sẽ hướng dẫn các bạn cách tạo nút bấm với hiệu ứng gradient rất đẹp mắt sử dụng CSS3.

1. Tạo style cơ bản cho button:
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

2. Tạo hiệu ứng gradient:
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

3. Để sử dụng, thêm class "button orange" vào button muốn tạo hiệu ứng :
<a href="#" class="button orange">Button</a>


4. Update thêm cho các bạn bộ code đầy đủ nhiều định dạng và màu sắc cho button.


<style type="text/css">
body {
 background: #ededed;
 width: 900px;
 margin: 30px auto;
 color: #999;
}
p {
 margin: 0 0 2em;
}
h1 {
 margin: 0;
}
a {
 color: #339;
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
div {
 padding: 20px 0;
 border-bottom: solid 1px #ccc;
}

/* button
---------------------------------------------- */
.button {
 display: inline-block;
 zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
 *display: inline;
 vertical-align: baseline;
 margin: 0 2px;
 outline: none;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 font: 14px/100% Arial, Helvetica, sans-serif;
 padding: .5em 2em .55em;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 -webkit-border-radius: .5em;
 -moz-border-radius: .5em;
 border-radius: .5em;
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
 text-decoration: none;
}
.button:active {
 position: relative;
 top: 1px;
}

.bigrounded {
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
}
.medium {
 font-size: 12px;
 padding: .4em 1.5em .42em;
}
.small {
 font-size: 11px;
 padding: .2em 1em .275em;
}

/* color styles
---------------------------------------------- */

/* black */
.black {
 color: #d7d7d7;
 border: solid 1px #333;
 background: #333;
 background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
 background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
 background: #000;
 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
 background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
 color: #666;
 background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
 background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
 color: #e9e9e9;
 border: solid 1px #555;
 background: #6e6e6e;
 background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
 background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
 background: #616161;
 background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
 background: -moz-linear-gradient(top, #757575, #4b4b4b);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
 color: #afafaf;
 background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
 background: -moz-linear-gradient(top, #575757, #888); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */ (Định tô màu Trắng đều ko thấy nên thôi)
.white {
 color: #606060;
 border: solid 1px #b7b7b7;
 background: #fff;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
 background: #ededed;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
 background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
 color: #999;
 background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
 background: -moz-linear-gradient(top, #ededed, #fff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
 color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top, #faa51a, #f47a20);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top, #f88e11, #f06015);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
 color: #fcd3a5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
 background: -moz-linear-gradient(top, #f47a20, #faa51a);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
 color: #faddde;
 border: solid 1px #980c10;
 background: #d81b21;
 background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
 background: -moz-linear-gradient(top, #ed1c24, #aa1317);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
 background: #b61318;
 background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
 background: -moz-linear-gradient(top, #c9151b, #a11115);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
 color: #de898c;
 background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
 background: -moz-linear-gradient(top, #aa1317, #ed1c24);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
 color: #d9eef7;
 border: solid 1px #0076a3;
 background: #0095cd;
 background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
 background: -moz-linear-gradient(top, #00adee, #0078a5);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
 background: #007ead;
 background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
 background: -moz-linear-gradient(top, #0095cc, #00678e);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
 color: #80bed6;
 background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
 background: -moz-linear-gradient(top, #0078a5, #00adee);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
 color: #fae7e9;
 border: solid 1px #b73948;
 background: #da5867;
 background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
 background: -moz-linear-gradient(top, #f16c7c, #bf404f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
 background: #ba4b58;
 background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
 background: -moz-linear-gradient(top, #cf5d6a, #a53845);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
 color: #dca4ab;
 background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
 background: -moz-linear-gradient(top, #bf404f, #f16c7c);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
 color: #e8f0de;
 border: solid 1px #538312;
 background: #64991e;
 background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
 background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
 background: #538018;
 background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
 background: -moz-linear-gradient(top, #6b9d28, #436b0c);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
 color: #a9c08c;
 background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
 background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
 color: #feeef5;
 border: solid 1px #d2729e;
 background: #f895c2;
 background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
 background: -moz-linear-gradient(top, #feb1d3, #f171ab);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
 background: #d57ea5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
 background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
 color: #f3c3d9;
 background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
 background: -moz-linear-gradient(top, #f171ab, #feb1d3);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

</style>
</head>

<body>
<h1>CSS3 Gradient Buttons</h1>
<div>
 <a href="#" class="button black">Rectangle</a> or
 <a href="#" class="button black bigrounded">Rounded</a> Can be
 <a href="#" class="button black medium">Medium</a> or
 <a href="#" class="button black small">Small</a>
 <br /><br />
 <input class="button black" type="button" value="Input Element" />
 <button class="button black">Button Tag</button>

 <span class="button black">Span</span>
 <div class="button black">Div</div>
 <p class="button black">P Tag</p>
 <h3 class="button black">H3</h3>
</div>

<div>
 <a href="#" class="button gray">Gray</a>
 <a href="#" class="button gray bigrounded">Rounded</a>
 <a href="#" class="button gray medium">Medium</a>
 <a href="#" class="button gray small">Small</a>
 <br /><br />

 <input class="button gray" type="button" value="Input Element" />
 <button class="button gray">Button Tag</button>
 <span class="button gray">Span</span>
 <div class="button gray">Div</div>
 <p class="button gray">P Tag</p>
 <h3 class="button gray">H3</h3>
</div>

<div>
 <a href="#" class="button white">White</a>
 <a href="#" class="button white bigrounded">Rounded</a> <a href="#" class="button white medium">Medium</a>
 <a href="#" class="button white small">Small</a>
 <br /><br />

 <input class="button white" type="button" value="Input Element" />
 <button class="button white">Button Tag</button>
 <span class="button white">Span</span>
 <div class="button white">Div</div>
 <p class="button white">P Tag</p>
 <h3 class="button white">H3</h3>
</div>

<div>
 <a href="#" class="button orange">Orange</a>
 <a href="#" class="button orange bigrounded">Rounded</a>
 <a href="#" class="button orange medium">Medium</a>
 <a href="#" class="button orange small">Small</a>
 <br /><br />

 <input class="button orange" type="button" value="Input Element" />
 <button class="button orange">Button Tag</button>
 <span class="button orange">Span</span>
 <div class="button orange">Div</div>
 <p class="button orange">P Tag</p>
 <h3 class="button orange">H3</h3>
</div>

<div>
 <a href="#" class="button red">Red</a>
 <a href="#" class="button red bigrounded">Rounded</a>
 <a href="#" class="button red medium">Medium</a>
 <a href="#" class="button red small">Small</a>
 <br /><br />

 <input class="button red" type="button" value="Input Element" />
 <button class="button red">Button Tag</button>
 <span class="button red">Span</span>
 <div class="button red">Div</div>
 <p class="button red">P Tag</p>
 <h3 class="button red">H3</h3>
</div>

<div>
 <a href="#" class="button blue">Blue</a>
 <a href="#" class="button blue bigrounded">Rounded</a>
 <a href="#" class="button blue medium">Medium</a>
 <a href="#" class="button blue small">Small</a>
 <br /><br />

 <input class="button blue" type="button" value="Input Element" />
 <button class="button blue">Button Tag</button>
 <span class="button blue">Span</span>
 <div class="button blue">Div</div>
 <p class="button blue">P Tag</p>
 <h3 class="button blue">H3</h3>
</div>

<div>
 <a href="#" class="button rosy">Rosy</a>
 <a href="#" class="button rosy bigrounded">Rounded</a>
 <a href="#" class="button rosy medium">Medium</a>
 <a href="#" class="button rosy small">Small</a>
 <br /><br />

 <input class="button rosy" type="button" value="Input Element" />
 <button class="button rosy">Button Tag</button>
 <span class="button rosy">Span</span>
 <div class="button rosy">Div</div>
 <p class="button rosy">P Tag</p>
 <h3 class="button rosy">H3</h3>
</div>

<div>
 <a href="#" class="button green">Green</a>
 <a href="#" class="button green bigrounded">Rounded</a> <a href="#" class="button green medium">Medium</a>
 <a href="#" class="button green small">Small</a>
 <br /><br />

 <input class="button green" type="button" value="Input Element" />
 <button class="button green">Button Tag</button>
 <span class="button green">Span</span>
 <div class="button green">Div</div>
 <p class="button green">P Tag</p>
 <h3 class="button green">H3</h3>
</div>

<div>
 <a href="#" class="button pink">Pink</a>
 <a href="#" class="button pink bigrounded">Rounded</a>
 <a href="#" class="button pink medium">Medium</a>
 <a href="#" class="button pink small">Small</a>
 <br /><br />

 <input class="button pink" type="button" value="Input Element" />
 <button class="button pink">Button Tag</button>
 <span class="button pink">Span</span>
 <div class="button pink">Div</div>
 <p class="button pink">P Tag</p>
 <h3 class="button pink">H3</h3>
</div>


Cũng đáng để thử phải ko các bạn. Thử làm và demo đi nào....!

Rank & Visitors

NGƯỜI THEO DÕI

Lên đầu trang
Vào giữa trang
Xuống cuối trang