Archivo que muestra el carrusel
<?php
include_once 'jcarousel_functions.php';
$jcarousel_visible = 3;
?>
<!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" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<!--
jQuery library
-->
<script type="text/javascript" src="lib/jquery.js"></script>
<!--
jCarousel business javascript
-->
<script type="text/javascript" src="lib/jcarousel.lite.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
$(".carousel").jCarouselLite({
auto: 2000,
speed: 800,
btnNext: ".next",
btnPrev: ".prev",
scroll: <?php echo $jcarousel_visible;?>,
visible: <?php echo $jcarousel_visible;?>
});
});
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Carrosel con jQuery</h2>
<h3>Ejemplo de implementación con php</h3>
<div class="carousel">
<ul class="jcarousel-list">
<?php
$jcarousel_items = jcarousel_getItems();
foreach ($jcarousel_items as $item) {
echo '<li><p>'.$item['title'].'</p><a href="'.htmlspecialchars($item['src']).'"><img src="'.htmlspecialchars($item['src']).'" width="113" height="125" alt="'.htmlspecialchars($item['title']).'" /></a></li>';
}
echo '<li></li>';
?>
</ul>
</div>
<button class="prev"><<</button>
<button class="next">>></button>
</div>
</body>
</html>
Fichero con las funciones
<?php
$jcarousel_items = array(
array(
'title' => 'item 1',
'src' => 'images/image1.jpg',
),
array(
'title' => 'item 2',
'src' => 'images/image2.jpg',
),
array(
'title' => 'item 3',
'src' => 'images/image3.jpg',
),
array(
'title' => 'item 4',
'src' => 'images/image4.jpg',
),
array(
'title' => 'item 5',
'src' => 'images/image5.jpg',
),
);
/**
* This function returns the number items. Typically, this
* would fetch it from a database (SELECT COUNT(*) FROM items) or
* from a directory.
*/
function jcarousel_countItems()
{
global $jcarousel_items;
return count($jcarousel_items);
}
/**
* This function returns the items. Typically, this
* would fetch it from a database (SELECT * FROM items LIMIT $limit OFFSET $offset) or
* from a directory.
*/
function jcarousel_getItems($limit = null, $offset = null)
{
global $jcarousel_items;
// Copy items over
$return = $jcarousel_items;
if ($offset !== null) {
$return = array_slice($return, $offset);
}
if ($limit !== null) {
$return = array_slice($return, 0, $limit);
}
return $return;
}
?>
Más información aquí
Descargar ejemplo
No lo conocía, es bastante sencillo y el código no es obstructivo.
ResponderEliminarHola, esta muy bien tu articulo, pero no puedo descargarme el Ejemplo me puedes verificar que el link no este roto
ResponderEliminarSandy--
Gracias