Membuat gallery photo dengan PHP dan JQuery
Membuat Gallery Photo Desc on Hover
Berikut kode untuk membuat gallery photo dengan descripsi muncul ketika mouse di hover ke gambar :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiny Carousel</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.js" ></script>
<script type="text/javascript" src="js/jquery.cluetip.js"></script>
<link rel="stylesheet" type="text/css" href="js/skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="js/jquery.cluetip.css" />
<script type="text/javascript">
$(document).ready(function() {
jQuery("#mycarousel").jcarousel({
vertical: true,
scroll: 2
});
$("a.title").cluetip({splitTitle: "|"});
});
</script>
<style type="text/css">
img {
width: 75px;
height: 75px;
}
</style>
</head>
<body>
<div>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><a class="title" href="#"
title="Adenium 'Laviola'|Jenis Kamboja Jepang|
dengan warma bunga yang menawan">
<img src="Citra/Zehyranthus_reginae.png" border="false" /></a></li>
<li><a class="title" href="#"
title="Alocasia 'Hilo Beauty'|Alokasi dengan penampilan|
mirip keladi">
<img src="Citra/Zehyranthus_reginae.png"
border="false" /></a></li>
<li><a class="title" href="#"
title="Begonia olsoniae|Begonia dengan daun seperti |
berbeludru">
<img src="Citra/Zehyranthus_reginae.png"
border="false" /></a></li>
<li><a class="title" href="#"
title="Pistia stratotes|Merupakan tanaman air.|
Dikenal dengan julukan 'Kubis Air'">
<img src="Citra/Zehyranthus_reginae.png"
border="false" /></a></li>
<li><a class="title" href="#"
title="Sansevieria 'Gold Flame'|Jenis Lidah Mertua|
dengan kombinanasi warna yang memikat">
<img src="Citra/Zehyranthus_reginae.png"
border="false" /></a></li>
<li><a class="title" href="#"
title="Zehyranthus reginae|Bagus dijadikan sebagai tanaman|
kebun. Warna bunganya indah">
<img src="Citra/Zehyranthus_reginae.png"
border="false" /></a></li>
</ul>
</div>
</body>
</html>
Jika dijalankan tampilan nya sebagai berikut :
Download code lengkap disini
Selesai...
Semoga Bermanfaat....