gracias estimados por sus respuesta, lo que busco hacer es algo como esto:
http://flexslider.woothemes.com/thumbnail-slider.html
no puedo implementarlo porque las imagenes las recogo segun un id desde php, o sea, busco mostrar las miniaturas abajo del div principal, y que al pinchar sobre esa miniatura me carge la imagen en el div principal, tengo flexslider impementado asi:
Código PHP:
Ver original<!-- FlexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
</head>
<body>
<!--Contenedor Principal-->
<div class="container">
<div class="row">
<h3 class="text-center">Detalle de Aviso</h3>
<p class="text-right alert-info">Visualizando el aviso <strong><?php echo $cod_aviso;?></strong></p>
</div>
<!--Presentación Aviso Detallado-->
<div class="row">
<div id="slider" class="flexslider">
<?php foreach ($avisos as $av): ?>
<ul class="slides">
<?php if($av['img1'] == NULL){
echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
}else{
echo "<li><img src=".$av["img1"]."></li>";
}
if($av['img2'] == NULL){
echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
}else{
echo "<li><img src=".$av["img2"]."></li>";
}
if($av['img3'] == NULL){
echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
}else{
echo "<li><img src=".$av["img3"]."></li>";
}
if($av['img4'] == NULL){
echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
}else{
echo "<li><img src=".$av["img4"]."></li>";
}
if($av['img5'] == NULL){
echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
}else{
echo "<li><img src=".$av["img5"]."></li>";
}
?>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php echo "<li><img src=".$av["img1"]."></li>";?>
<?php echo "<li><img src=".$av["img1"]."></li>";?>
<?php echo "<li><img src=".$av["img1"]."></li>";?>
<?php echo "<li><img src=".$av["img1"]."></li>";?>
<?php echo "<li><img src=".$av["img1"]."></li>";?>
</ul>
</div>
<!--Aviso-->
<div class="col-lg-6 detalleFullAviso">
<h3><?php echo $av['titulo_aviso']; ?> </h3>
<p> <?php echo $av['aviso_completo']; ?> </p>
<strong>Valor ($):</strong> <?php echo $av['valor_producto']; ?> <br>
<strong>Publicado el:</strong> <?php echo $av['fecha_publicacion']; ?> <br>
<strong>Bajo la categoria:</strong> <?php echo $av['categoria_aviso']; ?><br>
<strong>Comuna:</strong> <?php echo $av['comuna']; ?>
</div><!--Fin detalleFullAviso-->
<!--Publicante-->
<div class="col-lg-6 detallePublicante">
<h4>Contacte al Anunciante:</h4>
<strong>Nombre:</strong> <?php echo $av['nombre']; ?><br>
<strong>Telefono Celular:</strong> <?php echo $av['telefono_celular']; ?> <br>
<strong>Telefono Fijo:</strong> <?php echo $av['telefono_fijo']; ?>
</div>
<?php endforeach; ?>
pero no me muestra miniaturas ni nada, si le saco el flex slider la carga me funciona bien...