UPDATED ARTICLE
Probabil toata lumea stie cum se realizeaza in jQuery un slider. E destul de simplu. Incarcam fisierul jQuery in pagina si plugin-ul jQuery pentru realizarea sliderului. Putem prezenta in slider nu numai imagini ci si orice fel de continut de la texte la video.
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 fac un slider de imagini in jQuery si PHP?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="keywords" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="abstract" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="noindex,nofollow" />
<meta name="revisit-after" content="7 days" />
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<!--**********Begin - jQuery slider**********-->
<script type="text/javascript" src="js/easy-slider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<!--**********End - jQuery slider**********-->
<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*/
}
/***********Begin - jquery slider***********/
div#container {
position:relative;
width:605px;
margin:0 auto;
}
div#container div#slider ul {
list-style:none;
}
div#container div#slider li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:605px;
height:270px;
overflow:hidden;
}
div#container #prevBtn, div#container #nextBtn {
display:block;
width:13px;
height:20px;
position:absolute;
top:275px;
}
div#container #prevBtn {
left:0px;
}
div#container #nextBtn {
left:587px;
}
div#container #prevBtn a, div#container #nextBtn a {
display:block;
width:13px;
height:20px;
}
div#container #prevBtn a {
background:url(images/prev-btn.png) no-repeat 0 0;
}
div#container #nextBtn a {
background:url(images/next-btn.png) no-repeat 0 0;
}
div#container .graphic, div#container #prevBtn, div#container #nextBtn {
display:block;
overflow:hidden;
text-indent:-8000px;
}
/***********End - jquery slider***********/
</style>
</head>
<body>
<div id="container">
<div id="slider">
<ul>
<?php
$slides = read_images('images/slides', array('.jpg', '.jpeg'), 600, 600, 270, 270);
foreach ($slides as $slide) {
echo '<li>';
echo '<img src="images/slides/'.$slide.'" alt="" />';
echo '</li>'."\r\n";
}
?>
<li style="text-align:center; font-size:24px; color:#c00; padding-top:50px;">In slider putem sa punem orice fel de continut dorim: imagini, text, video. Acest continut poate fi citit dintr-o baza de date.</li>
</ul>
</div>
</div>
</body>
</html>
Cu ajutorul functiei PHP read_images() citesc dinamic thumbnail-urile de pe server.
Sliderul poate fi folosit la fel de bine si ca sectiune de stiri in care se incarca dintr-o baza de date ultimele stiri.
Publica acest articol pe Twitter
Articole asemanatoare:
Precedentul 
Urmatorul 
Parteneri
