langsung saja praktekan di laptop/komputer anda...
buat folder baru dengan nama website-cantik >> buat folder baru dengan nama image didalam folder website-cantik kemudian download gambar-gambar dengan nama seperti yang tertera di setiap gambar berikut dan disimpan dalam folder image
 |
| img01 |
 |
| img02 |
 |
| img03 |
 |
| img03_big |
 |
| img04 |
 |
| img04_big |
 |
| img05 |
 |
| img05_big |
 |
| img06 |
 |
| img06_big |
 |
| img07 |
 |
| img07_big |
 |
| img08 |
 |
| img08_big |
 |
| img09 |
kopikan kode berikut di notepad simpan di dalam folder website-cantik dengan nama website-cantik.html
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-0.1.js"></script>
<style type="text/css">
#poptrox {
width: 780px;
margin: 0px auto;
background: #000000;
}
#gallery {
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
}
#gallery li {
float: left;
margin: 0px;
padding: 5px 10px;
}
#gallery img {
opacity: 0.4;
filter: alpha(opacity=40);
}
#gallery a:hover img {
opacity: 1;
filter: alpha(opacity=100);
}
.poptrox_popup {
position: relative;
padding: 1em 1em 3em 1em;
background: #ffffff;
color: #333333;
}
.poptrox_popup .loader {
display: block;
margin: 55px 0 0 0;
text-indent: -9999em;
background: url('loader.gif') top center no-repeat;
}
.poptrox_popup .caption {
position: absolute;
bottom: 1em;
left: 1em;
}
.poptrox_popup .closer {
position: absolute;
bottom: 1em;
right: 1em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body><br /><br /><br /><br /><br />
<div id="poptrox">
<ul id="gallery">
<li><a href="images/img03_big.jpg"><img src="images/img03.jpg" width="240" height="92" alt="" title="Fusce ultrices fringilla metus" /></a></li>
<li><a href="images/img04_big.jpg"><img src="images/img04.jpg" width="240" height="92" alt="" title="Praesent scelerisque scelerisque erat" /></a></li>
<li><a href="images/img05_big.jpg"><img src="images/img05.jpg" width="240" height="92" alt="" title="Integer sit amet pede vel arcu aliquet pretium" /></a></li>
<li><a href="images/img06_big.jpg"><img src="images/img06.jpg" width="240" height="92" alt="" title="Phasellus nec erat sit amet nibh pellentesque congue" /></a></li>
<li><a href="images/img07_big.jpg"><img src="images/img07.jpg" width="240" height="92" alt="" title="Pellentesque quis elit non lectus gravida blandit" /></a></li>
<li><a href="images/img08_big.jpg"><img src="images/img08.jpg" width="240" height="92" alt="" title="Cras vitae metus aliquam risus pellentesque pharetra" /></a></li>
</ul>
<br class="clear" />
<script type="text/javascript">
$('#gallery').poptrox();
</script>
</div>
</body>
</html>
Lanjut postingan berikutnya....
Post a Comment