Results 1 to 9 of 9

Thread: 2 gallery motion with dynamic image update

  1. #1
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 gallery motion with dynamic image update

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    cgals[0].fillup();
    or:

    Code:
    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):

    Code:
    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:

    Code:
    <script type="text/javascript">
    var mygallery2 = new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
    </script>
    Then later you can do:

    Code:
    mygallery2.fillup();
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    cgals[0].crossmain.getElementsByTagName('a')[0]
    You could change it's href by going:

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

    Code:
    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.
    Last edited by jscheuer1; 11-14-2011 at 08:26 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    function kill_links(){
    	var lnks = cgals[0].crossmain.getElementsByTagName('a');
    	for (var i = lnks.length - 1; i > -1; --i){
    		lnks[i].removeAttribute('href');
    	}
    }
    Code:
    <a href="#" id="pet_can" onclick="kill_links(); return false;">Petrol</a>
    Last edited by jscheuer1; 11-16-2011 at 01:02 AM. Reason: remove demo link
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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');
    		}
    	}
    }
    Code:
            <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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by z8000783; 11-18-2011 at 01:27 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •