"Trình diễn (slideshow) ảnh tự động với hiệu ứng Jquery"

(Traidatmui.com) – Mình đã có lần giới thiệu đến các bạn một thủ thuật tạo slideshow cho ảnh bằng Javascript, tuy nhiên với thủ thuật trước thì chỉ đơn thuần là trình diễn ảnh không có thêm hiệu ứng khác. Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật cũng là slideshow cho ảnh nhưng có thêm một số hiệu ứng với Jquery. Thủ thuật này sẽ có thêm phần mô tả cho ảnh, xuất hiện khi ảnh đó được trình diễn. Bạn hãy xem demo sẽ thấy rõ hơn.

1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/fadeslideshow.js"></script>

4. Tiếp theo bạn chèn code css vào trước thẻ ]]></b:skin>
.imgarray {
background:#ccc; /* màu nền của tiện ích*/
width:600px; /*độ rộng của ảnh*/
height:480px; /*chiều cao của ảnh*/
border:1px solid #fff; /*đường viền của ảnh*/
padding:2px;
margin:0px;
}

.descpanelfg{
color:#fff; /*màu text mô tả*/
font:13px verdana;
background:#000; /*màu nền của phần mô tả*/
padding:5px 5px 8px 9px;
opacity:0.7;
border-top:1px solid #fff;
position:absolute;
left:0;
top:0;}

5. Save template lại và trở về phần tử trang
6. Chọn thêm tiện ích và thêm phần tử Javascript/HTML
7. Thêm code bên dưới vào phần tử HTML trên
<script type="text/javascript">
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4",

imagearray: [
["http://lh6.ggpht.com/_BTztXRwC9ik/TNuxQ72fyYI/AAAAAAAAE0M/b003WU6sISs/s640/Chrysanthemum.jpg", "URL 1", "", "Phần dành cho mô tả ảnh 1"],
["http://lh3.ggpht.com/_BTztXRwC9ik/TNuxQ2BMC2I/AAAAAAAAE0Q/9Z394sOn3Xs/s800/img7.jpg", "URL 2", "", "Phần dành cho mô tả ảnh 2"],
["http://lh4.ggpht.com/_BTztXRwC9ik/TNuxRCbcjcI/AAAAAAAAE0U/eH7PZsUagK4/s800/img10.jpg", "URL 3", "", "Phần dành cho mô tả ảnh 3"],
["http://lh6.ggpht.com/_BTztXRwC9ik/TNuxRpL8GqI/AAAAAAAAE0Y/OmNnnU-dLKY/s640/Desert.jpg", "URL 4", "", "Phần dành cho mô tả ảnh 4"]
],

dimensions: [605, 485], //độ rộng và chiều cao của tiện ích
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:true},
persist: false,
fadeduration: 500,
descreveal: "peekaboo",
togglerid: ""
})

</script>

<div id="fadeshow4"></div>

Chỉnh code:
- Bạn hãy thay dòng màu cam ở trong code thành link ảnh của bạn
- Thay URL 1, URL 2... thành các link đường dẫn bạn muốn tạo cho ảnh tương ứng
- Thay phần mô tả cho ảnh tương ứng với ảnh của bạn

8. Save tiện ích lại

Lưu ý: Phần độ rộng (600px) và chiều cao (480px ) của ảnh và tiện ích ([605, 485])phải tương đồng với nhau.

Nếu bạn muốn phần mô tả chỉ hiển thị khi rê chuột vào ảnh thì bạn thay các code như sau
Thay mygallery4 thành mygallery2
Thay fadeshow4 thành fadeshow2
Thay peekaboo thành ondemand


Chúc bạn thành công

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang