Hola, primero que no se como explicarlo en el titulo lo que quiero hacer, veamos, tengo un div que cambia la imagen al presionar sobre una imagen pequeña, lo que quiero hacer ahora es que en lugar de usar imagenes pequeñas, se haga con una lista desplegable, esto es lo que tengo
Este es el div que muestra las imagenes
Cita: <div class="image">
<img id="largeImg" src="img/imagen1.png" width="350" height="350" style="opacity: 1;"> </div>
</div>
si lo hago con imagenes pequeñas si funciona, este es con una imagen pequeña
Cita: <li class="swatch selected">
<a href="img/imagen1.png" class="thumbnail">
<img src="img/thumb_imagen1.jpg">
</a>
</li>
Quisiera poder utilizar una lista asi
Cita: <select name="imagenes">
<option value="img/imagen1.png">Imagen 1</option>
<option value="img/imagen2.jpg">Imagen 2</option>
</select>
Y el codigo es este
Cita: <script type="text/javascript">
$('a.thumbnail').click(function(){
var src = $(this).attr('href');
if (src != $('img#largeImg').attr('src').replace(/\?(.*)/,'')){
$('img#largeImg').stop().animate({
opacity: '0'
}, function(){
$(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
}).load(function(){
$(this).stop().animate({
opacity: '1'
});
});
}
return false;
});
</script>
Con ese codigo solo funcionan las imagenes pequeñas, y quiero es utilizarlo como lista.
Saludos