Direct Link
Source code
| <!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: #eee; |
| width: 100%; |
| height: 100%; |
| } |
| #border { |
| position:absolute; |
| width:440px; |
| height:340px; |
| margin-left:-220px; |
| margin-top:-170px; |
| left:50%; |
| top:50%; |
| background:#fff; |
| border:#aaa solid 1px; |
| } |
| #caption { |
| position:absolute; |
| width:440px; |
| height:60px; |
| 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:#fff; |
| } |
| #screen span { |
| position:absolute; |
| overflow:hidden; |
| border:#aaa solid 1px; |
| background:#fff; |
| } |
| #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 src="../images/im6.jpg" alt="one day in <b>early</b> autumn"></span> |
| <span><img src="../images/im2.jpg" alt="detailing the raw <b>material</b>"></span> |
| <span><img src="../images/im3.jpg" alt="Waiting for the right <b>moment</b>"></span> |
| <span><img src="../images/im4.jpg" alt="<b>carefully</b> weight the options"></span> |
| <span><img src="../images/im5.jpg" alt="go <b>ahead</b>, I told myself"></span> |
| <span><img src="../images/im1.jpg" alt="Put <b>faith</b> to work"></span> |
| <span><img src="../images/im7.jpg" alt="<b>rough</b> tension"></span> |
| <span><img src="../images/im18.jpg" alt="mensuration, <b>prior</b> to meditation"></span> |
| <span><img src="../images/im8.jpg" alt="taking a break <b>too</b> long"></span> |
| <span><img src="../images/im10.jpg" alt="open to a <b>deep</b> breath, too"></span> |
| <span><img src="../images/im12.jpg" alt="I fell for <b>you</b>"></span> |
| <span><img src="../images/im17.jpg" alt="Paradise could be <b>beneath</b>"></span> |
| <span><img src="../images/im14.jpg" alt="<b>transmission</b>, essential"></span> |
| <span><img src="../images/im15.jpg" alt="little, hardly any <b>nuance</b>"></span> |
| <span><img src="../images/im16.jpg" alt="ends <b>meet</b> through thick and thin"></span> |
| <span><img src="../images/im9.jpg" alt="I shall <b>resist</b>"></span> |
| </div> |
| <div id="caption">- click - </div> |
| <script type="text/javascript"> |
| // starter |
| siM.init(); |
| </script> |
| </body> |
| </html> |
Bonjour,
Cette galerie est vraiment très intéressante.
Je souhaitais l’adapter pour les besoins d’un site. Malheureusement je ne parviens pas à rentrer dans le code.
Aussi je me permets de vous soumettre les idées suivantes afin de faciliter la compréhension du code :
Ainsi je pense qu’un plus grand nombre d’utilisateurs sera à même d’étudier votre création et de s’en inspirer !
Arghhhh… ça y est, je déprime. Mais vous avez raison, je vais tenter de me soigner sur les deux points que vous soulignez très justement.
I want to buy one of your design for my website. please tell me how can I purchase?
Regards
Gérard,
Vos magnifiques perspectives comme cette galerie qui mérite d’être vue sont vraiment intéressantes. Vous êtes un grand Maître de Scripts et Css pour Moi qui n’est qu’une novice pour Dreamweaver et Flash ! j’espère “évoluer” oui ! je prends note de toutes vos remarques !
Bonne Continuation,
Kate
France/Isère
Sorry Dans ceci file on ne voit pas le footer
http://arredocasa.altervista.o.../news.html
help me
Hello, great script but the images are not loaded, neither an image placeholder.
What am I missing?
thank you
bonjour
pourquoi j’ai oublié de citer le créateur trame de l’index du site croqnature.fr ?
j’utilise One Day depuis plusieurs années et je promets un lien dhteumeuleu.com à ma rubrique “contacts”
cordialement
Grazie per questo bellissimo script.
L’ho utilizzato qui.
http://arredocasa.altervista.o.../news.html
I crediti dell’autore sono citati nel footer.
“Autore Script”
Grazie.
I meet such a fabulous designs in this blog which attracted to my creative mind…
Good ideas & color combination.
With Regards
Mariah Williams
Senior Administrator
Datarecoverysoftware quick solutions
Truly wonderful; sharp, intelligent and elegant.