Ciao
Intervenedo su questo oggetto iniziale
http://www.egocentrique.it/gallery_js_01.htm
ho eliminato una colonna di miniature trasformandolo in questo
http://www.egocentrique.it/2_gallery_js_01.htm
Purtroppo si perde il gioco di apertura delle immagini prechè la colonna di destra non si espande più verso l'interno ma verso l'esterno.
Con la mie asperienza di js potrei arrivarci forse in un mese(se ci arrivo)
c'è qualche esperto che mi può dare una mano a ritoccare il codicr che allego qui di seguito?
------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>one day - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background-color: transparent;
width: 100%;
height: 90%;
}
#border {
position:absolute;
width:440px;
height:340px;
margin-left:-220px;
margin-top:-170px;
left:50%;
top:50%;
background:transparent;
border:#aaa solid 1px;
}
#caption {
position:absolute;
width:440px;
height:70px;
left:50%;
top:50%;
margin-left:-220px;
margin-top:175px;
}
#screen {
position:absolute;
width:400px;
height:300px;
margin-left:-200px;
margin-top:-150px;
left:50%;
top:50%;
background:transparent;
}
#screen span {
position:absolute;
overflow:hidden;
border:#aaa solid 1px;
background:transparent;
}
#screen img{
position:absolute;
left:-32px;
top:-32px;
cursor: pointer;
filter: alpha(opacity=100);
}
#caption {
color: #666;
font-family: georgia, 'times new roman', times, veronica, serif;
font-size: 1em;
text-align: center;
}
#caption b {
font-size: 2em;
}
</style>
<script type="text/javascript">
// ================================================== =========
// script: Gerard Ferrandez - Ge-1-doot - October 2005
// http://www.dhteumeuleu.com
// Updated - Feb 2010 - Namespaced script
// ================================================== =========
//
var siM = function () {
/* ---- private vars ---- */
var obj = [], scr, spa, cap, img, W, Wi, Hi, wi, hi, Sx, Sy, M;
var xb = 0, yb = 0, ob = - 1;
//////////////////////////////////////////////////////////
var Nx = 4; //size grid x
var Ny = 4; //size grid y
var Tx = 3; // image width
var Ty = 3; // image height
var Mg = 10; // margin
var SP = 1; // speed
//////////////////////////////////////////////////////////
var Cobj = function (o, x, y) {
this.o = o;
this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
this.x = x;
this.y = y;
this.l = 0;
this.t = 0;
this.w = 0;
this.h = 0;
this.s = -1;
this.spa = spa[o].style;
this.img = img[o];
this.txt = img[o].alt;
this.img.alt = "";
/* center image */
this.img.center = function () {
this.style.left = Math.round( -(this.width - Wi) / 2) + "px";
this.style.top = Math.round( -(this.height - Hi) / 2) + "px";
}
/* events */
this.img.onclick = function () {
obj[o].click();
}
this.img.onload = function () {
this.center();
}
/* initial display */
this.zoom();
}
/* zooming loop */
Cobj.prototype.zoom = function() {
this.f = false;
this.l += this.li * this.s;
this.t += this.ti * this.s;
this.w += wi * this.s;
this.h += hi * this.s;
if ((this.s > 0 && this.w < Wi) || (this.s < 0 && this.w > Sx)) {
/* loop */
var o = this.o;
setTimeout(function() {
obj[o].zoom();
}, 16);
} else {
/* finished */
if (this.s > 0) {
this.l = this.ix * M + this.ix * Sx;
this.t = this.iy * M + this.iy * Sy;
this.w = Wi;
this.h = Hi;
} else {
this.l = this.x * M + this.x * Sx;
this.t = this.y * M + this.y * Sy;
this.w = Sx;
this.h = Sy;
}
}
/* html animation */
this.spa.left = Math.round(this.l) + "px";
this.spa.top = Math.round(this.t) + "px";
this.spa.width = Math.round(this.w) + "px";
this.spa.height = Math.round(this.h) + "px";
this.spa.zIndex = Math.round(this.w);
}
Cobj.prototype.click = function() {
this.img.center();
/* zooming logic */
if (this.s > 0) {
this.s = -1;
this.zoom();
cap.innerHTML = this.txt;
} else if (this.s < 0) {
if (ob >= 0) {
obj[ob].s = - 1;
obj[ob].zoom();
}
ob = this.o;
this.s = 1;
this.zoom();
cap.innerHTML = this.txt;
}
}
/* ====== init script ====== */
var init = function () {
/* html elements */
scr = document.getElementById("screen");
spa = scr.getElementsByTagName("span");
img = scr.getElementsByTagName("img");
cap = document.getElementById("caption");
/* variables */
W = scr.offsetWidth;
H = scr.offsetHeight;
M = W / 40;
Sx = (W - (Nx - 1) * M) / Nx;
Sy = (H - (Ny - 1) * M) / Ny;
Wi = Tx * Sx + (Tx - 1) * M;
Hi = Ty * Sy + (Ty - 1) * M;
SP = M * Tx * SP;
wi = (Wi - Sx) / SP;
hi = (Hi - Sy) / SP;
/* create objects */
for (var k = 0, i = 0; i < Nx; i++) {
for (var j = 0; j < Ny; j++)
obj[k] = new Cobj(k++, i, j);
}
}
return {
init : init
}
}();
</script>
</head>
<body>
<div id="border"></div>
<div id="screen">
<span>[img]image_slide_01/01.jpg[/img]early[/b] autumn"></span>
<span>[img]image_slide_01/02.jpg[/img]material[/b]"></span>
<span>[img]image_slide_01/03.jpg[/img]moment[/b]"></span>
<span>[img]image_slide_01/04.jpg[/img]carefully[/b] weight the options"></span>
<span>[img]image_slide_01/05.jpg[/img]ahead[/b], I told myself"></span>
<span>[img]image_slide_01/06.jpg[/img]faith[/b] to work"></span>
<span>[img]image_slide_01/07.jpg[/img]rough[/b] tension"></span>
<span>[img]image_slide_01/08.jpg[/img]prior[/b] to meditation"></span>
<span>[img]image_slide_01/09.jpg[/img]too[/b] long"></span>
<span>[img]image_slide_01/10.jpg[/img]deep[/b] breath, too"></span>
<span>[img]image_slide_01/11.jpg[/img]you[/b]"></span>
<span>[img]image_slide_01/12.jpg[/img]beneath[/b]"></span>
<span>[img]image_slide_01/01.jpg[/img]transmission[/b], essential"></span>
<span>[img]image_slide_01/02.jpg[/img]nuance[/b]"></span>
<span>[img]image_slide_01/03.jpg[/img]meet[/b] through thick and thin"></span>
<span>[img]image_slide_01/04.jpg[/img]resist[/b]"></span>
</div>
<div id="caption">- click - </div>
<script type="text/javascript">
// starter
siM.init();
</script>
</body>
</html>
------------------------------------------------------------
e questa è la pagina completa del cms che la apre con un wrapper
http://www.egocentrique.it/cms/?template=ego_gg_44
