SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Links to slideshow

    Hello,
    I have a nice working javascript for 2 slideshows on one page.
    Now I would like to add links to the differente images, but unfortunatelly I donīt know how to do this. Could anyone help me please? Thanks in Advance!!!

    Code in the Head
    <script type="text/javascript">

    function swapImage(id, path)
    {
    var el = document.getElementById(id);
    el.count = el.count || 0;
    el.src = path[el.count];
    el.count = (el.count + 1) % path.length;
    }
    function slideshow() {
    setInterval(function () {
    swapImage('slide1', [
    "website_images/hoofdcat_2.jpg",
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg",
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg"
    ]);
    swapImage('slide2', [
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg",
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg"
    ]);
    }, 3000);
    }
    onload = slideshow;
    </script>

    Code in the Body:

    <TABLE>

    <TD WIDTH="314" HEIGHT="445">
    <img id="slide1" height="445" width="315" src="website_images/hoofdcat_1.jpg">


    </TD>
    <TD WIDTH="314" HEIGHT="445">
    <img id="slide2" height="445" width="315" src="website_images/hoofdcat_2.jpg">
    </TD>
    </TR>
    </TABLE>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You could move the identifier to a link instead:

    Code html4strict:
    <a id="slide1" href="#"><img  height="445" width="315" src="website_images/hoofdcat_1.jpg"></a>

    and then in the script, update the href with the path, and get the image to update its src attribute.

    Code javascript:
    var el = document.getElementById(id),
        img = el.getElementsByTagName('img')[0];
     
    el.count = el.count || 0;
    el.href = path[el.count];
    img.src = el.href;
    el.count = (el.count + 1) % path.length;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    thank you for your reply!

    Now the slideshow have 2 links.

    But how can I put links to all images and not just to a seperate slideshow.

    So to every seperate image, for example:
    swapImage('slide1', [
    "website_images/hoofdcat_2.jpg", www.test1.com
    "website_images/hoofdcat_1.jpg", www.test2.com
    "website_images/hoofdcat_2.jpg", domain disabled
    "website_images/hoofdcat_1.jpg", test4.com
    "website_images/hoofdcat_2.jpg" test5.com
    ]);
    swapImage('slide2', [
    "website_images/hoofdcat_1.jpg", www.test6.com
    "website_images/hoofdcat_2.jpg", test7.com
    "website_images/hoofdcat_1.jpg", www.test8.com
    "website_images/hoofdcat_2.jpg" www.test9.com
    ]);
    }, 3000);
    }
    onload = slideshow;
    </script>

    Hope you can help me with this last part of my problem.

    Thanks in advance!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maikel1234 View Post
    Hope you can help me with this last part of my problem
    Here's an array of images from before:

    Code javascript:
    [
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg",
    "website_images/hoofdcat_1.jpg",
    "website_images/hoofdcat_2.jpg"
    ]

    You can make each item in that array an object, with an image property and a link property.

    Code javascript:
    [
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.abc.com/here'},
    {image: "website_images/hoofdcat_2.jpg", link: 'http://www.def.com/there'},
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.hij.com/hither'},
    {image: "website_images/hoofdcat_2.jpg" link: 'http://www.klm.com/thither'}
    ]

    Then in the code, you refer to each of those image/link properties.

    Code javascript:
    el.href = path[el.count].link;
    img.src = path[el.count].image;
    Last edited by paul_wilkins; May 17, 2011 at 15:15.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    iīm sorry to ask you again, but I think i did something wrong.
    Now the imageīs donīt move anymore.

    Here is the code that a made with your advice, but agian I think I did something wrong?

    <script type="text/javascript">

    function swapImage(id, path)
    {
    var el = document.getElementById(id),
    img = el.getElementsByTagName('img')[0];

    el.count = el.count || 0;
    el.href = path[el.count].link;
    img.src = path[el.count].image;
    el.count = (el.count + 1) % path.length;
    }
    function slideshow() {
    setInterval(function () {
    swapImage('slide1',[
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.abc.com/here'},
    {image: "website_images/hoofdcat_2.jpg", link: 'http://www.def.com/there'},
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.hij.com/hither'},
    {image: "website_images/hoofdcat_2.jpg" link: 'http://www.klm.com/thither'},
    ]);
    swapImage('slide2', [
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.abc.com/here'},
    {image: "website_images/hoofdcat_2.jpg", link: 'http://www.def.com/there'},
    {image: "website_images/hoofdcat_1.jpg", link: 'http://www.hij.com/hither'},
    {image: "website_images/hoofdcat_2.jpg" link: 'http://www.klm.com/thither'},
    ]);
    }, 3000);
    }
    onload = slideshow;
    </script>


    <body>


    <TABLE>

    <TD WIDTH="314" HEIGHT="445">
    <a id="slide1" href="http://www.den-elzen.nl/over-den-elzen"><img height="445" width="315" src="website_images/hoofdcat_1.jpg"></a>




    </TD>
    <TD WIDTH="314" HEIGHT="445">
    <a id="slide2" href="http://www.den-elzen.nl/openingstijden"><img id="slide2" height="445" width="315" src="website_images/hoofdcat_2.jpg"></a>
    </TD>
    </TR>
    </TABLE>



    Hope you can help me agian

    Thanks in Advance!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maikel1234 View Post
    iīm sorry to ask you again, but I think i did something wrong.
    Now the imageīs donīt move anymore.
    It looks like there's a trailing comma in the array of items.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha Iīm not so smart with it.

    Iīm really sorry, what do you mean with that ??

    Iīm a starter with javascript....

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found it !!!!

    I search and saw what you ment!

    Thank you for your help!!

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maikel1234 View Post
    haha Iīm not so smart with it.

    Iīm really sorry, what do you mean with that ??
    What I mean, is that in an array, commas are placed between each item in the array. There should not be a comma at the end of the array though. That's the trailing comma I was meaning.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,
    thank you for helping me out with the script.

    One last question.

    In firefox and safari itīs works really well, but in IE the slideshow doesnīt repeat.
    So when all images have been shown, it stops? In Firefox the slideshow than continious with the first image.

    Is there a code, so i can let the slideshow repeat in IE?

    Here is the code:

    <script type="text/javascript">

    function swapImage(id, path)
    {
    var el = document.getElementById(id),
    img = el.getElementsByTagName('img')[0];

    el.count = el.count || 0;
    el.href = path[el.count].link;
    img.src = path[el.count].image;
    el.count = (el.count + 1) % path.length;
    }
    function slideshow() {
    setInterval(function () {
    swapImage('slide2',[

    {image: "images/slide/sneek.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/malino.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/sneek.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/eagle.jpg", link: 'http://www.den-elzen.nl/home'},

    ]);
    swapImage('slide1', [
    {image: "images/slide/boxton.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/osterund.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/varin.jpg", link: 'http://www.den-elzen.nl/home'},
    {image: "images/slide/rindal.jpg", link: 'http://www.den-elzen.nl/home'},
    ]);
    }, 3500);
    }
    onload = slideshow;
    </script>


    In the body:

    <TABLE>

    <TD WIDTH="314" HEIGHT="445">
    <a id="slide1" href="http://www.den-elzen.nl/over-den-elzen"><img height="445" width="315" src="images/slide/boxton.jpg"></a>




    </TD>
    <TD WIDTH="314" HEIGHT="445">
    <a id="slide2" href="http://www.den-elzen.nl/openingstijden"><img id="slide2" height="445" width="315" src="images/slide/sneek.jpg"></a>
    </TD>
    </TR>
    </TABLE>

    Hope you can help.

    Thanks in Advance!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maikelz View Post
    In firefox and safari itīs works really well, but in IE the slideshow doesnīt repeat.
    So when all images have been shown, it stops? In Firefox the slideshow than continious with the first image.

    Is there a code, so i can let the slideshow repeat in IE?
    It's the trailing comma in the list of items that is still causing you problems.

    When there's a trailing comma, Internet Explorer thinks there's another unspecified item in the list, so your list is no longer 4 items long but 5 items long instead. Then Internet Explorer tries to read that 5th item and fails, stopping the script.

    Get rid of that trailing comma in each of the arrays, and your problem will be solved.

    If you don't understand what a trailing comma is, here is is highlighted in red:

    Code:
    var array = [1, 2, 3, 4,];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,
    I really appriciate it !!


Tags for this Thread

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
  •