CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Adding hyperlinks to a slideshow (http://www.codingforums.com/showthread.php?t=191712)

Calamity-Clare 03-17-2010 01:33 PM

Adding hyperlinks to a slideshow
 
2 Attachment(s)
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!

harrierdh 03-17-2010 06:42 PM

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

Calamity-Clare 03-18-2010 07:45 AM

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 ...

Calamity-Clare 03-18-2010 10:17 AM

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?


All times are GMT +1. The time now is 01:25 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.