SqueezeBox - Expandable Lightbox (v1.1)

juanpablosolari · #1 (**permalink**) 16/07/2012, 11:40

Estimados estoy intentando armar esto:

http://digitarald.de/project/squeezebox/1-1/showcase/ajax/

Me baje los archivos, CSS, JS, IMGs y Motools.

Los Motools son los siguientes:

http://mootools.net/core/

Element.Dimensions
Fx.Tween
Fx.Morph
Selectors Este no lo encontre en la lista.
JSON
DomReady (facultative)

A parte de el JS que te da para descargar dan el siguiente codigo:

Código Javascript:

Ver originalwindow.addEvent('domready', function() {
 
    /**
     * That CSS selector will find all <a> elements with the
     * attribute rel="boxed"
     *
     * The second argument sets additional options.
     */
    SqueezeBox.assign($$('a[rel=boxed]'), {
        size: {x: 300, y: 400},
        ajaxOptions: {
            method: 'get' // we use GET for requesting plain HTML (you can skip it, it is the default value)
        }
    });
 
});

El mismo lo puse en el mismo HTML entre la etiqueta script

El HTML quedo de la sigueinte manera:

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="assets/SqueezeBox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="SqueezeBox.js"></script>
 
</head>
 
<body>
 
<script>
 
window.addEvent('domready', function() {
 
    /**
     * That CSS selector will find all <a> elements with the
     * attribute rel="boxed"
     *
     * The second argument sets additional options.
     */
    SqueezeBox.assign($$('a[rel=boxed]'), {
        size: {x: 300, y: 400},
        ajaxOptions: {
            method: 'get' // we use GET for requesting plain HTML (you can skip it, it is the default value)
        }
    });
 
});
 
</script>
 
<a href="asd.html" rel="boxed">What is it?</a> |
<a href="asd.html" rel="boxed">Box with JavaScript</a>
 
 
</body>
</html>

Y el archivo asd.html que tiene el contenido que deberia emerger cuando haces click es el siguiente:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
 
<p> ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
 ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
  ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
   ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
    ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
     ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br />
      ASD AASD AD ASKLPSASKLASLKLAÑKLÑSALÑSKL <br /></p>
 
</body>
</html>

El mismo no funciona... No abre en la ventana emergente, actua como un redireccionamiento normal.
Agradezco si me podrian ayudar.

Un saludo cordial
Juan Pablo!