Need help with gallery!

@apsMar 15.2006

Hello, thank you for helping me.

I have a gallery that has the title of the image next to the thumbnail. However, ideally I would like to be able to click onto the thumbnail, and the title appear underneath the image for viewing.

The javascript I found is:

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == “Netscape” && browserVer >= 3);
ie4up = (browserName.indexOf(“Microsoft”) >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = (“” + imgName);
document.mainpic.src = imgOn;
}
}

</script>

HTML:

But if I click on the thumbnail, I would like the title to appear in another part of the page and then I can get rid of the second table cell.

Thank you so much in advance. I have been searching all afternoon to find something that is similar. Maybe you can help.

😮

to post a comment

JavaScript

20 Comments(s) _↴

@phpnoviceMar 15.2006 — #You can get rid of everything you posted and just use this:

[code=html]
 <img src="images/slidediv/winter/thumbs/p1.jpg"
 large="images/slidediv/winter/large/p1.jpg"
 alt="“At The End” - by John M" border="0" onclick="
 document.images['mainpic'].src = this.large;
 document.getElementById('maintitle').innerHTML = this.alt;
 return true;" />
 [/code]

[b]maintitle[/b] would be the ID of whatever element in which you'd like the alt text placed.

@apsauthorMar 15.2006 — #Thank you.

I have more than 1 image however, and I want to place the title of the image somwhere else on the page. Shouldn't I direct it to that spot?

Please forgive me, I am very much a newbie.

@phpnoviceMar 15.2006 — #...I want to place the title of the image somwhere else on the page. Shouldn't I direct it to that spot?[/QUOTE]
The code I gave you does that.

@apsauthorMar 15.2006 — #You are a superstar!!!

Thank you.

@phpnoviceMar 15.2006 — #Now, to make it reusable (if you haven't already), you can do this:

<i>
 </i>function doPic(obj) {
 document.images['mainpic'].src = obj.large;
 document.getElementById('maintitle').innerHTML = obj.alt;
 return true;
 }

[code=html]
 <img src="images/slidediv/winter/thumbs/p1.jpg"
 large="images/slidediv/winter/large/p1.jpg"
 alt="“At The End” - by John M" border="0"
 onclick="return doPic(this)" />
 [/code]

@apsauthorMar 15.2006 — #I would like to make it resuable.

I've tried what you suggested, the name comes up but the large pic doesn't.

Like I said, i'm a newbie with javascript. I am assuming that I delete what you have suggested before and replace it with the second suggestion

Do you get paid to do this? ?

@phpnoviceMar 15.2006 — #No, this site doesn't pay me to do this -- I do this for fun (seriously!). ?

However, I am a paid programmer and have been for more than 26 years.

I also like to help people when they are being reasonable.

(note the qualification -- but no reflection on you)

I'm a bit too sensitive for unreasonable people. ?

As for your current problem... Can you post a live link to your page on the

Internet? If so, I can debug it with my JavaScript Interactive Debugger.

@apsauthorMar 15.2006 — #With pleasure, thank you.

http://members.optusnet.com.au/~g.mel.finnigan/edidgallery3.html

@phpnoviceMar 16.2006 — #Well, it works fine in IE -- large picture and everything. I take it you're not testing in IE?

@apsauthorMar 16.2006 — #Hello again. I wasn't actually, Mozilla.

Are you able to help there?

Thanks again.

@phpnoviceMar 16.2006 — #Yeah, I tested and debugged it in Firefox at the same time -- when it worked fine in IE. I already knew what the problem was, I was just waiting for your response. ? Anyway... The problem is that Mozilla will not allow you to create new HTML element attributes on the fly -- as IE will. The [b]large[/b] attribtue I gave you was a bogus HTML attribute just to hold the information I wanted it to hold. IE was pleased as punch to go ahead and make that part of the HTML IMG object created. But, not so with Mozilla. Old Netscape was the same way so I was not surprised -- just hopeful. ?

So... What is needed is a different place to store the URL for the large image. Do you have a preference?

@apsauthorMar 16.2006 — #The URL for large images are presently stored in images/edidiv/3/large

and the thumbnails in images/edidiv/3/thumbs

I'm not sure what you mean by preference. What do you suggest?

@phpnoviceMar 16.2006 — #What I mean is, where in the HTML page would you likle to store the large URL that needs to be associasted with each thumbnail URL? There are several options to choose from -- just thought I'd ask your preference.

@apsauthorMar 16.2006 — #I don't have a preference, just so long as the damn thing works.

By the way, while I have your wonderful attention, I would like to style the id maintitle but I am unsure how to, as everything I have tried doesn't seem to work ... just for something new. No doubt you've guessed that I have taught myself rather than take lessons how to do all this!

@phpnoviceMar 16.2006 — #I don't have a preference, just so long as the damn thing works.[/QUOTE]
Don't get impatient with me, mister. Remember, I'm doing this out of the goodness of my heart -- and for free to boot. :rolleyes:
I would like to style the id maintitle...[/QUOTE]
You'd have to explain that further.
No doubt you've guessed that I have taught myself rather than take lessons how to do all this![/QUOTE]
Except for a single [URL=http://www.webreference.com/programming/javascript/diaries/]JavaScript tutorial[/URL] I took a very long time ago, all of my HTML, JavaScript, VBScript, DHTML, AJAX, CSS, ASP, & PHP is completely self-taught, too.

[I]There ain't no such thing as a free lunch.[/I]

@apsauthorMar 17.2006 — #Thank you for doing this for me, I am very grateful please don't get me wrong. And I wasn't getting impatient ... and ... I'm a Ms.

So, are you suggesting for Mozilla that the pic would have to be displayed in a new window. If so, I didn't really want to go down that road. I'd rather the gallery 'look' in the one page.

As far as styling, I wanted to change the look of the title of the pic and wasn't sure how to do it in my css, rather than in the html. I have placed the title in

<td id="maintitle"></td>

and I'm not sure how to style it from there.

@phpnoviceMar 17.2006 — #No, no popups required. Change your function to this.

function doPic(obj, url) {
 document.images['mainpic'].src = url;
 document.getElementById('maintitle').innerHTML = obj.alt;
 return true;
 }

and change the link to this:

[code=html]<img src="images/slidediv/winter/thumbs/p1.jpg"  border="0" alt="“At The End” - by John M"
 onclick="return doPic(this, 'images/slidediv/winter/large/p1.jpg')" />[/code]

@apsauthorMar 17.2006 — #Thank you so much.

I'll grapple with styling myself now.

You're a star!!

@phpnoviceMar 17.2006 — #Well, I try. ?

Cheers.

@apsauthorMar 17.2006 — #It's all done.

Finished.

http://www.a-p-s.org.au/edidgallery1.html

Thanks again.

Also in #JavaScript _↴

Having trouble w/ credit card validation function in a cgi file How to hide and display a full-screen content should we bother with popups?

Success!

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

Tweet This

Need help with gallery!

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴