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!!!