CODE968.COM: SlideShow với javascript có chú thích cho ảnh.

Thứ Năm, 20 tháng 6, 2013

SlideShow với javascript có chú thích cho ảnh.

Đây là một thanh trượt với javascript không dùng jquery và flash.
Với khả năng tùy biến là rất cao kèm theo có thể thêm chú thích cho ảnh cộng với code gọn nhẹ rất phù hợp với blog.

Để tạo Slider này bạn cần thêm 1 tiện ích cho blog và dán đoạn code sau vào và lưu lại
<style type="text/css">
#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;/* Chiều rộng bên trong khung trượt */
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://lh6.googleusercontent.com/-Z9OkPyAclCI/UY0WD2bz58I/AAAAAAAAZjI/BzLl-S5LLbo/s109-no/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;/* Chiều rộng ảnh */
height: 218px;/* Chiều cao ảnh*/
background: #fff url(https://lh5.googleusercontent.com/-etAuD7jFG-c/UY0WCabTfcI/AAAAAAAAZjA/JIm9zbbrrf0/w39-h15-no/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://lh3.googleusercontent.com/-K0b7aXnIZ5g/UY0WCCY03XI/AAAAAAAAZi8/71HSJRQAaC8/w11-h22-no/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="http://blogdautocrazy.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">

<a href="URL nếu cần gắn liên kết"><img src="Link ảnh 1" alt="Chú thích cho ảnh"></a>

<a href="URL nếu cần gắn liên kết"><img src="Link ảnh 2" alt="Chú thích cho ảnh"/></a>

</div></div>

Slider này yêu cầu ảnh phải có cùng kích thước và chỉnh chiều rộng slider bằng chiều rộng ảnh nghĩa là chiều rộng slider theo chiều rộng ảnh.

Code Tạo SlideShow Ảnh K2.

Để chỉnh chiều cao và chiều rộng của slide, các bạn chỉnh lại thông số width, height ở dòng 3
Code

<html>
<style>
.sl_kenny_m {position:relative;width:610px;height:340px;background:#000;}
.sl_kenny_m ul{display:none;}
.sl_kenny_m .ctn_sl_kenny{overflow:hidden;position:relative;}
.sl_kenny_m .image{overflow:hidden;}
.sl_kenny_m .image img{display:none;}
.sl_kenny_m .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:2;}
.sl_kenny_m .box_clone img{position:absolute;top:0;left:0;z-index:2;}
.sl_kenny_m .prev_button{position:absolute;top:50%;left:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh4.googleusercontent.com/-KyExgqE3hEU/UWopBeDr6sI/AAAAAAAAWvU/89oQ1qmd1yQ/s34/prev.png) no-repeat left top;}
.sl_kenny_m .next_button{position:absolute;top:50%;right:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh6.googleusercontent.com/-CvKWYhYRwnE/UWopACEifaI/AAAAAAAAWvc/CMApXVD3Pm4/s34/next.png) no-repeat left top;}
.sl_kenny_m .tt_sl{position:absolute;top:15px;left:15px;z-index:10;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:.75;}
.sl_kenny_m .tt_sl .img_nb{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.sl_kenny_m .tt_sl .img_nb_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0;}
.sl_kenny_m .container_thumbs{position:relative;overflow:hidden;height:50px;}.sl_kenny_m .tt_sl_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}.sl_kenny_m .tt_sl_thumb .img_nb{overflow:hidden;width:70px;height:40px;position:relative;}
.sl_kenny_m .tt_sl_thumb .img_nb img{position:absolute;top:-50px;left:-50px;}.sl_kenny_m .box_scroll_thumbs{padding:0 10px;}.sl_kenny_m .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg,#555,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:11;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.sl_kenny_m .tt_sl_dots{position:absolute;right:10px;bottom:10px;z-index:16;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.sl_kenny_m .tt_sl_dots .img_nb{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.sl_kenny_m .tt_sl_dots .img_nb_select{background:#c00;float:left;margin:0 5px 0 0;}
.sl_kenny_m .ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;display:none;}.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://lh4.googleusercontent.com/-YeXLaMpTBfc/UWopAC3cyvI/AAAAAAAAWu8/IwNeKEFKSh4/s32/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:.8;background:#000;}
.ll_sl_kenny p{padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}.tt_sl *{font-family:Consolas,arial,tahoma!important;}
.sl_kenny_m .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:9;border-radius:20px;}#prev_sl{display:none;position:absolute;z-index:17;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden;}#prev_sl ul{height:100px;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0;}
#prev_sl ul li{width:100px;height:100px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block;}#prev_sl ul li img{position:absolute;top:0;left:0;height:150px;width:auto;}#overlay_sl_kenny{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000;}
.sl_kenny_m .focus_button{position:absolute;top:50%;z-index:10;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh4.googleusercontent.com/-mo1Uwi-hCJk/UWopAKeHL8I/AAAAAAAAWvY/y5aUvk_thXk/s42/focus-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button{position:absolute;top:50%;z-index:16;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh3.googleusercontent.com/-qc9EMhbMqT4/UWopAgIuWlI/AAAAAAAAWvI/lVe43sVgwPE/s42/pause-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button.play_button{background:url(https://lh6.googleusercontent.com/-Yi4pOUqE8bk/UWopA4SUbkI/AAAAAAAAWvQ/dVGqYbNBQlk/s42/play-button.png) no-repeat left top;}.sl_kenny_m_small {width:200px;height:100px;}
</style>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/jq144.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/sl_kenny.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/animate_colors.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/easing13.js"></script>
<script>
$(document).ready(function() {
$('.sl_kenny_w').sl_kenny({
animation: "random",
interval: 3000,
stop_over: false,
max_number_height: 8,
numbers_align: "Left",
numbers: false,
label: false,
dots: true,
animateNumberOut:{backgroundColor:'#e2e2e2', color:'#fff'},
animateNumberOver:{backgroundColor:'#fff', color:'#000'},
animateNumberActive:{backgroundColor:'#FF8DC4', color:'#fff'},
controls: true, 
controls_position: "leftTop",
progressbar: true, 
progressbar_css: { 
top:'10px', 
left:'50px', 
height:6, 
borderRadius:'2px', 
width:560, 
backgroundColor:'#FF8DC4', 
opacity:.7 
}
});
});
</script>
<div class="bb_c">
<div class="sl_kenny_m sl_kenny_w">
<ul>
<li><a href="Địa chỉ  ảnh 1" target="_blank"><img src="Link ảnh 1" /></a>
</li>
<li><a href="Địa chỉ ảnh 2" target="_blank"><img src="Link ảnh 2" /></a>
</li>

<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
</ul></div>
</div></html>

Cần thêm bao nhiêu ảnh là tùy chỉ cần thêm dòng code sau:
<li><a href="Địa chỉ ảnh"><img src="Linh ảnh"/></a></li>
Trước dòng:
<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
Nên size ảnh cho phù hợp với kích thước slideshow cần tạo.