1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Comportamiento de imagenes

Tema en 'Javascript' comenzado por GtaSApawer, 2 de Enero de 2017.

  1. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    como ya te respondi por MP
     
    A Dawud le gusta esto.
  3. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Y en realidad lo que yo busco bro, que propiedades les puedo poner a las imagenes para que se peguen asi todas. Osea no quiero hacer un mapa, si no que yo ponga una imagen y se pegue así con las demas.
     
  4. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
  5. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Dawud le gusta esto.
  6. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Si pero como las imagenes son de diversos tamaños y no son cuadrados jamas se veran asi como esa galeria.

    Son como "tetris" no se si conoces ese juego, cada imagen encaja con las que tiene al rededor. Tal cual como se ve en la página, pero en vez de ser una imagen completa. Serán varias imagenes de varios tamaños que se pegue así, como se ve en dicha pagina. http://www.milliondollarhomepage.com/

    No se si me logro explicar.
     
  7. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    no necesitan ser del mismo tamaño, se ajustan y mantienen su mismo tamaño ;)
    [​IMG]
    [​IMG]
    [​IMG]
     
  8. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Como hago esa ?
     
  9. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
  10. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Hola amigo indagando un poco en internet logre hacer esto: upload_2017-1-2_22-21-50.png

    Algo así es lo que busco, pero me falta eliminar el margen entre cada cuadro. Esto fue lo que consegui con un plugin.

    Y el archivo modificado es este https://1drv.ms/u/s!Aj83SD5JQn4-grkHG0ZcIfluuqMaaw, lo que quiero buscar es como eliminar esa separación entre cada imagen. Pero no la encuentro.

    El plugin es este http://vnjs.net/www/project/freewall/

    Me puedes ayudar?
     
    A Dawud le gusta esto.
  11. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A GtaSApawer y Dawud les gusta esto.
  12. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    214
    Me gusta recibidos:
    162
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Se ve interesante la forma en la que acomoda y posiciona los cuadritos de colores al igual que en la forma de presentación de las imágenes :rolleyes: se ve genial... Pero me preguntaba que información vas a mostrar?? :) digo no pasa nada si no quieres decir.. jejeeje ...

    SAL_UDOS:cool:
     
    A AngelKrak le gusta esto.
  13. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    762
    Me gusta recibidos:
    312
    Puntos de trofeos:
    63
    Género:
    Hombre
    Sí, te vas photoshop y lo haces y luego creas un mapa.
    Al darle click sobre la imagen y a descargarla te desacarga la imagen completa y es esta:
    [​IMG]
     
    A AngelKrak le gusta esto.
  14. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    421
    Me gusta recibidos:
    260
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
  15. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    762
    Me gusta recibidos:
    312
    Puntos de trofeos:
    63
    Género:
    Hombre
    En los ejemplos que habéis pasado no corresponde a lo que se desea, se desearía que cada imagen se acoplase en el espacio que necesita sin embargo estos ejemplos que pasáis tienen los siguientes inconvenientes: se adaptan o verticalmente u horizontalmente y siempre queda una linea recta, es decir que las imagenes o tienen que ser todas horizontalmente iguales (width) o verticalmente iguales (height), en el caso que nos piden las imagenes tienen distinto tamaños siendo imagenes con tamaños unicos e inmodificables en el sentido de que tienen que crecer a escala.

    Lo adecuado seria crear un script que calculase el espacio de cada imagen y las adaptase, pero habría que aclarar unas cuantas reglas:
    ¿cómo se calcularía el espacio disponible?
    ¿las imágenes se podrán modificar su tamaño (escala) pero hasta cuanto?
    ¿si no se encuentra una imagen correctamente adaptable se podrá poner un borde blanco?

    Y luego tocaría el paso de pensar como programarlo.

    se podrían guardar todas las imágenes (rutas) en un array para poderlo recorrer, se colocaría la primera imagen y luego conforme a esto se puede seguir pensando mas apartados.

    Primero hay que trabajar el algoritmo, pensando en el diseño y luego se programa, no se programa directamente o sino nos saldrá un churro.
     
    Última modificación: 3 de Enero de 2017
    A Dawud y AngelKrak les gusta esto.
  16. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    421
    Me gusta recibidos:
    260
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Bueno, al menos lo intente :v igual no había entrado a la web de ejemplo ah :v
     
    A AngelKrak le gusta esto.
  17. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Exactamente esa linea horizontal/vertical no quiero que se vea. Y un mapa no quieren porque las imagenes las iran subiendo poco a poco, no será una imagen completa si no varias de poco tamaño. Lo que buscaba era el comportamiento. Y gracias al gutter, ya lo pude lograr. Aquí está mi resultado hasta ahora.

    upload_2017-1-3_10-54-36.png
    Ahora lo que estoy buscando es reemplazar esos colores por imagenes.
     
  18. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
  19. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Una pregunta muchachos, como hago para generar un div padre para cada imagen automaticamente con jquery. Me imagino que es con un for. Tengo lo siguiente:
    HTML:
    <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
    Código (Javascript):
    var imgLink = $(".img-link");

    for (var i = 0; i < imgLink.length; i++) {

    }
    Pero no se que poner en ese for. :'(
     
  20. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    229
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    HTML:

                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/"></a>
                </div>
     
    El resultado sería algo como eso.
     

Comparte esta página