Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding hyperlinks to a slideshow

    I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images.

    I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work.

    This is the slideshow code:
    Code:
    window.onload = initAll;
    
    var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">')
    var thisUrl = 0;
    
    var gallery = new Array("portfolio_ota.jpg", "portfolio_bashbrothers.jpg");
    var thisImage = 0;
    
    var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website");
    var thisTitle = 0;
    
    var gallery_number = new Array("1", "2");
    var thisNumber = 0;
    
    function initAll() {
    document.getElementById("previous").onclick = processPrevious;
    document.getElementById("next").onclick = processNext;
    }
    	
    function processPrevious () {
    if (thisUrl == 0) {
    thisUrl = gallery_url.length;
    }
    thisImage--;
    document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
    document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
    document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
    return false;
    }
    	
    function processNext () {
    thisImage++;
    if (thisUrl == gallery_url.length) {
    thisUrl = 0;
    }
    document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
    document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
    document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
    return false;
    }
    I know that for the most part, this script works. It was only when I tried to add the component that involved adding a hyperlink that it broke. The bit of code in the HTML that it directly affects is <div id="view_portfolio"> &nbsp; </div>

    Does anyone know why the javascript doesn't work? I have a feeling it's because I haven't applied the id tag in the HTML properly, but I don't know what exactly is wrong about it. I am hoping someone here can shed some light on the situation!

    The gallery I have made so far is at http://www.clarebyrnedesign.com.au/portfolio.html, except that at the moment, the images don't show. I've attached the javascript & html code.

    Thanks!
    Attached Files Attached Files

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    82
    Thanks
    0
    Thanked 6 Times in 6 Posts
    This

    document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';

    Should be this:

    document.getElementById("view_portfolio").innerHTML = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';

    <div> tags to not have an src attribute

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed src to innerHTML & it didn't make any difference ... I'm pretty sure I tried that when I was first trying to make it work. I tried using a span instead of a div as well, but that didn't work either ...

  • #4
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I did just discover that I didn't close the image tag in the javascript file properly *facepalm*

    This is what both those lines now reads:
    document.getElementById("view_portfolio").innerHTML = gallery_url[thisUrl]+'<img src="'+thisImage+'" alt="" width="450" height="317" border="0" /></a>'

    However ... It still doesn't work. Which is frustrating. Is the problem possibly rooted in my html coding?


  •  

    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
    •