Thêm Stylish jQuery Photo Gallery với hiêu ứng mô tả.

Mặc dù không phải là một người viết code nhưng với mong muốn đem lại thật nhiều thủ thuật hay cho cộng đồng blogger, nên hôm nay mình sưu tầm được một bài viết về thủ thuật Thêm Stylish jQuery Photo Gallery với hiệu ứng môt tả

cho blogger từ nguồn ở nước ngoài. Với một ích kiến thức anh ngữ nên mình có thể sưu tầm và phiên dịch lại cho các bạn dễ hiểu và có thể áp dụng thành công cho blog của mình. Còn về vấn đề bố cục của tiện ích hay những vấn đề của tiện ích này thì chắc mình không thể trả lời cho các bạn được. Nếu có thắc mắc thì mình sẽ cố gắng tìm câu trả lời cho các bạn từ các bác thạo về viết code để trả lời cho các bạn. Nào bây giờ chúng ta cùng bắt đầu nào...!!!

Bước 1: Đăng nhập vào tài khoản blogger của bạn và chọn nút có hình mũi tên giống như hình bên dưới.

Bước 2: Chọn tiếp mục Layout( Bố Cục) giống như hình bên dướu nhé!

Bước 3: Chọn "thêm tiện ích"(Add Widget) và chọn tiếp HTML/Javascript.

Bước 4: dán đoạn code dưới đây vào.

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

 //Speed of the slideshow
 var speed = 5000;
 
 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
 
 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 
 
 $('#gallery li:first, #excerpt li:first').addClass('selected');

 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
  clearInterval(run);
  return false;
 });

 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
  run = setInterval('newsscoller(0)', speed); 
  return false;
 });
 
 //Next Slide by calling the function
 $('#btn-next').click(function () {
  newsscoller(0); 
  return false;
 }); 

 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
  newsscoller(1); 
  return false;
 }); 
 
 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(
 
  function() {
   clearInterval(run);
  }, 
  function() {
   run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

 //if prev is set to 1 (previous item)
 if (prev) {
  
  //Get previous sibling
  var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
 
 //if prev is set to 0 (next item)
 } else {
  
  //Get next sibling
  var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
  var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }

 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');
 
 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');

 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }

</script>
<style>

#slider {

 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}

#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
  float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }
 
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  
 
 list-style:none;
 margin:0;
 padding:0;
 
 z-index:10;
 position:absolute;
 top:0;
 left:0;
 
 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
  padding:5px;
 }
 
.clear {
 clear:both; 
}
#btn-prev {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-prev:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-prev:active {
   border-top-color: #238acf;
   background: #238acf;
   }
#btn-next {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-next:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-next:active {
   border-top-color: #238acf;
   background: #238acf;
   }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8UqJxzk3Ylp1ZwJP6gbtfKZHTpmPN0_dlQeNAQvgtunm8HWMti9C-9zfzSgQqhnrlrYi3fjuF39WWqnHKZWvLVYYy5lR853_QNtvjW1tZ9TBLSQhHpsCL-Ufmt5PfizQLZefr35Pcpo/s1600/btrix_image2" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvQgbRpOprV7WqVNWJDCS0LeRWfPKW1_MJ0Wjtd0IKEba6dfaNtrKP51xTvaZje7cKJi4oWNdv45dkZQS9kZ9Ej9IfpMIWaJadvzELxfOB01Y_2LszuXvmwkm8nsTlCyCHdxK7vi10xI/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlvV0dB9RFHN9aEmmkpQLAC8ugRiPstv9Uab1Ac0qeFivofjqR0jekqr7iMo7yc5n5F2VChMKjdNtvPpVWRjpcNBqdE5-ahAdtqHjZllo9mIempOylokXapdj6IKadZAAmvSTRSGVPp8/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7I9CFK9WqVIHCe4ygGbJkzi9G-06UEBA0tLxNIgqR6MXk73mYD5RUvYyG6PULB5VbyKYHwTusenWXK0IPhvxGbRLDMYfc4gDVd5FZQK56unPGie4qRPD7QbXTc7SWXIF1suVojIxh-0/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnX5XEDEzpnvDAmZfYcfzwPKr4ycjX5cq-jmh5QjaSJaSJUi_h46eV41udtF3c05l7Acni_AAoJ6iNLJvmuH_PEL8A36W5Ljvdbz2qNA1y30CPKZ-RBj6w3pq_OixxkxJWFA5hD_HzEgM/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
 </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
  <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
  <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

<div class="clear"></div>

Lưu ý: thay thế các đoạn code màu đỏ trong đoạn code trên bằng nội dung bạn muốn hiển thị cùng với ảnh nhé!

Bước 5: Lưu lại và tận hưởng thành quả nhé!