Trình diễn ảnh và video bằng JQuery với nút Stop/Start
Điểm 4.6/5 dựa vào 87 đánh giá
(Traidatmui.com) - Hôm nay mình xin chia sẽ cùng các bạn một thủ thuật làm ảnh trượt ngang với hiệu ứng JQuery. Thủ thuật này trình diễn ảnh rất đẹp mắt và bạn có thể tùy chỉnh hướng ảnh trượt khá dễ dàng với nút "Next" và "Preview". Với thủ thuật này, bạn không chỉ có thể chỉ trình diễn hình ảnh mà bạn còn có thể đưa nội dung là Flash, video, text... hay bất kì cái gì mà bạn muốn trình diễn trong tiện ích này. Tiện ích sẽ tự động trình diễn, tuy nhiên bạn cũng có thể dừng việc trình diễn lại với nút "Stop" và bắt đầu lại với nút "Start". Bạn có thể xem ảnh hay DEMO để thấy rỏ hơn.
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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 }
#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://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/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>
<script src="http://data-traidatmui.appspot.com/scripts/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&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/JUQKegIjiJg?fs=1&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&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&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&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&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>
<ul id="slider1">
<li>
<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/JUQKegIjiJg?fs=1&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/JUQKegIjiJg?fs=1&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&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&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&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&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
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
Không có nhận xét nào