Trình chiếu nội dung và hình ảnh sử dụng Mootools

Theo yêu cầu của bạn Hoang Lee tại blog ebeat5.blogspot.com, bạn ấy muốn tiện ích Feature Slideshow trên blog ebeat5.blogspot.com có nút chuyển slide sang trái và sang phải giống như trang playrecords.net.

Trang playrecords.net được tạo trên nền Wordpress nên kiểu slideshow rất phức tạp. Sau khi nghiên cứu, tôi đã tích hợp nó thành một gói slideshow tương thích cho blogspot và có một số điều chỉnh như tạo thêm phần tiêu đề và tóm tắt cho từng slide ảnh để người đọc có thể nắm bắt thông tin cơ bản về slide ảnh. Slideshow này có sự hỗ trợ của thư viện Mootools giúp cho kiểu trình chiếu nội dung và hình ảnh mượt mà hơn.

Xem Demo.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML và đặt đoạn code dưới đây vào trước thẻ </head>.

<style type="text/css">
#myGallery,#myGallerySet{width:560px;height:200px;z-index:5;margin-bottom:20px;margin-top:15px;overflow-y:hidden;}
.jdGallery a{outline:0}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sd-vsq19XSgjMiE1TilV21gfT6SDr5FbKd2k1SeAbkENjp-AmLedEd6u5Y449uw91ciBl688DYERGbs7snpiUBZ0FRxA5C555fJImggPS87L4NAKG-Pdvgy3cQkIAqqcPRFczhjaSrU/s0/loading-bar-black.png')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sd-vsq19XSgjMiE1TilV21gfT6SDr5FbKd2k1SeAbkENjp-AmLedEd6u5Y449uw91ciBl688DYERGbs7snpiUBZ0FRxA5C555fJImggPS87L4NAKG-Pdvgy3cQkIAqqcPRFczhjaSrU/s0/loading-bar-black.png')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:50px;background:#343433;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:80px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche1.png') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche2.png') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktkgrdLjwiLoNMsYn1Fe5EmNZkaWaKV0cpVM5BbVPBcjsdiILcitXIOLuUhw-Xcx1gYTM2DQk-kmP7aerZxCgLQB3cJuYfJyS1X2SkKyCulUVbC5aZfggCLzGyg45tQr1Ab9Bvb_5PuA/s0/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNOnJso0Wv2i3sGz_L6Tm2z2_aQWhNDZjb_DL6ylnAJ_zKlyBZfH4ff69fPhNdMJ0G92O81gES1T-vyOAOovzIy8UBqn7AAK83l_MrAOxTxQXxBHy2oh279DX52pFovvmvbWTL9_TpPU/s0/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js' type='text/javascript'></script>
<script src='http://hacodeproject.googlecode.com/files/mootoolmore.js' type='text/javascript'> </script>
<script src='http://hacodeproject.googlecode.com/files/smoothgallery.js' type='text/javascript'></script>
<script src='http://hacodeproject.googlecode.com/files/slidetransition.js' type='text/javascript'></script>

Trong đoạn code trên ở dòng đầu tiên chú ý các tham số width:560px;height:200px thể hiện chiều rộng và chiều cao cho panel slide (bạn Hoang Lee có thể điều chỉnh 200px thành chiều cao tương thích theo ý thích của bạn).

Bước 2. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript và tiện ích này có thể nằm ở trên hoặc dưới phần Blog Posts

<!-- Featured Content Slider Started -->
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 1</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 1' title=''></a>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzBUcdypsx5vCbnUhBOAqtT-LXIbte8YajuZRf9tQTSwFTj1a57zSUh7D_Fhi4DpxfE79jlKPBtxWvuM9yYesrvbMtNUx6t9FFF-qJXdciNypTIUuW5SdfWvSg2KTpUm5dfHO70CXuts/s0/1.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 2</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 2' title=''></a>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k1E4-6scJiXt7rCAgwyERRO-KANtd_rDTCPQusymOThxw2uFPiQ5uOiTTQ8_LSN2z9R4LDzWjF1xqULMe_CCUg88Pc3hV1tmfuiblAU0gpn8SKob81B_y02hcPOWqRvg0z0g2Of_XPU/s0/2.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 3</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 3' title=''></a>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXswxTzZxQnRJRSRc1NmUQAWgr_Mf0_OOXQI_LsF1k-hI0tnpHe4DWl4DKvYwCVjvZm6bNlmSzZF0GKz1mYvnRTdpS21KU7P1HeQW1DlaZfv7gR0U9RHiG77VSMGg5J790UvHsp_kcpI0/s0/3.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 4</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 4' title=''></a>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUL4Lk677g5FdC0lRb5XT5VixxK3FsxplRBiuyWXa8Apt0o3asrvg33HV0EvCgds7jbMJ7eDVcz7HphO9coBbFbuyefu8ufzvjCTR6V3UT4lLAXyxuY9EXKc_mMNX3tUzhpVd-YzkooU/s0/4.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 5</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 5' title=''></a>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85VHhHete7cC_XObiH0wpoXSNEssRA9PN7g797PJuFI9Vyo8QUGFhIXsebH3aARuc_joWDBosX9NDO6aJMfW5OBz12G4gA-fQ64HvRKCKeNUOWDKf60MkttguuFX8gBU0UVxTgfbuPP0/s0/5.jpg' style="width:560px;height:200px"/>
</div>
……. // Xóa dòng này nếu bạn không muốn thêm slide
</div></div></div></div>
<!-- Featured Content Slider End -->

Bạn có thể thêm nhiều slide khác vào dòng …. với định dạng HTML như sau:

<div class='imageElement'>
<h3>Đây là tiêu đề bài viết n</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết n' title=''></a>
<img alt='' class='full' src='URL_hình ảnh' style="width:560px;height:200px"/>
</div>