Tạo chú thích cho ảnh trong bài viết blogspot

Bạn có dịp tham quan những danh lam thắng cảnh trên thế giới và đã chụp lại rất nhiều ảnh đẹp. Bạn muốn chia sẻ những tấm ảnh đó với bạn của mình trên blog. Nhưng không phải ai cũng biết địa danh hay tên gọi của những nơi đó nên khi post ảnh lên bạn phải tạo chú thích cho ảnh.

Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.

Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?

Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.

Các bạn đặt code này vào trướcdòng ]]></b:skin>.

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Xong rồi bạn lưu template lại.

Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/s1600/Nha+hat+Opera.jpg" /></a></div>

Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.

<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

Chúc các bạn thành công.

Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script

Tomorrow again là một script do Dhteumeuleu phát triển dùng cho gallary ảnh với một hiệu ứng khá độc đáo. Bạn có thể xem Demo tại trang Dhteumeuleu.

Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript' src='http://hacodeproject.googlecode.com/files/tomorrowagain.js' ></script>

Hoặc nếu bạn không muốn sử dụng file nguồn như trên thì sử dụng đoạn code sau đây.

<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,

run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}

this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>

Bước 2. Đặt đoạn CSS sau đây vào trước thẻ </head>.

<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}

/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>

Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.

Bước 3. Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.

<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Đây là một ví dụ Demo: 330x490 | 490x320

Hiệu ứng trượt hình ảnh xoay vòng sử dụng jQuery

Tiny Circleslider là một plugin jQuery tạo ra hiệu ứng xoay tròn hình ảnh.


Hãy ghé qua trang nhà của tác giả hiệu ứng này để tìm hiểu thêm. Ở đây tôi xin giới thiệu cách thực hiện một trong những ví dụ minh họa cho hiệu ứng này.

Xem Demo.

1. Trước tiên, đặt phần css và js dưới đây vào trước thẻ </head>.

<style type='text/css'>
#rotatescroll{height:300px;position:relative;width:300px}
#rotatescroll .viewport{height:300px;position:relative;margin:0 auto;overflow:hidden;width:300px}
#rotatescroll .overview{ left:0;list-style:none;margin:0;padding:0;position:absolute;top:0}
#rotatescroll .overview li{ float:left;height:300px;position:relative;width:300px}
#rotatescroll .overlay{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eX_AA-srWjtcfEDUWibojFtmzxxvb7UIshX5fifTido_kBQxLvF1SFqnLSYPfCzFwBvKG8TYZM6B0Oog9-U_rpiD_Y6SsmW_vq_w5xw1pXKh9nGSh4ADa-3cA8Dx9c4RAabDwqonDCA/s0/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x9qQyt5IxZz_M_G73Xo93JLVPT8MCzpp_SrCuLq__1cvJsXHb-F8OdBeKwVL8OpMZ8361Hh1qiM3kvfx1vPk9nTaSMN1NzBJmqBbCafrblrO8NZKk8QG-01SfbuzyfWn7l-3dHo9fQk/s0/bg-thumb.png) no-repeat 0 0;cursor:pointer;height:26px;left:137px;position:absolute;top:-3px;width:26px;z-index:200}
#rotatescroll .dot{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvMXNxdADVTn6PwLnJ3y5l-di6LU5qRsdES8M33SPfxuHsaEiaHtyQ9W7D2-l4OU8Pny1H0zA7UhiUJM-b3ioYp9xBuPxBe-Qjgd7VzbprfZAyNZ1vj2o0qDds1z1DAHy7naZK49NNuM/s0/bg-dot.png) no-repeat 0 0;display:none;height:12px;left:155px;position:absolute;top:3px;width:12px;z-index:100}
#rotatescroll .dot span{ display:none}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

<script scr='http://baijs.nl/tinycircleslider/js/jquery.tinycircleslider.min.js' type='text/javascript'/>

2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web/blogspot.

<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL_hinh 1" /></li>
<li><img src="URL_hinh 2" /></li>
<li><img src="URL_hinh 3" /></li>
<li><img src="URL_hinh4" /></li>
<li><img src="URL_hinh5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>

Bạn cần đưa liên kết các hình ảnh vào cấu trúc nêu trên.

Để hiệu ứng hoạt động thì cần đặt đoạn js bên dưới vào phía sau phần HTML.

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>

Nếu muốn hiệu ứng trượt tự động thì điều chỉnh js lại như sau:

$(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true });

Hiệu ứng phóng to hình ảnh bằng CSS

Có nhiều cách tạo hiệu ứng phóng to hình ảnh như sử dụng CSS, Javascript hoặc kết hợp cả hai, nhưng nếu bạn không muốn mất nhiều thời gian thì có thể sử dụng một phương pháp đơn giản hơn.

Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.

Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:

<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />

Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:

<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>

Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.



Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.

Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery (kiểu 2)

Lightbox là một script đơn giản được dùng để tạo chế độ Preview hình ảnh trên trang web. Hôm nay xin giới thiệu hiệu ứng Lightbox của Leandro Pinho lấy ý tưởng từ Plugin Lightbox2 của Lokesh Dhakar.

Xem Demo.

Các bước thực hiện như sau:

1. Đặt phần code dưới đây vào trước thẻ </head>.

<style type="text/css">
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

#gallery {
background-color: #444;
padding: 10px;
width: 550px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }

</style>
<script type="text/javascript" src="http://huynhatha.250free.com/js/jquery.js"></script>
<script type="text/javascript" src="http://huynhatha.250free.com/js/jquery.lightbox-0.5.js"></script>

<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
</script>

Chú ý, bạn nên tải về file jquery.js và jquery.lightbox-0.5.js và upload lên free hosting để sử dụng cho trang web của bạn, tránh hạn chế băng thông.

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web, giữa 2 thẻ <body>, </body>.

<div id="gallery">
<ul>
<li><a href="/image1.jpg" title="Text 1"><img src="/thumb_image1.jpg" width="72" height="72" alt="" />a>li>

<li><a href="/image2.jpg" title="Text 2"><img src="/thumb_image2.jpg" width="72" height="72" alt="" />a></li>

<li><a href="/image3.jpg" title="Text 3"><img src="/thumb_image3.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="/image4.jpg" title="Text 4"><img src="/thumb_image4.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="/image5.jpg" title="Text 5"><img src="/thumb_image5.jpg" width="72" height="72" alt="" /></a></li>
</ul>
</div><!-- / gallery -->

Chú ý, trong đoạn code HTML ở trên, bạn cần thay các liên kết hình ảnh đánh dấu màu đỏ bằng liên kết hình ảnh chuẩn cho chế độ Preview, và thay các liên kết đánh dấu màu xanh bằng liên kết ảnh đại diện (thumbnail) tương ứng. Text 1, Text 2,… là các mô tả cho hình ảnh, bạn cần thay đổi cho phù hợp.

Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery

Lightbox là một script đơn giản được dùng để tạo chế độ Preview hình ảnh trên trang web. Hôm nay xin giới thiệu hiệu ứng Lightbox của Pirolab phát triển dựa trên thư viện jQuery, có chức năng tự động chỉnh lại kích cỡ hình ảnh dự trên kích cỡ cửa sổ trình duyệt.


Hiệu ứng này tương thích với các công cụ trình duyệt như FireFox 2-3, Opera 9.0, Chrome, Safari (Mac/Windows), Internet Explorer 6-7-8.

Xem Demo.

Sau đây là các bước thực hiện:

1. Gắn các phần code dưới đây vào trước thẻ </head>.

<link href="http://www.pirolab.it/pirobox/css_pirobox/demo3/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" />
<style type="text/css" >
.demo a{ float:left; margin:0; padding:0; margin:5px 0px 5px 19px!important; margin:5px 10px 5px 10px; display:block; border:3px solid #efefef;} .demo a:hover{ border:3px solid #fff} .demo a img{ float:left; margin:0; padding:0; margin:0; background:url(http://www.pirolab.it/pirobox/css_pirobox/bg_tms.jpg) no-repeat;} ul,li,dl,dt,dd{ list-style-type:none; margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() { $().piroBox({ my_speed: 400, //animation speed bg_alpha: 0.1, //background opacity slideShow : true, // true == slideshow on, false == slideshow off slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended) close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox }); });
</script>

Trong các phần code trên, bạn có thể chỉnh các thông số cho tốc độ slide hình ảnh.

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web, nằm giữa 2 thẻ <body>, </body>.

<div style="float:left; width:550px; display:block;">
<h2>Click chuột trái vào Thumbnail để phóng lớn hình</h2>
<div class="demo"><a href="/images/1.jpg" class="pirobox_gall" title="Mo ta anh 1"><img src="/images/1s.jpg" /></a></div>
<div class="demo"><a href="/images/2.jpg" class="pirobox_gall" title="Mo ta anh 2"><img src="/images/2s.jpg" /></a></div>
<div class="demo"><a href="/images/3.jpg" class="pirobox_gall" title="Mo ta anh 3"><img src="/images/3s.jpg" /></a></div>
<div class="demo"><a href="/images/4.jpg" class="pirobox_gall" title="Mo ta anh 4"><img src="/images/4s.jpg" /></a></div>
...
</div>

Chú ý: Các file ảnh đánh dấu màu xanh là ảnh lớn cho chế độ Preview, các file ảnh đánh dấu màu đỏ là ảnh thumnail đại diện, thêm thuộc tính mô tả ảnh nếu cần. Bạn có thể thêm số lượng ảnh tùy thích và chỉnh sửa cấu trúc HTML cho phù hợp.