¡Hola soy Ilich!: abril 2014

martes, 15 de abril de 2014

Galería de imágenes con jQuery y Bootstrap ,pasar url de imágen para un formulario.

Con dificultades para encontrar un script,para mostrar imágenes y además seleccionarla para mandar la url a un textbox.

Pues me di a la tarea de desarrollar un pequeño script.

Pero para comenzar deben de descargar Bootstrap y jQuery

Así queda el resultado final

En el html que se va usar el código

<html>
<head>
<title>Prueba Galeria</tittle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/bootstrap.js" ></script>
<script src="/js/Galeria.js" ></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/basic.css" />
</head>
<body>
<div class="contenedor">
     <div class="contenido">
    <a href="url_del_thumb" title="nombre_del_thumb">
            <img src="url_imagen_a_mostrar" alt="" /></a>
    </div>
     galeria.init('#url_imagen');
   <input type="text" id="url_imagen">
     <input type="button" onclick="galeria.showimages()" value="Elegir imagen">
</div>
</body>
</head>
</html>

basic.css

div.contenedor {
height: auto;

}
div.contenido {
height: auto;
margin: auto;
margin-left: 1em ;
display:inline-block;
vertical-align:top;
}
div.contenido img{
    height: 50px;
    width: 50px;
    outline-style:solid;
    outline-width: 2px;
}

Galeria.js

var galeria={
    images:new Array(),
    count:0,
    field:'none',
    select : function(){
        if(this.field!='none')
                      $(this.field).val(this.images[this.count]);
                      $("#preview").modal('hide');
                       $("#imgs-view").hide('slow');
                       $("#imgs-choose").show('slow');
    },
   showimages: function(){

         $("#imgs-view").hide('slow');
         $("#imgs-choose").hide('slow');
         $("#preview").modal('show');
    },
    show: function (countval){
                         $("#imgs").attr('src',this.images[countval]);
                         //$("#preview").modal('show');
                         $("#imgs-view").show('slow');
                         $("#imgs-choose").hide('slow');
                         this.count=countval;
     },
     init:function(field){
         this.field=field;
         var _images=this.images;

                          $("div.contenido a").each(function(){

                             _images.push($(this).attr('href'));
                             $(this).attr('href',"javascript:galeria.show("+galeria.count+")");
                             galeria.count++;

                          });
                         $("body").prepend('<div id="preview" class="modal hide fade in" style="display: none; "><div class="modal-header">'
                                                +'<a class="close" data-dismiss="modal">×</a>'
                                                +'<h4>Vista Previa</h4>'
                                            +'</div>'
                                            +'<div class="modal-body">'
                                                +'<div id="imgs-choose">'
                                                +'</div>'
                                                +'<div id="imgs-view">'
                                                +'<a href="#" class="btn btn-danger btn-small" id="anterior">&leftarrow;Anterior</a> '
                                                +'<a href="#" class="btn btn-danger btn-small" id="siguiente">Siguiente&rightarrow;</a> '
                                                +'<a href="#" class="btn btn-primary btn-small" id="previews">&swarhk;Ver Previstas</a> <br>'
                                                +'<img id="imgs" src=""><br>'
                                                +'<a href="javascript:galeria.select();" class="btn btn-success">Seleccionar imagen</a>'
                                                +'</div>'
                                            +'</div>'
                                            +'<div class="modal-footer">'

                                            +'<a href="#" class="btn" data-dismiss="modal">Cerrar</a>'
                                            +'</div>'
                                            +'</div>');
                        $(".contenedor").clone().appendTo("#imgs-choose");
                        $('.contenedor').not(':first').hide();

                        $("#imgs-view").hide();
                        $("#imgs-choose").show();


                          galeria.count=0;

                          $('#previews').click(function(){
                             $('#imgs-view').hide();
                             $('#imgs-choose').show('slow');
                          });

                          $('#anterior').click(function(){
                              if(galeria.count>0){
                                  galeria.count--;
                              }
                                $("#imgs").attr('src',_images[galeria.count]);
                          });

                           $('#siguiente').click(function(){
                              if(galeria.count<_images.length-1){
                                  galeria.count++;
                              }
                                $("#imgs").attr('src',_images[galeria.count]);
                          });
           this.images=_images;

}
};

Suscribirse a: Comentarios (Atom)