Thủ thuật blogspot - Dautoblog

Code Tạo SlideShow Ảnh K3

Code Tạo SlideShow Ảnh K3
SlideShow Ảnh K3 là một dạng slider trình chiếu ảnh có gắn liên kết mà tại đây bạn có được những hiệu ứng thú vị được tạo ra từ javascript.
Tại slider này được bổ sung các nút tiến, lùi, play, tạm dừng giúp bạn chủ động hơn trong việc thưởng thức hình ảnh.
Các bạn chỉnh sửa bố cục và thêm tiện ích HTML/Javascript ở vị trí các bạn muốn chèn slide. Sau đó dán đoạn code bên dưới vào, save lại và xem kết quả.
Xem thử



Để 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
<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://dl.dropboxusercontent.com/s/d9kt4ssmrgavixz/jq144.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/sfumh1mz03dbksx/sl_kenny.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/6iu9unptu4uggl7/animate_colors.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/zeql5g65dhj3odg/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>
</ul></div>
</div>
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>

Nên size ảnh cho phù hợp với kích thước slideshow cần tạo
Comments blogger

Không có nhận xét nào :