Powered byBlog Widgetand shared by JUNIAWAN89

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....

Previous
Next Post »

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular