Comunidad de diseño web y desarrollo en internet online

Ayuda con JSON

Citar            
MensajeEscrito el 23 Abr 2014 09:47 pm
Necesito ayuda para mi código... Lo que necesito hacer es seleccionar una imagen que me despliega la lista y cuando seleccione una me muestre la imagen que quiero, por el momento el código me lanza todas las imágenes contenidas en el JSON y eso no quiero... Por favor ayuda.... ñ.ñ

Aquí dejo el código para que lo revisen... =D

Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
   <title>Desplegando imagenes JSON</title>
   <link href="css/demo.css" rel="stylesheet">
   <style>
      .cuadro{
         display: inline-block;
         vertical-align: top;
         width: 300px;
      }
   </style>
</head>

<body class="container">

   <div id="arriba"></div>

   <div>
      <form action="#" method="POST">
      <select id="list"></select>
      <input type="submit" class="btn" value="Ir">
      </form>
   </div><br/>

   <div id="imagenes"></div>

   <script src="http://code.jquery.com/jquery-latest.js"></script>

   <script>
      $(document).on("ready", main);
      function main(){
            var titulo= "";
            var imagen= "";
            var lista= "";
            var valorlista= $("#listavalor").val();
            console.log(valorlista);

            $("#imagenes").text("Cargando...");

            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json&jsoncallback=?", function(json){
               
                  titulo += "<h2><a href='index.html'>" + json.title + "</a></h2>"
               
               $.each(json.items, function(i, valor){
                  lista += "<option value=' id='listavalor'"+ i +"'>" + valor.title + "</option>"
                  imagen += "<div class='cuadro'><img src='" + valor.media.m + "'/></div>"

               });

               $("#arriba").html(titulo);
               $("#imagenes").html(imagen);
               $("#list").html(lista);
            });
      }
   </script>

</body>
</html>

Por Dark6425

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Abr 2014 06:23 pm
Hola, no entiendo muy bien. Veo como que tienes tantos select como imagenes?
#list
select: listavalor1, listavalor2, ... listavalorN
#imagenes
.cuadro: img.src1, img.src2, ... img.srcN

Que es lo que quieres? el al clickar alguna img o al select algun item hagan lo mismo, despliegen esa imagen en grande? Por ej para .cuadro solo obten el index()

$('.cuadro').click(function(){ console.log( $(this).index(); ); });

con esto puedes buscar un indice para un array|json

O si lo que quieres es usando el list ocultar todos los .cuadro y solo mostrar el que active list puedes controlar con css

$('#list').change(function(){
var wOpt = $("#list option:selected").index();
// alert(wOpt);
$('.cuadro').hide();
$('.cuadro:eq('+wOpt+')').show();
}

Por comicSans

Claber

151 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.