<div id="screen">
<div><img title="http://mail.google.com" src="images/weakening/english/h-1.jpg" alt="3,3" /></a></div>
<div><img title="http://www.google.com" src="images/weakening/english/h-2.jpg" alt="3,3" /></div>
<div><img title="http://www.google.com/1" src="images/weakening/english/h-3.jpg" alt="3,3" /></div>
<div><img title="http://www.google.com/2" src="images/weakening/english/h-4.jpg" alt="3,3" /></div>
<div><img title="http://www.google.com/3" src="images/weakening/english/h-5.jpg" alt="3,3" /></div>
<div><img title="http://www.google.com/4" src="images/weakening/english/v-1.jpg" alt="2,4" /></div>
<div><img title="http://www.google.com/5" src="images/weakening/english/v-2.jpg" alt="2,4" /></div>
<div><img title="http://www.google.com/6" src="images/weakening/english/v-3.jpg" alt="2,4" /></div>
<div><img title="http://www.google.com/7" src="images/weakening/english/v-4.jpg" alt="2,4" /></div>
</div>

means we need to add link as title.
Now search for following code
if (moves[0] == this)
moves = new Array();
replace it with following code
if (moves[0] == this){
for (var p in this) {
if(p == ‘i’){
var ci = this[p] – 1;
}
}
window.open(document.getElementById(“screen”).getElementsByTagName(“div”)[ci].getElementsByTagName(“img”)[0].title,’_blank’);
moves = new Array();
}

First this is the structure of the images we need to add

means we need to add link as title.

Now search for following code
if (moves[0] == this)
moves = new Array();

replace it with following code

if (moves[0] == this){
for (var p in this) {
if(p == ‘i’){
var ci = this[p] – 1;
}
}
window.open(document.getElementById(“screen”).getElementsByTagName(“div”)[ci].getElementsByTagName(“img”)[0].title,’_blank’);
moves = new Array();
}

Kind Regards

I made “5 minutes” info site, in the meantime trying to desing final website for my architectual projects… until i found “Weakening neighbors”. Your work is an answer for all my aesthetic needs.
Thank you, best wishes and keep on.
R

comment intégrer ce code à iweb ? par un fragment html directement ? comment l’utiliser correctement ? merci d’avance et très beau travail.

No simple way to do so in this demo, sorry. Image dimensions will adjust in function of container’s size.

just one question: where to “touch” the script to change dimensions of the pictures?
or is it too complicate?
thanks
le tophe

And fact that you allow people to use your scripts make me even more amazed. I’ve tried to do it my self but Im not so good programmer and wanna ask something. My ida is to put some bigger images in that and when you click on some box and it get bigger I wanted to make it possible to move image like in that (http://www.dhteumeuleu.com/tom...row-again/) example. Can you give some tips how to do it?

This script is certainly one of the most complex I have ever written. But the good news is that I have added the necessary logic to handle the “auto-loop”

http://www.dhteumeuleu.com/dht...-auto.html

Please give a try to this version and let me know what you think.

Gerard

I have developed css and javascript for years, until about 1 and a half year ago, where I completely put my focus on Actionscript, which makes it so much easier to accomplish these kind of things, but by far not as native and accessible.

Keep up the cool work!

i admire your talent, salutes from my side

Sanbhu

now… I want to use this gallery on a site I’m working on, but for this site the number of columns and rows would move to smaller or larger depending on the amount of photos, how can I do this correctly? my attempts has given some problems because the photograph is open under some thumbnails :~( u can help me?

Wow… cracking your brain for 2 days in a row… all my apologies about that

The Javascript “module pattern” I use is very powerfull. All variables and methods used in the script are “private” members and cannot be accessed from the outside.

You can create “public” resources in the return {} bloc. In your case, let’s add an “open” function :

	return {
		// ==== public bloc ====
		init : init,
		open : function (index) {
			divs[index].click();
		}
	}

You will be able to call it from the outside (e.g. in an event bloc) like this:

res.open(0); // 0 for the first image, 1 for the next one, etc...

for example, this code will launch the script and open the first image:

// ==== start script ====
setTimeout(function() {
	res.init();
	res.open(0);
}, 100);

Hope this helps,

Gerard