/    Sign up×
Community /Pin to ProfileBookmark

Javascript Captions

Copy linkTweet thisAlerts:
Jul 30.2007

Hey all,

I’m trying to implement a photo gallery which allows the user to navigate through a set of images using a previous and next button. I have managed to get the images displaying correctly but i need to have captions applied to each imge.

Below is my javascript code. I realise this is probably an extremely simple question to answer but i’m new to javascript and am having a bit of a mental block!

Any help would be much appreciated!

[CODE]<<script type=”text/javascript”>
// List image names without extension
var myImg= new Array(3)
myImg[0]= “1”;
myImg[1]= “2”;
myImg[2]= “3”;
myImg[3]= “4”;

// Tell browser where to find the image
myImgSrc = “Assets/Editorial/”;

// Tell browser the type of file
myImgEnd = “.jpg”

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Load function after page loads
window.onload=loadImg;
</script>[/CODE]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Arty_EffemJul 30.2007 — Hey all,

I'm trying to implement a photo gallery which allows the user to navigate through a set of images using a previous and next button. I have managed to get the images displaying correctly but i need to have captions applied to each imge.

Below is my javascript code.[/QUOTE]Nobody wants to modify code as poor as that. Nowadays scripts using multiple global variables are globally frowned upon by the cognoscente, and are to be avoided as potentially troublesome.

Try [B][COLOR="SeaGreen"]MultiSlide[/COLOR][/B], which meets your stated specification but doesn't expect you to rename your image files, modify its arrays or run the risk of a variable name conflict.
Copy linkTweet thisAlerts:
@squashedfrogauthorJul 30.2007 — Thanks, I thought my code was looking a tad rough round the edges...was a bit of an amature stab in the dark!

Cheers for the link, i'll give it a go! ?
Copy linkTweet thisAlerts:
@DokJul 30.2007 — Nobody wants to modify code as poor as that[/QUOTE]Don't be arrogant. He is asking in a polite manner and maybe he's learning how to do it himself which is so much better than blindly copying what others made.

@ squashedfrog: Where do you want the caption? What does your HTML look like?
Copy linkTweet thisAlerts:
@squashedfrogauthorJul 30.2007 — Hey,

Thanks...i spose everyone has to start somewhere lol

Below is my HTML, Ideally I would like to have the caption placed in the caption DIV (obv)...I was thinking i could maybe have an additional array in the Javascript containing the captions as strings which also change when the prev and next buttons are clicked??? Tell me if i'm toally barking up the wrong tree ?

[CODE]<body>
<div id="container">
<div id="header">
<div id="navigation">
<ul>
<li><a href="editorial.htm">Editorial</a></li>
<li><a href="commericial.htm">Commercial</a></li>
<li><a href="beauty.htm">Beauty</a></li>
<li><a href="cv.htm">CV</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>
</div>
<div id="content"><img name="imgSrc" id="imgSrc">
<div id="caption"></div>
</div>

<div id="footer">
<table>
<tr>
<td><a href="#" onClick="prev();"><img src="Assets/btnPrevious.gif" border="0"/></a></td>
<td><img src="Assets/editorialReflective.gif" /></td>
<td><a href="#" onClick="next();"><img src="Assets/btnNext.gif" border="0"/></a></td>
</tr>
</table>
</div>
</div>
</body>[/CODE]
Copy linkTweet thisAlerts:
@DokJul 30.2007 — Tell me if i'm toally barking up the wrong tree[/QUOTE]You're not. That appraoch is fine with what you've got now. Sounds like you already figured out how to do it.
Copy linkTweet thisAlerts:
@squashedfrogauthorJul 30.2007 — ? Thanks for the advice you're a star!
×

Success!

Help @squashedfrog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...