Accordion Slider

Hôm nay mình sẽ giới thiệu một loại jQuery Slider mới nhưng lại không mới:

Demo

Hẳn bạn đã nhận ra đây chính là một nâng cấp của Kwicks Slider mà Noct từng đăng trước đây. Hai tính năng sáng giá nhất của Accordion Slider này chính là hỗ trợ Video và Lightbox.

Để chèn slider này vào blog thì bạn vào phần HTML của blog tìm đoạn:
     <div id='content-wrapper'>
hoặc bất cứ vị trí nào trong template mà bạn thấy phù hợp, chèn phía trên nó:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/accordion.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML100' locked='true' title='Slider' type='HTML'/>
</b:section>
</b:if>

<style>
#slider h2{display:none}
.container {padding: 10px 0 15px;z-index: 100;display: block;margin: 0 auto;position: relative;width: 930px;}
.js_active .slideshow img{visibility:hidden;}
.slideshow_container{position: relative;margin-bottom:20px;}
.slideshow{background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ46GDz1O3fpJC4W5Ut-Gu4xMrAZyc04Q6HK2UQ8CXu05TxSTGkiJlZw8uXSwYbtj7cuPT6LjaRKCYMcXvqVj_cQCKYKKldw0ZsqQYb5jgmTDScQFtsGecXGPwAoNpMa5QZIADWJMGupk/s12/loading.gif) center center no-repeat;display:block;position: relative;padding:0;margin:0;overflow: hidden;z-index: 2;}
.slideshow .featured{display: none;width:100%;height:100%;position: absolute;top:0;
left:0;z-index: 1;margin:0;padding:0;}
.slideshow .featured_container1{display:block;z-index: 2;}
.slideshow iframe, .slideshow object, .slideshow embed, .slideshow video, .slideshow img, .slideshow a img{display:block;padding:0;margin:0 auto;position: relative;border: none;text-decoration: none;z-index: 1;height:100%;width:100%;}
.auto_height .slideshow .featured img{height:auto;}
.slideshow img, .slideshow a img{z-index:2;}
.slideshow > li > a{display:block;width:100%;height:100%;}
.slideshow .slideshow_video{position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;background: #000;}
.comboslide .slideshow_video{display:none;}
.videoSlideContainer img{cursor: pointer;}
.slideshow_caption{position: absolute;display: none;bottom: 0;z-index: 100;font-size: 11.5px;line-height:1.5em;background: #000;color: #fff;right:auto;}
.slideshow_caption strong,.slideshow_caption h1{display: block;padding: 0px;color:#fff;font-size: 12px;font-style: normal;font-weight: bold;letter-spacing: 1.5px;text-transform: uppercase;}
.slideshow_caption .inner_caption{display:block;background: #000;padding:14px 15px;}
.featured_caption{font-size:11px;padding-top:5px;}
.aviacordion .slideshow{background: #f8f8f8;}
.aviacordion .featured,.aviacordion .slideshow_caption{width:610px;}
.aviacordion .featured{display: none;height:100%;position: absolute;top:0;left:0;
z-index: 1;margin:0;padding:0;background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ46GDz1O3fpJC4W5Ut-Gu4xMrAZyc04Q6HK2UQ8CXu05TxSTGkiJlZw8uXSwYbtj7cuPT6LjaRKCYMcXvqVj_cQCKYKKldw0ZsqQYb5jgmTDScQFtsGecXGPwAoNpMa5QZIADWJMGupk/s12/loading.gif) center center no-repeat;}
.aviacordion .shadow{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SlyEWci6WQrG3j-NGOuW0A25yQIL0wQnf2Hb1esBJk0djv3T2btaRk1HVBCCXOv7Zo-TZijddHtkZXoXcHrr6PVkJA1BO2o0Z7WfQzkVOPqiBkZLfcf8YoH_qjAbgugDph3xf5OMgz0/s40/shadow.png) repeat-y scroll left top transparent;height:100%;width:15px;position: absolute;left:-15px;top:0;}
.aviacordion .featured img{position: absolute;top:0;left:0;height:auto;width:auto;}
.aviacordion .heading_clone{position: absolute;z-index:4;bottom:0;left:0;background: #000;}
.aviacordion .center_helper{height:100%;display:table;}
.aviacordion .heading_clone h1{text-transform: uppercase;padding:15px;background: #000;color:#fff;font-size: 12px;display: table-cell;vertical-align: middle;}
.pptimeleft{text-align:center;font-size: 11px;}
.ppfsenter{display:none !important;width:0px;}
.comboslide .slideshow_overlay{display: block;width:100%;height:100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyGK2O4JrwpNZX61e2wqE4GGkGdU3tsGGFVohfq-YHM0DIh-cvILhZQATlisaQYUUkVI8i-PwXgKSBvDBmRcyLtlMdBgWWgMam86qWgEI2VA4TL-x4WmAuPf3QANjlQwvw_V9f2W90qw/s90/video.png) no-repeat scroll center center transparent;z-index: 3;position: absolute;opacity: 0.5;cursor: pointer;top:0;left:0;}
.videoSlideContainerEmbed video, .videoSlideContainer video{left:0 !important;top:0 !important;}
.rounded_corner{height:5px;width:5px;position: absolute;z-index: 200;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJpaOL35HoyXFQxshAFrxJa-JUEOMiSIdUKuFx-pT96mjqYebsENO9mfsg3TYnBjv5f7Nr0KZr1Mspg2mgB1ZvGesP_YIx9UUQREF1sIClRbKDIiJE7b5zaZcQZxHUcp1TtIalDgcR0M/s20/rounded_corners.png) no-repeat scroll top left transparent;}
.rctl{top:0;left:0;}
.rctr{top:0;right:0;background-position: top right;}
.rcbl{bottom:0;left:0;background-position: bottom left;}
.rcbr{bottom:0;right:0;background-position: bottom right;}
.aviacordion .bottom_shadow, .slideshow_featured .bottom_shadow {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpo8YvJkcbofOoVKK9S3T540RfAIH4ruGKG3g2MJssf5wNZvn8TkIEXGk3ipVS3C2nzyqy4dUIPPVeN89hzve_H-sMpqugu21dwaLwWMW6mEegNNT2PB1vZSPD4b9CmBwv0NSYjdAxtN8/s953/shadow-featured.png) no-repeat scroll left top transparent;bottom: -5px;height: 11px;left: -12px;position: absolute;width: 954px;z-index: 1;}
.aviacordion .rcbl, .aviacordion .rcbr, .slideshow_featured .rcbl, .slideshow_featured .rcbr{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOs9uNHQVaQVfb7TsCK9xHCDPBksgdQ2P4xXUtB429rcQRDi-smbLdNNUJkfyJa_hORZQDvB1aTFxhr_kbCLUdVd35v8_fFeiUxEplbvWqIhgpCuh-ZyC2N8kHmBf4fxF539ckhKgdugo/s20/rounded_corners_shadow.png);}
.medium_image .slideshow_caption{width:360px;}
.big_image .slideshow_caption{width:520px;}
.small_image .slideshow_caption{display: none !important;}
.aviacordion .lightbox_image .image_overlay_effect_inside,.slideshow_featured .lightbox_image .image_overlay_effect_inside {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCKJMECvtJ4Uh-xWvZCvIaTx5-Nr9mbm_A2eNVS6i2GR3vAtr2CdDe0tdarkm-9W2sHNHvVvjZ1SZxVDoPs2JRP2TFZsnUfGXq2tKQUL44eBBDpYdG99txWL7F0kmtnDUOnhWqXfkkFQ/s90/magnify.png) no-repeat scroll center center transparent;}
.lightbox_video,.lightbox_image,.image_overlay_effect,.image_overlay_effect_inside {bottom: 0;left: 0;position: absolute;right: 0;top: 0;z-index: 2;}
</style>

<div class='container'>
<div class=' preloading autoslide_true autoslidedelay__5 slideshow_aviacordion aviacordion slideshow_container'>
<span class='rounded_corner rctl'></span>
<span class='rounded_corner rctr'></span>
<span class='rounded_corner rcbl'></span>
<span class='rounded_corner rcbr'></span>
<span class='bottom_shadow'></span>
<ul class='slideshow' style='height: 370px; width: 930px;'>
<li class='featured featured_container1' ><a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHDBIpdJR8yxtsgDzWpqUSpKcQE_cuBBsBebHkaIyh6LbLDaCpb57YtCl7iroZi2hXqZEPtlkciSXpOpkhlTYq6M8GULIH4z201_0h0rpHp_nl516Eobf47IjePad-cVvG2CImyDb_rQ/s1024/1.jpg'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHDBIpdJR8yxtsgDzWpqUSpKcQE_cuBBsBebHkaIyh6LbLDaCpb57YtCl7iroZi2hXqZEPtlkciSXpOpkhlTYq6M8GULIH4z201_0h0rpHp_nl516Eobf47IjePad-cVvG2CImyDb_rQ/s610/1.jpg' />
<div class="slideshow_caption">
<div class="inner_caption">
<h1>Yep you guessed right, this is the image caption title!!</h1>
<div class="featured_caption">This is the image caption text. you can choose to omit it if you want. In that case there will be no caption text overlay once you hover over this image.</div></div></div></a></li>

<li class='featured' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXOil7MEEgdOOR-0tI4AOaqYwI3tYXe25jT0sFd7mXH3cxe8NS_9ktTNy-3AbFgVvjMHlzxMXg4UUW_TMDciw-KeEslPB4TwzyPmlWkMU5KMQcEFoWDeC6nvoRSMiR3kVF8_5x6BVkX6k/s610/2.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/embed/A8sJUwQZ0lo?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe></div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Defense of the Ancients</h1>
<div class="featured_caption">As you can see its quite simply to link to whatever content you want.</div></div></div></li>

<li class='featured'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTuQ7etTpyj_PFxCgHp-WdPQd6f-zr48V839m_gVRUZobgvYucvVROHXNgRv4jCqTgt_FfFcGfT12yhQbh2Qfj808g6ePTOsQj835BY8nPXcGAj-WwsZ_tceN5rzXCJbMNyIF8xPWK7c/s610/3.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/embed/YfqIOOKdx6k?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe></div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Directly Embed Video</h1></div></div></li>

<li class='featured'><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyzBFUZc2uMKwgKcGUQEDSOgquSpWDH6OUt9v9hjHrSWEp3nxFKQnW5dYyqKAA2wFHLx1tUgVEouMfrfyoVlRhZwBpGxHxRNdPjEuE6brw9CMUJ1oilaFwmOiu0vP01lelwugcB2uY5s/s610/4.jpg' /></a>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Link to a page. In this particular case its the Portfolio 4 Column page! </h1>
<div class="featured_caption">This time we have chosen to link to an external page, namely the portfolio page. Want to see it? Click the image! </div></div></div></li>

<li class='featured'><a href='http://vimeo.com/7809605'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3c2UbGs45ffajOSs4B8ryWVmaUXiGGAu2ZvBrMxvtZNZhZLZIgHPKW2Gd3Il6IQk3wnUMweASzC3nKyYsX_oWELSyJ1mOflrK7LYJRCBhAxS4YVTHNsW4z3vUaz7JTK6DKE1l3FDLRo4/s610/5.jpg' /></a>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Its a Lightbox link, once again</h1>
<div class="featured_caption">This one is a lightbox link to a video site. As you can see you can link to almost everything you can imagine ;)</div></div></div></li>
</ul>
</div>
</div>

Lưu ý nếu trong site của bạn đang dùng các thủ thuật jQuery khác thì hãy xóa dòng màu đỏ. Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích mới đoạn code này.

Chỉ việc chỉnh sửa lại nội dung Slider theo ý bạn và kiểm tra kết quả.