[SOLUCIONADO] jquery shapeshift

[CesarIrnan]

Hola, estoy entrando en el mundillo de jquery, y como primer intento me gustaría hacer una especie de puzle, tengo 10 piezas (5 a un lado y 5 a otro) y en el medio un espacio vacio en el que encajar 3 piezas...


Estoy intentando implementarlo con el script de jquery de shapeshift, que he visto que esta bien, está en el siguiente repositorio:

https://github.com/McPants/jquery.shapeshift

El problema viene a la hora de entender el codigo que está dentro de la carpeta demo/asset/demo.js

Estoy intentando cambiar las cajitas que vienen implementadas por fotos mías.

Más o menos sé que debo tocar esta parte del código:

Código:

$(function() {
    var $containers, child_count, filter_options, getRandomColor, renderChildren, renderPlaceholders;
    $containers = $(".ss-container");
    child_count = 5;
    (renderChildren = function() {
      var weighted_colspans;
      weighted_colspans = [1];
      return $containers.each(function(container_i) {
        var colspan, elements, height, i, _i;
        elements = [];
        for (i = _i = 0; 0 <= child_count ? _i < child_count : _i > child_count; i = 0 <= child_count ? ++_i : --_i) {
            colspan = 209;
            height = 280;          
          elements.push("<li data-ss-colspan=" + colspan + " style='height: " + height + "px'><div class='position'><div>" + i + "</div></div></li>");        
        }
        return $(this).append(elements.join(""));
      });
    })();

justo sería el elements.push... pero no se como hacerlo para que me lo cree bien, si pongo la ruta a la imagen, hace un monton de elementos con la imagen, y solo quiero 5 en esa caja.


Cualquier ayuda será bienvenida.


Un saludo!!!

[CesarIrnan]

si lo cambio por

elements.push("<img src='template/images/obj_1.png'><div class='position'><div>" + i + "</div></div></li>");


Me crea los 5 objetos pero no respeta el tamaño

[CesarIrnan]

Me voy auto contestando.

He cambiado el código y lo he dejado así:

Código:

// Generated by CoffeeScript 1.4.0
(function() {

  $(function() {
    var $containers, child_count, filter_options, getRandomColor, renderChildren, renderPlaceholders;
    $containers = $(".ss-container");		
    child_count = 5;
	contador = 0;
    (renderChildren = function() {
      var weighted_colspans;
      weighted_colspans = [1];
      return $containers.each(function(container_i) {
        var colspan, elements, height, i, _i;
        elements = [];
        for (i = _i = 0; 0 <= child_count ? _i < child_count : _i > child_count; i = 0 <= child_count ? ++_i : --_i) {	        
          elements.push("<img src='template/images/obj_" + contador + ".png'><div class='position'><div></div></div></li>"); 
		  contador++;       
        }
        return $(this).append(elements.join(""));
      });
    })();
	
    $containers.shapeshift(filter_options);
    $(".options ul.animation li").on("click", function() {
      switch ($(this).data("option")) {
        case "enable":
          filter_options.animated = true;
          break;
        default:
          filter_options.animated = false;
      }
      return $containers.shapeshift(filter_options);
    });
    $(".options ul.dragndrop li").on("click", function() {
      switch ($(this).data("option")) {
        case "enable":
          filter_options.enableDrag = true;
          filter_options.enableDrop = true;
          break;
        default:
          filter_options.enableDrag = false;
          filter_options.enableDrop = false;
      }
      $containers.trigger('ss-destroy');
      return $containers.shapeshift(filter_options);
    });
    $(".options ul.placeholders li").on("click", function() {
      renderPlaceholders($(this).data("option"));
      return $containers.shapeshift(filter_options);
    });
    $containers.on("ss-arranged", function(e, selected) {
      var modifier;
      modifier = $(this).find(".ss-dragging")[0] ? 1 : 0;
      return $(this).children().each(function() {
        return $(this).find(".position").text($(this).index() - modifier);
      });
    });
	
    $containers.on("ss-rearranged", function(e, selected) {
      console.log("----------------------------------------");
      console.log("This container:");
      console.log($(this));
      console.log("Has rearranged this item:");
      console.log($(selected));
      return console.log("Into this position:", $(selected).index());
    });
    $containers.on("ss-removed", function(e, selected) {
      console.log("----------------------------------------");
      console.log("This item:");
      console.log($(selected));
      console.log("Has been removed from this container:");
      return console.log($(this));
    });
    $containers.on("ss-added", function(e, selected) {
      console.log("----------------------------------------");
      console.log("This item:");
      console.log($(selected));
      console.log("Has been added to this container:");
      return console.log($(this));
    });
    $containers.on("ss-trashed", function(e, selected) {
      console.log("----------------------------------------");
      console.log("This item:");
      console.log($(selected));
      return console.log("Has been removed from the DOM");
    });
    return $containers.on("ss-drop-complete", function(e) {
      console.log("----------------------------------------");
      console.log("This container:");
      console.log($(this));
      return console.log("Has finished rearrangement after a drop.");
    });
  });

}).call(this);

El problema es este:



Hay un abismo entre cada elemento, y no se dónde buscar para reducirlo

[CesarIrnan]

he abandonado este proyecto :(