Để làm được bạn cần chuẩn bị môt số ảnh để hiển thị quảng cáo trong slide. Tiếp theo bạn thực hiện theo như code dưới đây. Các thư viện cần thiết và cả demo luôn bạn có thể download về tại đây
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>www.hmweb.com.vn-Chi se la niem vui</title>
<script src="clearbox.js" type="text/javascript" ></script>
<link rel="Stylesheet" href="clearbox.css" type="text/css" media="screen" />
<!--Create by webmaster@hmweb.com.vn!-->
<script language="JavaScript">
function showslide()
{
document.writeln("<div style=\"text-align:center\">");
document.writeln(" <a href='http://www.hmweb.com.vn/Images/Template/Comput.jpg' rel='clearbox[Pic,,3,,start]' title=''>");
document.writeln(" <img src='http://www.hmweb.com.vn/Images/Template/Comput_min.jpg'");
document.writeln(" style='border:1px;border-style:solid;border-color:#ABABAD;padding:4px;margin:4px;background-color:#F5F5F5' alt='Mẫu 002'>");
document.writeln(" </a>");
document.writeln("</div>");
document.writeln("<div style=\"text-align:center\">");
document.writeln(" <a href='http://www.hmweb.com.vn/Images/Template/Food.jpg' rel='clearbox[Pic,,3,,start]' title=''>");
document.writeln(" <img src='http://www.hmweb.com.vn/Images/Template/Food_min.jpg'");
document.writeln(" style='border:1px;border-style:solid;border-color:#ABABAD;padding:4px;margin:4px;background-color:#F5F5F5' alt='Mẫu 003'>");
document.writeln("</a>");
document.writeln("</div>");
document.writeln(" <div style=\"text-align:center\">");
document.writeln(" <a href='http://www.hmweb.com.vn/Images/Template/Fashion.jpg' rel='clearbox[Pic,,3,,start]' title=''>");
document.writeln(" <img src='http://www.hmweb.com.vn/Images/Template/Fashion_Min.jpg'");
document.writeln(" style='border:1px;border-style:solid;border-color:#ABABAD;padding:4px;margin:4px;background-color:#F5F5F5' alt='Mẫu 004'>");
document.writeln(" </a>");
document.writeln("</div>");
}
</script>
</head>
<body>
<form id="MasterPageForm" runat="server">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td align="center" style="width: 100%">
<script language="JavaScript">
showslide();
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
Bạn cũng có thể thiết lập lại các tùy chọn trong file clearbox.js theo các tùy chọn dưới đây:
CB_TextNav='on',//Hiển thị link cho chọn trang (Phân trang)
CB_NavTextPrv='Trước.',
CB_NavTextNxt='Tiếp theo.',
CB_NavTextFull='Kích thước ban đầu và tải',
CB_NavTextDL='Lưu',
CB_NavTextClose='Đóng',
CB_NavTextStart='Bắt đầu Slideshow',
CB_NavTextStop = 'Stop Slideshow',
CB_NavTextImgPrv='off',
CB_NavTextImgNxt='off',
CB_NavTextImgFull='off',
CB_NavTextImgDL='off',
CB_PictureStart='start.png',
CB_PicturePause='pause.png',
CB_PictureClose='close.png',
CB_PictureLoading='loading.gif',
CB_PictureNext='next.png',
CB_PicturePrev='prev.png',
CB_HideOpacitySpeed=400,
CB_ImgOpacitySpeed=450,
CB_TextOpacitySpeed=350,
CB_HideOpacity=.85,
CB_AnimSpeed=600,
CB_ImgTextFade='on',
CB_FlashHide='off',
CB_SelectsHide='on',
CB_NoThumbnails='on',
CB_SimpleDesign='off',
CB_ImgMinWidth=200,
CB_ImgMinHeight=160,
CB_CloseOnH='on',
CB_ShowGalName='on',
CB_AllowedToRun='on',
CB_AllowExtFunct='off',
CB_FullSize='off'
Phuc Thinh Website