Foros del Web » Programando para Internet » Javascript »

carrusel de imagenes cargadas desde bd

Estas en el tema de carrusel de imagenes cargadas desde bd en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2007, 04:54
 
Fecha de Ingreso: noviembre-2006
Mensajes: 38
Antigüedad: 18 años, 1 mes
Puntos: 1
carrusel de imagenes cargadas desde bd

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.
  #2 (permalink)  
Antiguo 20/04/2008, 23:10
 
Fecha de Ingreso: abril-2008
Mensajes: 3
Antigüedad: 16 años, 8 meses
Puntos: 0
Re: carrusel de imagenes cargadas desde bd

Cita:
Iniciado por msimsi Ver Mensaje
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.
  #3 (permalink)  
Antiguo 20/04/2008, 23:13
 
Fecha de Ingreso: abril-2008
Mensajes: 3
Antigüedad: 16 años, 8 meses
Puntos: 0
Re: carrusel de imagenes cargadas desde bd

La solucion es un iframe cuando llamas las imagenes usa tambn <a href="imagen_grande" target="nombre_iframe"> y t aconsejo que uses el carousel with external controls asi puedes controlar el numero de la imagen q usas
  #4 (permalink)  
Antiguo 14/10/2009, 09:14
Avatar de MaLkAvIaN_NeT  
Fecha de Ingreso: marzo-2005
Ubicación: trujillo
Mensajes: 141
Antigüedad: 19 años, 8 meses
Puntos: 0
Respuesta: carrusel de imagenes cargadas desde bd

hola man te recomiendo leer este tutorial es muy sencillo y práctico
http://www.tecnolust.com/tutoriales/...t/carrusel.htm
__________________
www.tecfactory.com
  #5 (permalink)  
Antiguo 14/10/2009, 09:15
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Respuesta: carrusel de imagenes cargadas desde bd

El tema es de hace más de 1 año. Por favor, no revivas temas tan antiguos. Si tienes alguna duda, es preferible abrir un tema nuevo

Saludos,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 18:45.