» » TẠO SLIDESHOW (Kiểu 5)

TẠO SLIDESHOW (Kiểu 5)

Posted by chiasedamme on Friday, July 13, 2012

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.










Xem thử


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/AVvXsEi6xfyDBu1cgQeDdEC7qHna-Kz33qbTFVeYPok-Wve5qv23D12o3hl74pJJv7n0W8jIgQBKwtXuJeOHvEv4MOb3wsj79xTb_nNYRQld2Q37qyC3Y7CAIq5ohEZBSDVUxGmbByfHzxwA_xXe/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYw7dLkwV1NOmdszfQ7JqCtXQRnd0oEFTj-EU1XNX34FdxVSTjN_Eo8MN2dQFMCxDqmfkN_I3gPWbqu2YZVyh0_ATtFMo-UuctK6L7MqgJ0JbhlVqqmrW6Oo5-2ULbjE1D3S9EKIV3njoK/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5f2FRkccZtAi_wpcnuMr2u7ggV0gzQdLu12Emm8oEAXNE5zpz9SpjG8EICe_kQD9BTqcsZJ0alM6hKk9zFKZ4pYcPKSkYu9eVn-rD6mVaS9bwy9vipCH3sE09Y_n4VYXHrK1ga5qGqqE/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UtQLt-M1brzbdXgvyUoLXR_GYOHPFXomY2AjR6yObuD80SADMxkkjEG2qnLUudA8_XFZ4fjiFcp4o80d6Ekj7rUyFEVsldq7sTfcPRPrty2928PQHzLMwETA0BZ5any-QWiEf6Tkvqkf/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBcEnWl_GGN8Xel6Hgqk7ZRAF0UWpvWNyucBz3lxVaWloxreJRDNzpbhHNF5FTVxN1CULzqPwoiendrQWMk2KdjyW8WwsdSDGsJysI0gL9Sv1k1NVx07F1ukOEeDeQix0cNoSLApT-cVP/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFnfmw0y1ieA_KGqldEa_sw5ymYG3FQSEZ1c1nJSftWwl-14RSRzSUdFUHMcCRVpSltkzUAvVCwwy0JOOM_GKaoFFolk0IVY0mPeJntr_UTUxoSW3obIprmjr3oPqDeQwwaBC7dTjnw44/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlVsGiYW2xEjBlAje6U6ekD3Qkur450p00z-g24ENPE0FQhakIkRu1XMSjnujbBWIvS-UZEUg9ubbIsAzhXW_aEM3__yHCqlSaKg7-psp_JZlQDZfiG-TM99TNgZG3HSuOhUuePsRuCFJ/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELKhaDas9EBJGy3KxmQMTBNCfAsUAL74BSdy4DzuCl7pWvzpaWFN3ZHq-vh9uGJZ4KyTAzUhzBkdCYaieRJBA1t76au0N33YiHfEYJcKvFumfPnQrFEHMW3U3YV1mR7efsRORbXGnOHMW/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtS2oHpjG7ob5HCbKEOuY4OGvXBcbkJzIohP1h8l1aG7DWZn7omPduDthFv5ziVyLEGwtgCa4joMWkFLmPgjOuJ8MkS2d4_OBThsyyETtx2q5E8TYM1g3HivjJgnKdu3neo2xjBY33LZj/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xvhddkxfPUTrc-5j9qVoiawuk1hWquO9wmiNIKDKDbpND8yjMtSt66mDLZgozVUnhdQtJOb8U9vdXbMFnrp7VR3c1HOk4tpuWEUg0zzfZhUWM18jiiqA-MHGzNt5NbDTzHKWvULkCRjl/s1600/0069.gif"


// Ghi chú cho ảnh
message[0]="Welcome to my Blog"
message[1]="dunghennessy"
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/AVvXsEi6xfyDBu1cgQeDdEC7qHna-Kz33qbTFVeYPok-Wve5qv23D12o3hl74pJJv7n0W8jIgQBKwtXuJeOHvEv4MOb3wsj79xTb_nNYRQld2Q37qyC3Y7CAIq5ohEZBSDVUxGmbByfHzxwA_xXe/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYw7dLkwV1NOmdszfQ7JqCtXQRnd0oEFTj-EU1XNX34FdxVSTjN_Eo8MN2dQFMCxDqmfkN_I3gPWbqu2YZVyh0_ATtFMo-UuctK6L7MqgJ0JbhlVqqmrW6Oo5-2ULbjE1D3S9EKIV3njoK/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5f2FRkccZtAi_wpcnuMr2u7ggV0gzQdLu12Emm8oEAXNE5zpz9SpjG8EICe_kQD9BTqcsZJ0alM6hKk9zFKZ4pYcPKSkYu9eVn-rD6mVaS9bwy9vipCH3sE09Y_n4VYXHrK1ga5qGqqE/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UtQLt-M1brzbdXgvyUoLXR_GYOHPFXomY2AjR6yObuD80SADMxkkjEG2qnLUudA8_XFZ4fjiFcp4o80d6Ekj7rUyFEVsldq7sTfcPRPrty2928PQHzLMwETA0BZ5any-QWiEf6Tkvqkf/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBcEnWl_GGN8Xel6Hgqk7ZRAF0UWpvWNyucBz3lxVaWloxreJRDNzpbhHNF5FTVxN1CULzqPwoiendrQWMk2KdjyW8WwsdSDGsJysI0gL9Sv1k1NVx07F1ukOEeDeQix0cNoSLApT-cVP/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFnfmw0y1ieA_KGqldEa_sw5ymYG3FQSEZ1c1nJSftWwl-14RSRzSUdFUHMcCRVpSltkzUAvVCwwy0JOOM_GKaoFFolk0IVY0mPeJntr_UTUxoSW3obIprmjr3oPqDeQwwaBC7dTjnw44/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlVsGiYW2xEjBlAje6U6ekD3Qkur450p00z-g24ENPE0FQhakIkRu1XMSjnujbBWIvS-UZEUg9ubbIsAzhXW_aEM3__yHCqlSaKg7-psp_JZlQDZfiG-TM99TNgZG3HSuOhUuePsRuCFJ/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELKhaDas9EBJGy3KxmQMTBNCfAsUAL74BSdy4DzuCl7pWvzpaWFN3ZHq-vh9uGJZ4KyTAzUhzBkdCYaieRJBA1t76au0N33YiHfEYJcKvFumfPnQrFEHMW3U3YV1mR7efsRORbXGnOHMW/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtS2oHpjG7ob5HCbKEOuY4OGvXBcbkJzIohP1h8l1aG7DWZn7omPduDthFv5ziVyLEGwtgCa4joMWkFLmPgjOuJ8MkS2d4_OBThsyyETtx2q5E8TYM1g3HivjJgnKdu3neo2xjBY33LZj/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xvhddkxfPUTrc-5j9qVoiawuk1hWquO9wmiNIKDKDbpND8yjMtSt66mDLZgozVUnhdQtJOb8U9vdXbMFnrp7VR3c1HOk4tpuWEUg0zzfZhUWM18jiiqA-MHGzNt5NbDTzHKWvULkCRjl/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!!! 




at 4:51 PM
Labels: ,

{ 0 comments... read them below or add one }


Post a Comment