container - Ayuda con Jquery+Masonry Plugin: Cómo expandir/contraer cuadros para revelar contenido

masonry translate

Question

Estoy usando el plugin jquery de mampostería en un proyecto: ( http://desandro.com/resources/jquery-masonry )

Básicamente tengo un conjunto de cuadros (miniaturas) en una grilla. Cuando se hace clic en uno, quiero que se expanda a un tamaño mayor para mostrar más contenido (imágenes y texto adicionales). Estoy luchando para que desaparezca la miniatura y luego aparezca contenido nuevo en el cuadro expandido. No sé cómo hacer que aparezca el nuevo contenido o dónde almacenarlo en mi página, y debe tener un botón de cerrar. El creador del plugin me dio un consejo rápido para la parte en expansión, pero el código que estoy usando tiene un alto y ancho establecidos y quiero que sean variables según la cantidad de contenido en estado expandido.

Aquí está mi código jquery hasta ahora: http://pastie.org/1002101

Este es un ejemplo similar del comportamiento que quiero lograr (excepto que mis cajas tendrán diferentes tamaños expandidos): ( http://www.learnsomethingeveryday.co.uk )

También notará en ese ejemplo que solo permite que se expanda 1 casilla a la vez. También me gustaría tener esa funcionalidad.

Perdón por todas las preguntas. ¡Soy bastante nuevo para jquery, cualquier ayuda sería increíble!

Answer 1

• lo siento, no puedo comentar otras preguntas todavía (de ahí el cuadro de respuesta)

@fudgey

Tengo esto trabajando con el filtro de jquery que Fudgey me ayudó. Mi problema es que, por cualquier razón, en google chrome, los elementos de mampostería no parecen terminar de posicionarse en la carga de la página. Después de hacer clic en algo, todo está bien, solo la carga de la página inicial es problemática. ¿Dónde / cómo establecería un tiempo de carga para la mampostería?

Además, ¿hay alguna forma de conseguir que un cursor de puntero trabaje en esto? Actualmente, un usuario no sabría hacer clic en los elementos.

Answer 2

Tengo una idea para esto Puedes cambiar el código a esto:

$(''.box'').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data(''size'', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $(''#grid'').masonry();
    })
    .addClass(''expanded'');
  }

 $( ''.expanded'' ).find(''.main_img'').click(function() {
    restoreBoxes();
 });

Todavía necesitará el código que define la función restoreBoxes y la llamada a Masonry en la parte superior, solo incluí el código que debe agregarse. Entonces el código completo se vería así:

$(document).ready(function(){

 $(''#grid'').masonry({
    singleMode: false,
    itemSelector: ''.box'',
    animate: true
 });

 $(''.box'').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data(''size'', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $(''#grid'').masonry();
    })
    .addClass(''expanded'');
  }

  $( ''.expanded'' ).find(''.main_img'').click(function() {
      restoreBoxes();
  });

  function restoreBoxes(){
   var len = $(''.expanded'').length - 1;
   $(''.expanded'').each(function(i){
    var box = $(this).data(''size'');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || ''auto'' )
     }, function(){
        if (i >= len) {
       $(''#grid'').masonry();
      }
    })
    .removeClass(''expanded'');
   })
  }
 });
});

No estoy seguro de si esta es la forma más eficiente, pero probé una versión de esto en un sitio en el que estoy trabajando y tuve éxito. Esto debería hacer que el div se contraiga solo cuando haga clic en una imagen dentro del div expandido con la clase ".main_img". Puede reemplazar esto con el nombre de clase que desee, pero asegúrese de que la imagen en la que desea hacer clic para cerrar el div tenga esta clase. Si quería cualquier imagen en el div expandido para cerrar el div, podría simplemente usar "img" en lugar de ".main_img". Déjame saber cómo funciona esto, y si obtienes algún error, publícalos aquí.

Answer 3

Pruebe esto ( demo aquí ):

$(document).ready(function(){

 $(''#grid'').masonry({
    singleMode: false,
    itemSelector: ''.box'',
    animate: true
 });

 $(''.box'').click(function(){
  if ($(this).is(''.expanded'')){
   restoreBoxes();
  } else {
   restoreBoxes();
   $(this)
    // save original box size
    .data(''size'', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $(''#grid'').masonry();
    })
    .addClass(''expanded'');
  }

  function restoreBoxes(){
   var len = $(''.expanded'').length - 1;
   $(''.expanded'').each(function(i){
    var box = $(this).data(''size'');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || ''auto'' )
     }, function(){
        if (i >= len) {
       $(''#grid'').masonry();
      }
    })
    .removeClass(''expanded'');
   })
  }
 });
});

Actualización: Hola Jam, no sabía que me dejaras un comentario, la próxima vez agrega comentarios debajo de la respuesta o actualiza tu pregunta. También puedes poner "@" delante del nombre de la persona y obtendrán una bandera de mensaje.

En respuesta a su pregunta sobre el tamaño del conjunto y el contenido oculto, modifiqué la demostración (prácticamente todo el HTML y el CSS incluidos) para mostrar cuadros de ancho variable. Hacer que el cuadro en el que se hace clic se expanda para contener todo el contenido oculto tiene un pequeño problema. Normalmente, el contenido oculto tiene una altura y un ancho de cero. Pero jQuery puede determinar el tamaño de contenido oculto, pero todavía tiene algunos problemas porque es posible que deba limitar el ancho o alto del contenido oculto. Entonces, lo que terminé haciendo fue agregar el contenido oculto dentro del cuadro y agregar un atributo de data-size al cuadro que contiene el ancho y alto del contenido oculto expandido, por ejemplo:

<div class="box" data-size="380,380">
    <p>This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

También incluí una forma de ocultar el contenido visible cuando se expande el cuadro, agregando una clase hideable al contenido, ya que la imagen que proporcionó parece tener el contenido original oculto:

<div class="box" data-size="380,380">
    <p class="hideable">This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

Si el atributo de data-size no está configurado, la secuencia de comandos tendrá de forma predeterminada la configuración de defaultSize predeterminado:

Tenga en cuenta que la demostración está usando $(document).ready(function(){...}) lugar de $(window).load(function(){...}) según lo recomendado por el autor de la masonería porque jFiddle simplemente doesn No quiero trabajar con la carga de la ventana.

$(window).load(function () {

    var defaultSize = [180, 180]; // expanded box size: [width , height]
    $(''#grid'').masonry({
        singleMode: false,
        columnWidth: 100,
        resizeable: true,
        itemSelector: ''.box'',
        animate: true
    });

    $(''.box'').click(function () {
        if ($(this).is(''.expanded'')) {
            restoreBoxes();
        } else {
            var size = ($(this).attr(''data-size'')) ? $(this).attr(''data-size'').split('','') : defaultSize;
            $(this)
            // save original box size
            .data(''size'', [$(this).width(), $(this).height()]).animate({
                width: size[0],
                height: size[1]
            }, function () {
                // show hidden content when box has expanded completely
                $(this).find(''.expandable'').show(''slow'');
                $(this).find(''.hideable'').hide(''slow'');
                $(''#grid'').masonry();
            });
            restoreBoxes();
            $(this).addClass(''expanded'');
        }

        function restoreBoxes() {
            var len = $(''.expanded'').length - 1;
            $(''.expanded'').each(function (i) {
                var box = $(this).data(''size'');
                $(this).find(''.expandable'').hide(''slow'');
                $(this).find(''.hideable'').show(''slow'');
                $(this).animate({
                    width: (box[0] || 100),
                    height: (box[1] || ''auto'')
                }, function () {
                    if (i >= len) {
                        $(''#grid'').masonry();
                    }
                }).removeClass(''expanded'');
            })
        }
    });
});