2 gallery motion with dynamic image update

[z8000783]

1) Script Title: Cmotion object oriented

2) Script URL (on DD): http://www.dynamicdrive.com/forums/s...3998#post53998

3) Describe problem:

I have successfully set up a 2 gallery system using the above script and now need to be able to dynamically change the galleries using an onClick event.

This worked fine using the single system and fillup() but I can't see how to do it with the multi-gallery code.

Any advice very gratefully accepted, thanks.

John

[jscheuer1]

When you create an OO CMotion gallery, a global array named cgals gets a reference to it added. The first one would be 0 the second 1 and so one.

So you could do whatever you do to update it, then do:

cgals[0].fillup();

or:

cgals[1].fillup();

depending upon which it is. But that might be a little overkill, like if you're using the endofgallerymsg, it will make a new div for that with the same id, could get messy. But if you're not, or don't mind the messiness (it might not be observable in the galleries' behavior), I guess it's fine.

But you could avoid that by adding the highlighted (at the end of the fillup function):

this.loadedyes=1
if (endofgallerymsg!=""){
if(!this.statusdiv)
this.creatediv();
this.positiondiv();
}
}

Alternate Method:

You should also be able to obtain a reference to the gallery when it's first created by assigning it to a unique variable name, ex:

<script type="text/javascript">
var mygallery2 = new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>

Then later you can do:

mygallery2.fillup();

[z8000783]

Thanks for that swift response unfortunately neither of these worked.

All executed without errors and set up an alert to see the new value of gallery[0] and all correct with the new value.

Just for info I am not actually changing the picture but enabling/disabling certain <a href>'s to turn the link on or off. Don't know if this makes a difference.

Thanks again

John

[jscheuer1]

You should test if it's running, like put an alert in the fillup function to see if it is being executed.

But I don't understand why you would need to fillup again. If it were me, I'd go after the href's directly. Like the first link in the first gallery would be:

cgals[0].crossmain.getElementsByTagName('a')[0]

You could change it's href by going:

cgals[0].crossmain.getElementsByTagName('a')[0].href = 'javascript:alert("I\'m changed!");';

The second one by:

cgals[0].crossmain.getElementsByTagName('a')[1].href = 'javascript:alert("Me Too!");';

Be aware though that - IF these links have onclick events that alter or override their href values, then that must be taken into account. You can change or add onclick events if need be.

If you want more help:

Please post a link to a page on the web that contains the problematic code so we can check it out.

[z8000783]

Thanks again John.

Code is here -
2 motion gallery with onClick

link - petrol - should turn the first gallery to a list of moving images only with no links.

Thanks

John

[jscheuer1]

function kill_links(){
	var lnks = cgals[0].crossmain.getElementsByTagName('a');
	for (var i = lnks.length - 1; i > -1; --i){
		lnks[i].removeAttribute('href');
	}
}

<a href="#" id="pet_can" onclick="kill_links(); return false;">Petrol</a>

[z8000783]

Hi John

Many thanks for that but I am not sure it's going to work for me. You may have noticed the array (details of which I cut out for simplicity) where there will be a selection of images that become active or not depending on whether the link clicked is petrol or diesel.

This solution if I am not mistaken, simply changes all the links to off. In fact they will be off to begin with and then some will be switched on according to the choice. That why the 'reload' gallery option looked good.

Really sorry for not providing enough information on this.

John

[jscheuer1]

Well, the images don't change, right? If so, you can go through the links one by one and change them to whatever you like. There are several ways this could be done, here's one:

var petrolhrefs = [];
petrolhrefs[0] = 'something.htm';
petrolhrefs[1] = '';
petrolhrefs[2] = 'another.htm';
petrolhrefs[3] = '';
petrolhrefs[4] = 'agas.htm';
petrolhrefs[5] = '';
petrolhrefs[6] = 'moregas.htm';


var dieselhrefs = [];
dieselhrefs[0] = '';
dieselhrefs[1] = 'somethingdiesel.htm';
dieselhrefs[2] = '';
dieselhrefs[3] = 'anotherdiesel.htm';
dieselhrefs[4] = '';
dieselhrefs[5] = 'adiesel.htm';
dieselhrefs[6] = 'freediesel.htm';

function change_links(linkarray){
	var lnks = cgals[0].crossmain.getElementsByTagName('a');
	for (var i = lnks.length - 1; i > -1; --i){
		if(linkarray[i]){
			lnks[i].href = linkarray[i];
		} else {
			lnks[i].removeAttribute('href');
		}
	}
}

        <div><a href="#" id="pet_can" onclick="change_links(petrolhrefs); return false;">Petrol</a></div><br>
        <div><a href="#" id="dies_can" onclick="change_links(dieselhrefs); return false;">Diesel</a></div><br>

Same demo (refresh the page though to make sure changes have taken effect):

http://home.comcast.net/~jscheuer1/s...otion/oo_h.htm

[z8000783]

Hi John

Just to say once again, many thanks for you invaluable help. I needed flexibility on the live and inactive links but got there in the end.

Still more to do but here's the page so far, great stuff.

testpage

John