martes, 17 de febrero de 2009

Carrusel con jQuery y php

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,
// cada dos segundos cambia

speed: 800,
// velocidad

btnNext: ".next",
//indicar botón anterior

btnPrev: ".prev",
//indicar botón siguiente

scroll: <?php echo $jcarousel_visible;?>,
//número de items que pasa cada vez

visible: <?php echo $jcarousel_visible;?>
//número de items visibles

});






});

/* ]]> */

</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>';

//Es importante especificar en la etiqueta img los atributos height y width para el correcto funcionamiento

}

echo
'<li></li>';

?>

</ul>

</div>

<button class="prev">&lt;&lt;</button>


<button class="next">&gt;&gt;</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

2 comentarios:

  1. No lo conocía, es bastante sencillo y el código no es obstructivo.

    ResponderEliminar
  2. Hola, esta muy bien tu articulo, pero no puedo descargarme el Ejemplo me puedes verificar que el link no este roto

    Sandy--

    Gracias

    ResponderEliminar