Thứ Ba, 22 tháng 1, 2013

TẠO SLIDESHOW

Unknown    No comments


Với kiểu 5 này, các ảnh lần lượt trình diễn với hiệu ứng thu nhỏ và phóng to rất đẹp mắt.
Ở mỗi ảnh bạn cũng có thể ghi vài dòng chú thích cho ảnh.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.












Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.


<center>
<style>           
.textboxstyle {
font-family:Arial;
font-size:16pt;
color:black;
text-align:center;
vertical-align:top;
}

.textboxbackgroundstyle {
background-color:white;
padding:5px;

/* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;

/* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #818181;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');

border-style:solid;
border-width:1px;
border-color:white;
}
</style>

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
           
<script>

var imgurl= new Array()
var message= new Array()
var thislink= new Array()

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Các link ảnh theo thứ tự
imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtb01ngLWKTttH10tnVAZcn7Ae7UVp-aoHPq76MLMLbga1RlY_pBN69S9Et55g0JDnsydwkl3JiYUl4xlogIptIHPKlDebZf7HX0-4v5waXB03qasyf2MvMh5SUXMqEUY0Qpm6iJRVcWV/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xENX0hUDkAAkdh88XE8L_H6nuCrnA2v0ubc_Y7HqWFOHfWHN12Y7BBaInER-pYXg7i_s7fexERwob8gh6fURPVxQuHHbzCYBv2oSNJxD5hvY5fO6Pydf_LR5rzWZJoxu2voMiEuEj9-2/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgful3ORoCAp7wVPTInoJLzX7GHEXKtiDlPnJSM5fBeMyMjLlaoTbwhTeSN1qenxpK4AUXfzcxzo8I9u8bg4h8wcL1bKhhDrFTA1KXHGvcj7NkYB_yAoUZS0DY3y_XzMkUCyUTwHxLpbuif/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX_PIc38oEyLwOrYiKzjAKXWz3lTUklefXFgMaXztMMPkEN0qZpUag9VSvUWfNkhZufbWvNGaheORAaMAfCHGGJ-XEq2iIxzFf-4BoPxbd1sp89g6GqmJdZsvoHEX1QePaEfDeD6d269ve/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftJw6xZhYh02K0q3PPKd1KWe0TnnaIqPElPm1Yq-m0nVSOyj1McmTs9ZvMfaccw__qP74hBv-lG-Szdn8c7_cR9yW42ozl2ng0P3-SiqGqm-92EHabjepxIOZSh4GJsd3R02w-0FMg7Im/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIL_IO8kdV2uNwZ7M6R5C4Jw2XmfOt1uiEd7DWgXjIKeIC4VMWWaW2El07XAd5uPHSEyzmn9kQZD3fFosYFirgCr9CfTNL17Ub-E4CCcxTAwaJn3DBROYJY6b4WXaVHDl8yyqxRGbwOoV/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEzSEPI7iSpQHmiTSGkDSbsciXlnih01uQIgE89FmD9np-SAg6XgMm4fQBMNELFNiZsPjmqS1Il9BPqSMyjzlLbjl4k0JGdLSprbjBma2heHfsTd7hU9uxF19WfFbopGOHt853VIBwAVL/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUvgDBIsCiyHV4PmDBahILZLry-oDaJfoUJebUYJI7GPe_X6fNYuXXai2c8X_8LRsvB757ZiqUIuQ3xnDktjtKCJQBK_9D6JxtVKjmlLPLUsWxrjAtIUmWZXAZ9IuMNLaZ3iVG8tE-bAlM/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0GoBEca0dMtVHDYP9Mx6BmxRVCjHZbI_PnqwXB8C1EYb_E0EqnavPuSV9PFJnAy9eY5LOdWEEyU3uxwwS3G-lsjrVlpaEfyerZwLZoohddXitJgPsrj2P1Tvc0Z2ZQihpcpBCSMYwcJDc/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiL3h21eGBEs84OTW5YWI5MmSc2FWdcCE8rpj2bD5G9y6iaRZLOvsvZCC02_r0YzVhUQyIYQYnN_byPbWOW_MW-7zmNJ1GNw2zhT8hYWzVt3fZQ37e7hiJAhQXD4YA54nC5MDvdI_m15ix/s1600/0069.gif"


// Ghi chú cho ảnh
message[0]="Welcome to my Blog"
message[1]="thienhieu"
message[2]="Cám ơn các bạn đã ghé tham quan"
message[3]="Chúc các bạn luôn vui khoẻ"

// set the links corresponding to the images above (no more no less than the images above)
// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến
thislink[0]="#"
thislink[1]="#"
thislink[2]="#"
thislink[3]="#"

// Chiều rộng của ảnh (pixel)
var imgwidth=240

// Chiều cao của ảnh (pixel)
var imgheight=320

// set stillstand of picture (seconds)
var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////


// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000

var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
            preloadedimages[iii]=new Image()
            preloadedimages[iii].src=imgurl[iii]
}

function shrinkpic() {
            document.getElementById("textbox").innerHTML=""
            if (i>0) {
                        i-=step
                        document.getElementById("picdiv").style.width=i+"px"
                        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
                        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
                        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
                        tmr=setTimeout("shrinkpic()",20)
            }
            else {
                        i_imgurl++
                        if (i_imgurl>=imgurl.length) {
                                    i_imgurl=0
                        }
                        document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
                        i=1
                        tmr=setTimeout("enlargepic()",20)
            }
}

function enlargepic() {
            if (i<=imgwidth) {
                        i+=step
                        document.getElementById("picdiv").style.width=i+"px"
                        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
                        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
                        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
                        tmr=setTimeout("enlargepic()",20)
            }
            else {
                        i=imgwidth
                        showmessage()
            }
}

function showmessage() {
            document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
            tmr=setTimeout("shrinkpic()",stillstand)
}

function gotothislink(){
            document.location.href=thislink[i_imgurl]

}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=shrinkpic
</script></center>
<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->


Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này 
imgurl[n+1]="Link ảnh"


Dán tiếp xuống phía dưới các link ảnh, trong đó n là số thứ tự cuối cùng của ảnh. Ví dụ ở code trên tôi có SlideShow gồm tất cả 10 ảnh được đánh số từ 0 - 9, nếu thêm một ảnh nữa thì ảnh cuối cùng của tôi là 10 thì SlideShow sẽ có tất cả 11 ảnh...thì code sẽ giống như vầy:
....................... 
imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtb01ngLWKTttH10tnVAZcn7Ae7UVp-aoHPq76MLMLbga1RlY_pBN69S9Et55g0JDnsydwkl3JiYUl4xlogIptIHPKlDebZf7HX0-4v5waXB03qasyf2MvMh5SUXMqEUY0Qpm6iJRVcWV/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xENX0hUDkAAkdh88XE8L_H6nuCrnA2v0ubc_Y7HqWFOHfWHN12Y7BBaInER-pYXg7i_s7fexERwob8gh6fURPVxQuHHbzCYBv2oSNJxD5hvY5fO6Pydf_LR5rzWZJoxu2voMiEuEj9-2/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgful3ORoCAp7wVPTInoJLzX7GHEXKtiDlPnJSM5fBeMyMjLlaoTbwhTeSN1qenxpK4AUXfzcxzo8I9u8bg4h8wcL1bKhhDrFTA1KXHGvcj7NkYB_yAoUZS0DY3y_XzMkUCyUTwHxLpbuif/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX_PIc38oEyLwOrYiKzjAKXWz3lTUklefXFgMaXztMMPkEN0qZpUag9VSvUWfNkhZufbWvNGaheORAaMAfCHGGJ-XEq2iIxzFf-4BoPxbd1sp89g6GqmJdZsvoHEX1QePaEfDeD6d269ve/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftJw6xZhYh02K0q3PPKd1KWe0TnnaIqPElPm1Yq-m0nVSOyj1McmTs9ZvMfaccw__qP74hBv-lG-Szdn8c7_cR9yW42ozl2ng0P3-SiqGqm-92EHabjepxIOZSh4GJsd3R02w-0FMg7Im/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIL_IO8kdV2uNwZ7M6R5C4Jw2XmfOt1uiEd7DWgXjIKeIC4VMWWaW2El07XAd5uPHSEyzmn9kQZD3fFosYFirgCr9CfTNL17Ub-E4CCcxTAwaJn3DBROYJY6b4WXaVHDl8yyqxRGbwOoV/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEzSEPI7iSpQHmiTSGkDSbsciXlnih01uQIgE89FmD9np-SAg6XgMm4fQBMNELFNiZsPjmqS1Il9BPqSMyjzlLbjl4k0JGdLSprbjBma2heHfsTd7hU9uxF19WfFbopGOHt853VIBwAVL/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUvgDBIsCiyHV4PmDBahILZLry-oDaJfoUJebUYJI7GPe_X6fNYuXXai2c8X_8LRsvB757ZiqUIuQ3xnDktjtKCJQBK_9D6JxtVKjmlLPLUsWxrjAtIUmWZXAZ9IuMNLaZ3iVG8tE-bAlM/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0GoBEca0dMtVHDYP9Mx6BmxRVCjHZbI_PnqwXB8C1EYb_E0EqnavPuSV9PFJnAy9eY5LOdWEEyU3uxwwS3G-lsjrVlpaEfyerZwLZoohddXitJgPsrj2P1Tvc0Z2ZQihpcpBCSMYwcJDc/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiL3h21eGBEs84OTW5YWI5MmSc2FWdcCE8rpj2bD5G9y6iaRZLOvsvZCC02_r0YzVhUQyIYQYnN_byPbWOW_MW-7zmNJ1GNw2zhT8hYWzVt3fZQ37e7hiJAhQXD4YA54nC5MDvdI_m15ix/s1600/0069.gif"
imgurl[10]="Link ảnh"
.........................
Dòng lệnh màu xanh là dòng lệnh mới thêm.
Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước và thay đổi kích thước của khung trình chiếu bằng với kích thước của ảnh....

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

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Đăng nhận xét

Labels

111 am-nhac An ninh Xã hội arsenal Aston Villa ban-tre barca Barce Bayern ben-le bóng đá bong-da-24h ca nhạc ca nhạc Âu Mỹ Ca Nhạc Châu Á ca nhạc việt nam cac-loai-kem cac-loai-pho cac-mon-xoi Cặp Đôi Hoàn Hảo Champions League chelsea Chém Chuối Cuối Tuần Chuyện Công Sở Chuyển Nhượng Cine Clip Game clip-vui cong-nghe Cô Gái Đại Dương Công Nghệ dac-san Dạy nấu ăn dien-anh Dinh dưỡng bà bầu Dinh_Duong_Ba_Bau Do_uong Download Du Thien Đẹp Fulham Funny Giải Trí giai-tri giam-stress giao-duc Girl Xinh Gương Mặt Thân Quen Hài Hài Tết 2013 hình ảnh đẹp Juventus khoa-hoc khoa-hoc-cong-nghe kim-chi Kinh Tế kinh-te La Liga Làm đẹp lập trình Leeds Liverpool Mach_Nho man city messi Milan Mon_Bo Mon_Canh_Ngon Mon_Ga Mon_Vit mon-an-tot-cho-suc-khoe mon-an-vat mon-banh mon-ca mon-chao mon-chay mon-che mon-chien mon-dua-muoi mon-goi mon-hai-san mon-heo mon-khac mon-lau mon-luon mon-nem mon-ngon-tu-dau-phu mon-nom mon-oc mon-salad mon-suon mon-tom mon-trung mon-xao mu Newcastle Ngoại Tình nhip-song-tre oto-xe-may phap-luat Phim Phim ảnh Phim Âu Mỹ Phim Châu Á Phim Việt Nam Premier League QPR Reading Real Ronaldo Rooney Serie A Sevilla Siêu Kinh Điển Sinhk33 Southanpton Stoke suc-khoe Sunderland Swansea Tài Chính tam-su Tevez the-gioi the-thao Thị Trường Thiên Trường - Địa Hải thit-ech thoi-trang Thơ Tình Thời trang thủ thuật thủ thuật blog Thư Tình Tin Game tin trong nước tin tức tin tức quốc tế tin-tuc tin-tuc-sao Tình Yêu tottenham Truyền Hình Truyện ngắn Tự học HTML 5 Valencia Van Persie Video video-huong-dan Wigan xa-hoi

 

Copyright © 2013 góc trà đá.