Trình diễn Gallery ảnh trượt ấn tượng

Nếu bạn yêu thích nhiếp ảnh và có một bộ sưu tập ảnh đẹp, thì đây là cách phô diễn khá ấn tượng.

Xem Demo: http://taotrangblogspot.blogspot.com/

Cách thực hiện


1/ Click chuột vào Template --> Edit HTML

2/ Click chuột vào bất kỳ chỗ nào trong khu vực code, nhấn Ctrl-F để mở hộp tìm kiếm Search. Trong hộp tìm kiếm, dán vào </head>

3/ Ngay trên/phía trước  </head>, dán vào code sau:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

4/ Click chuột vào "..." của dòng code <b:skin>...</b:skin>, kéo xuống sẽ thấy một đoạn sẽ thấy ]]></b:skin>

(Hoặc giản đơn hơn trong hộp tìm kiếm, dán vào code ]]></b:skin>)

5/ Ngay trên / phía trước ]]></b:skin> dán vào những dòng code sau

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E; 
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ4k8OFM4RfVL5d_aJ7O9yolXrNpyJWOuncaplQCr0M-sXgH2eDnj-9CqWBX0kPlP5tXr2j6FDJNA_GUMY_Xu1_ha4e5SOjS_S4VC4evrp3Y0r9WOL8s8mcLOClkhI87FHq3B-C16hFTy1/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


6/ Click chuột vào Save template để lưu lại

7/ Click chuột vào Layout --> Add a gadget --> HTML/JavaScript

Một cửa sổ hiện ra, dán những dòng code sau vào khu vực màu trắng phía dưới chữ "Content"

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Thay thế Image URL bằng địa chỉ ảnh của bạn trên blogspot (Khi bạn post hình trong bài đăng/trên blogspot, mỗi ảnh sẽ có địa chỉ URL, bạn click chuột và đó sẽ thấy hiện ra Sao chép URL hình ảnh. Đó chính là cái bạn cần copy)

Địa chỉ URL ảnh thường có dạng như sau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdkMIneT1HWr6tdNLv16RNtFV60BRKWkqPktZxGS-pnv6ENeCh8HoN7pY8w40oe1s5I2p5uzFuH0YoETsIAVu92SgpE2ajMenFLZDdnlef_3jpC4dS3HbqV_qVo5EMnwvWGgf-0LCJ2Ys/s1600/a+labang+1.jpg

Ghi chú: Ảnh cuối cũng chính là ảnh đầu

Nếu bạn muốn trình diễn Sldeshow ảnh này trong một bài đăng (post), thì bạn nhấn New post (Tạo bài đang mới), một trang mới hiện ra, bạn lưu ý hai nút Comepose và HTML, Click chuột vào HTML, sau đó dán những dòng code trên vào phía dưới sau </div>

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

(Source/Nguồn tham khảo: http://helplogger.blogspot.com/)