Descarc fisierele plugin-ului. Dezarhivez .zip-ul. Iau jquery.lightbox-0.5.js si il bag in folderul js din root-ul site-ului. In folderul js se afla, de asemenea, si fisierul care contine libraria jQuery. jquery.lightbox-0.5.css il bag in folderul css din root-ul site-ului. In folderul images din root-ul site-ului creez un folder lb-btns in care voi baga imaginile cu butoanele LightBox-ului din folderul images. Acum am grija sa modific chemarile butoanelor in fisierul jquery.lightbox-0.5.js de la linia 30 la 34.
Acum nu imi mai ramane decat sa implementez plugin-ul in pagina mea web.
index.php
<?php include('includes/functions.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cum implementez plugin-ul jQuery LightBox intr-o pagina web?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="keywords" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="abstract" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="noindex,nofollow" />
<meta name="revisit-after" content="7 days" />
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<!--**********Begin - jQuery LightBox**********-->
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<!--**********End - jQuery LightBox**********-->
<style type="text/css">
* {
margin:0;
padding:0;
outline:none;
}
html {
color:black;
background-color:white;
font: normal normal normal 12px Verdana;
/*font-style font-variant font-weight font-size font-family*/
}
img {
border:none;
}
ul#gallery {
overflow:hidden;
list-style-type:none;
width:1000px;
margin:10px auto;
}
ul#gallery li {
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<ul id="gallery">
<?php
$pictures = read_images('images/thumbs', array('.jpg', '.jpeg'), 120, 120, 120, 120);
for ($i = 0; $i < 8; $i++) {
echo '<li>';
echo '<a href="images/big-ones/'.$pictures[$i].'">';
echo '<img src="images/thumbs/'.$pictures[$i].'" alt="" />';
echo '</a>';
echo '</li>'."\r\n";
}
?>
</ul>
</body>
</html>
Cu ajutorul functiei PHP read_images() citesc dinamic thumbnail-urile de pe server.
Publica acest articol pe Twitter
Articole asemanatoare:
Publicat de: admin
Ultima modificare: 20, 2010, 06:51
Ultima modificare: 20, 2010, 06:51
Precedentul 
Urmatorul 
Parteneri
