De un Slider a un Puzzle

Autor: DemaKi_na 12-11-2010

Crear un Puzzle con Css y JsMuchas veces hemos insertado en nuestro blog una Galería de Imágenes a partir de algún ejemplo que hemos tomado de la infinidad de recursos de Js que podemos encontrar en la Web. Pero esta vez vamos a ir un poco más allá , mas que un Slider vamos a montar un Puzzle.

Empezaremos montando el sistema de archivos, comenzando por crear una carpeta general llamada Ejercicio. Dentro de ella crearemos una subcarpeta o subdirectorio al que llamaremos Imágenes , igualmente procederemos con una carpeta para los Scripts y otra para el Css. Y pos supuesto montaremos nuestro puzzle.html. Siempre recordando que con los nombres de archivos y directorios trabajaremos mejor en minúsculas.

Una vez hecho esto, vamos a buscar una imagen que nos guste y cuyas medidas se ajusten a los 400px por 400px. La editamos con un editor de imágenes como Photoshop, y la dividimos en 12 partes de 100px por 100px cada una de ellas,. De este modo ya podemos proceder a realizar nuestro puzzle. Los pasos siguientes pueden realizarse en diferentes órdenes, yo lo empezare asi:

  • Mete las doce imágenes que hemos recortado dentro de la carperta “imagenes”, la cual irá, como todos nuestros archivos dentro del directorio “ejercicio”.
  • Abre con cualquier editor de texto (Notepadd, Dreamweaver, Block de notas,……)un archivo como “puzzle.html”. con el siguiente contenido dentro del body:Código Html necesario para construir nuestro Puzzle
    <ul id="list1">
    <li><div><img src="imagenes/1.jpg" width="100" height="100" /></div></li>
    <li><div><img src="imagenes/2.jpg" width="100" height="100" /></div></li>
    <li><div><img src="imagenes/3.jpg" width="100" height="100" /></div></li>
    <li>div><img src="imagenes/4.jpg" width="100" height="100" /></div></li>
    <li><div><img src="imagenes/5.jpg" width="100" height="100" /></div></li>
    <li><div><img src="imagenes/6.jpg" width="100" height="100" /></div></li>
    <li>Seguireemos hasta listar nuestras doce imágenes</li>
    </ul>
    <script type="text/javascript">
    $("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
    function saveOrder() {
    var serialStr = "";
    $("#list1 li").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
    $("input[name=list1SortOrder]").val(serialStr);
    };
    </script>
  • Seguidamente crearemos nuestra hoja de estilos y la guardaremos como "estilo.css". Así:Código Css necesario para elaborar nuestro Puzzle
    body {
    font-family:Arial;
    font-size:12pt;
    padding:20px;
    width:900px;
    margin:20px auto;
    background-color: #333333;
    }
    p {
    color: #999999;
    font-weight: bold;
    font-size: 10;
    }
    h1 { font-size:16pt; }
    h2 { font-size:13pt; }
    ul { margin:0px; padding:0px; margin-left:20px; }
    #list1, #list2 {
    width:500px;
    list-style-type:none;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    #list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }
    #list1 div, #list2 div {
    width:100px;
    height:100px;
    border:solid 1px black;
    text-align:center;
    }
    #list2 { float:right; }
    .placeHolder div { background-color:white !important; border:dashed 1px gray !important;
    }
  • En el Htm, dentro del BODY, ya vimos que pusimos unas ordenes Js para inicializar los eventos. Bajaremos pues los archivos "java" necesarios y los meteremos dentro de la carpeta "js", linkcandolos dentro del HEAD, de la misma manera que llamamos a nuestra hoja de estilos:Links para nuestros estilos y scripts dntro del HEAD

Podemos ver el resultado, que nos quedaría algo como:

Resultado dinal del ejercicio

Podeis ver una Demo aquí y descargaros el ejercicio completo desde este enlace.

Fuente: Tutotiales en la Web

1.054 comentarios