www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Photo Galleries Javascript

  1. #1
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64

    Arrow Photo Galleries Javascript

    I have 3 Galleries on a website controlled by on each of the seperate pages by <body onLoad="photoGallery()"> with the function detail for each of the galleries in the <head> section of the individual pages.... and everything worked fine!

    When I seek to collect all my Javascripts bits into a .js file the Galleries no longer work! The .js file connects with the pages fine as all the other javascripts work.

    I am using
    var c=0
    var s
    function photoGallery()
    {
    if (c%3==0){document.getElementById('photo-gallery').src = "sequence1.jpg";}
    if (c%3==1){document.getElementById('photo-gallery').src = "sequence2.jpg";}
    if (c%3==2){document.getElementById('photo-gallery').src = "sequence3.jpg";}
    c=c+1
    s=setTimeout("photoGallery()",1600)
    }

    I have tried different things to give the Galleries a different identity but cannot get to work! Is there a way around this or do I have to keep the function script in the head sections?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Exclamation

    Show a link to your combined code so we can see it in action.

  3. #3
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    Currently only this on my WAMP Localhost.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    make sure the different set have different vars.

    it looks like this would be a good chance to rewrite that overly-repetitive code as well.

  5. #5
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    Many thanks. Got them working from the .js file. However I am still working with the overly-repetitve code!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Lightbulb

    One easy change from ...
    Code:
    var c=0
    var s
    function photoGallery()
    {
    if (c&#37;3==0){document.getElementById('photo-gallery').src = "sequence1.jpg";}
    if (c%3==1){document.getElementById('photo-gallery').src = "sequence2.jpg";}
    if (c%3==2){document.getElementById('photo-gallery').src = "sequence3.jpg";}
    c=c+1
    s=setTimeout("photoGallery()",1600)
    }
    to...
    Code:
    var c=0
    var s
    
    function photoGallery() {
      var tcnt = (c % 3) + 1;
      document.getElementById('photo-gallery').src = "sequence"+tcnt+".jpg";
      c=c+1;
      s=setTimeout("photoGallery()",1600);
    }
    Untested, but it should be close to what you want.

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
      s=setTimeout("photoGallery()",1600);
    should be
    Code:
    s=setTimeout(photoGallery, 1600);

  8. #8
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    Hi JMRKER & rnd me.. working on the chain..

    The reduced and tightened code certainly reduces the overly-repetitve code in a photoGallery with a large number of images. However, I have not as yet got the reduced code to work!

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Exclamation

    Quote Originally Posted by webiter View Post
    Currently only this on my WAMP Localhost.
    Quote Originally Posted by webiter View Post
    Hi JMRKER & rnd me.. working on the chain..

    The reduced and tightened code certainly reduces the overly-repetitve code in a photoGallery with a large number of images. However, I have not as yet got the reduced code to work!
    I'm not exactly sure how we can help without seeing your whole code associated with the gallery
    with your post explanations published above.

  10. #10
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    The working code in the long form which is working by displaying the sequence

    var c=0
    var s
    function photoGallery()
    {
    if (c%7==0){document.getElementById('photo-Gallery').src = "sequence1.jpg";}
    if (c%7==1){document.getElementById('photo-Gallery').src = "sequence2.jpg";}
    if (c%7==2){document.getElementById('photo-Gallery').src = "sequence3.jpg";}
    if (c%7==3){document.getElementById('photo-Gallery').src = "sequence4.jpg";}
    if (c%7==4){document.getElementById('photo-Gallery').src = "sequence5.jpg";}
    if (c%7==5){document.getElementById('photo-Gallery').src = "sequence6.jpg";}
    if (c%7==6){document.getElementById('photo-Gallery').src = "sequence7.jpg";}
    c=c+1
    s=setTimeout("photoGallery()",1600)
    }

    Trying to get this reduced (your) code working but currently without success. Thanks for your patients.

    var c=0
    var s
    function photoGallery() {
    var tcnt = (c % 7) + 1;
    document.getElementById('photo-gallery').src = "sequence"+tcnt+".jpg";
    c=c+1;
    s=setTimeout(photoGallery, 1600);
    }

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Lightbulb

    In the first section of "if ..." you have an id="photo-Gallery"
    but in the second (reduced) form, you use id="photo-gallery"

    Can't be both and work correctly.

  12. #12
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    Hi JMRKER,
    Got it. A great result. Thanks for the tip.

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Thumbs up

    Quote Originally Posted by webiter View Post
    Hi JMRKER,
    Got it. A great result. Thanks for the tip.
    You're most welcome from all of us, I'm sure.
    Happy to help.
    Good Luck!

  14. #14
    Join Date
    Jul 2011
    Location
    Irish Republic
    Posts
    64
    I have a lot of images feeding three of these javascript image galleries. I tried tidying up by putting all the images in a folder named box. l then placed the folder name box as follows .src = "box/sequence"+tcnt+".jpg"; but it did not work!

    var c=0
    var s
    function imageGallery() {
    var tcnt = (c % 7) + 1;
    document.getElementById('photo-gallery').src = "sequence"+tcnt+".jpg";
    c=c+1;
    s=setTimeout(imageGallery, 1600);
    }

    Is there a way to achieve the tidy up?

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257
    Where is the "box" directory in relation to the script directory?

    If below it:
    xxx.src = "./box/sequence"+tcnt+".jpg";

    If on same level:
    xxx.src = "../box/sequence"+tcnt+".jpg";

    If somewhere else, specify path...
    xxx.src = 'http://domain.???/box/sequence'+tcnt+".jpg";

    UNLESS "sequence" is also a directory, then add '/' after, like: 'sequence/'

    Difficult to give a specific answer without more information.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles