728x100 AdSpace

Home > Trình diễn ảnh và video bằng JQuery > Trình diễn ảnh và video bằng JQuery với nút Stop/Start

Trình diễn ảnh và video bằng JQuery với nút Stop/Start


» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (hay bố cục)
3. Chọn phần chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
*{ margin: 0; padding: 0; }
#page-wrap {width: 600px; /*độ rộng của tiện ích*/
margin: 0px auto;
position: relative; }
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
}
div.anythingSlider {
height: 350px; /*Chiều cao của tiện ích*/
margin: 0 auto;
}
div.anythingSlider .anythingWindow {
border-right: 3px solid #ccc;
border-left: 3px solid #ccc;
border-top: 3px solid #ccc;
border-bottom: 3px solid #7C9127;
}

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}

ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0; left: 0;
margin: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
float: left;
padding: 0;
margin: 0;
}
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin-top: -60px;
width: 45px;
text-align: center;
outline: 0;
background: url(http://lh3.ggpht.com/_9-sNIAfGhKg/TTqGRuCKpOI/AAAAAAAAABs/rj4NNWW7Z28/arrows.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }

div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
color: #fff;
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(http://lh6.ggpht.com/_9-sNIAfGhKg/TTqGRZ7KBaI/AAAAAAAAABo/sl7j1Ui6Dks/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop {
z-index: 10;
background: green url(http://lh6.ggpht.com/_9-sNIAfGhKg/TTqGRZ7KBaI/AAAAAAAAABo/sl7j1Ui6Dks/cellshade.png) repeat-x center top;
color: white;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: #ff0 }

Bạn có thể download ảnh trong code (link màu tím) về và upload lên host riêng nếu chưa có host bạn có thể dùng tạm link trên không cần thay thế. Nếu bạn rành về CSS thì hãy chỉnh sửa các thuộc tính trên, còn nếu chưa thành thạo thì không nên chỉnh sửa nhiều mà hãy nên chỉnh những phần cơ bản như: độ rộng, chiều cao, đường viền..

5. Chèn tiếp code sau vào bên dưới thẻ <head>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/jquery.min.v1.4.1.js.txt"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {

$('#slider1').anythingSlider({
width : 500, //độ rộng của phần ảnh hay video
easing: 'easeInOutExpo'
});});
</script>

6. Save template lại
7. Trở về phần tử trang thêm 1 HTML/Javascript và thêm vào nó code bên dưới
<div id="page-wrap">
<ul id="slider1">

<li>
<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/JUQKegIjiJg?fs=1&amp;hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/JUQKegIjiJg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</li>

<li>
<img src="http://lh5.ggpht.com/_9-sNIAfGhKg/TTqIGynPAaI/AAAAAAAAACA/qJJuJzso_gU/slide-civil-1.jpg" alt="" />
</li>

<li>
<img src="http://lh3.ggpht.com/_9-sNIAfGhKg/TTqIGwVdCeI/AAAAAAAAACE/CK7fC9eSg98/slide-civil-2.jpg" alt="" />
</li>

<li>
<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/xN-ptqoqDUU?fs=1&amp;hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/xN-ptqoqDUU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</li>

<li>
<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/ayRdlFK-OMc?fs=1&amp;hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/ayRdlFK-OMc?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</li>

<li>
<img src="http://lh5.ggpht.com/_9-sNIAfGhKg/TTqIGxN_KZI/AAAAAAAAACI/sTd51eJjFjk/slide-env-1.jpg" alt="" />
</li>

</ul>
</div>

Các code màu xanh là code hình ảnh hay flash video, bạn có thể thay đổi chúng thành nội dung hay hình ảnh mà bạn muốn sử dụng cho tiện ích này.

8. Cuối cùng save lại

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



  • Blogger Comments
  • Facebook Comments

0 nhận xét:

Đăng nhận xét

Item Reviewed: Trình diễn ảnh và video bằng JQuery với nút Stop/Start Rating: 5 Reviewed By: Unknown
Đăng ký: Đăng Nhận xét (Atom)
Scroll to Top