Hola estoy usando la libreria jcarousel para hacer un scrolling de imagenes.
las imagenes las estoy cargando desde una base de datos.
Uso javascript y ajax que es como vino el ejemplo que consegui.
Como dije logre cargar en el carrusel los thumbnails pero no he podido asociar un enlace a ese thunbnail que me permita hacer dos cosas. El enlace ademas de abrir la foto grande debo poder pasarle variables. La url seria algo como esto http://mipagina.com/fotogrande.php?ref=$x_ciudad&id=$ida
El enlace lo necesito asi porque necesito saber el id de la foto para poder buscar en la base de datos los comentarios de esa foto para imprimirlos debajo de la foto. y quiero ademas que esto no me cargue una nueva pagino sino que la foto grande me aparezca en una capa debajo del carrusel. Bueno el codigo es este.
PARTE JAVASCRIPT
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<!--
jQuery library
-->
<script type="text/javascript" src="/JCAROUSEL/jcarousel/lib/jquery-1.2.1.pack.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="/JCAROUSEL/jcarousel/lib/jquery.jcarousel.pack.js"></script>
<!--
jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="/JCAROUSEL/jcarousel/lib/jquery.jcarousel.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="/JCAROUSEL/jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'dynamic_ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
});
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
/**aqui debe ir el enlace pero no se como añadir el enlace que me tome las variable $x_ciudad y $ida*/
return '<img src="' + url + '" width="75" height="75" alt="" border="0" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Uncomment the following option if you want items
// which are outside the visible range to be removed
// from the DOM.
// Useful for carousels with MANY items.
visible:10,
itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
</div>
<div id="fotgrande">
**AQUI QUIERO CARGAR LA FOTO GRANDE AL HACER CLICK Y SUS COMENTARIOS DEBAJO
</div>
</body>
</html>
Y EL ARCHIVO dynamic_ajax_php.php que me carga el array de imagenes es este:
<?php
include("conec.php");
// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
$last = max($first + 1, intval($_GET['last']) - 1);
$length = $last - $first + 1;
// ---
$images = array(); /** array de thumbnails
$imagesg = array(); /** array de fotos grandes
$link = conectarse(HOST, USER, PASS, DB, PORT);
$x_idciudad=1;
$result=mysql_query("select * from anuncios WHERE idcategoria=11 AND idciudad='$x_idciudad' AND activo=1 and foto1!='' ORDER BY fecha DESC");
$numeroregistros=mysql_num_rows($result);
if ($numeroregistros>0) {
$i=0;
while($row=mysql_fetch_array($result))
{
$file=$row['foto1'];
$file="fo_$file";
$images[$i]="http://mipagina.com/imagenes/fotodia/$file"; /**THUMBNAIL
$imagesg[$i]="http://mipagina.com/imagenes/fotodiag/$file"; /**FOTOGRANDE
$i=$i+1;
}
}
mysql_free_result($result);
$total = count($images);
$selected = array_slice($images, $first, $length);
// ---
header('Content-Type: text/xml');
echo '<data>';
// Return total number of images so the callback
// can set the size of the carousel.
echo ' <total>' . $total . '</total>';
foreach ($selected as $img) {
echo ' <image>' . $img . '</image>';
}
echo '</data>';
?>
LO ANTERIOR ME CARGA EL CARRUSEL CON LAS IMAGENES PERO SIN EL ENLACE QUE EM CARGUE LA IMAGEN DEBAJO.
GRACIAS POR CUALQUIER AYUDA.