[Gadifae]

I am working on putting together a CSS-based photo gallery and have run into a small implementation problem, one that is probably trivial.

The window is divided into two parts. The top has a navigation bar with links that points to an image (e.g. <a href="01.jpg">01</a>).



Below the navigation bar is the area where I would like the photograph to display when the link is clicked. And this is where the implementation problem arises.

Currently, clicking the link displays the image as if it were a different page. What I am unsure about is how to have the image to display not as a different page but, say, 15 pixels below the the navigation bar:



How can I do this? I assume the solution will use JavaScript? There will be 30+ links in the navigation bar and each image is between 30k and 50k so I don't want all of the images to download when the page is first accessed, but only when a link is clicked.

Any suggested solutions, or links to tutorials are much appreciated.

Thanks,

G.

[Chris O'Brien]

I'd do it with a wee bit of javascript and allowing it to degrade well. Something like this:

Code:
function showPic(pic) {

    document.getElementById("whatever").src = pic;
//do whatever browser sniffing etc you want, but you get the gist...
}

with "whatever" being an <img> located wherever you want on the page, so you're just changing its source each time.
You would then have each link like:

Code:
<a href="01.jpg" onclick="showPic(this.href); return false">Back to main page</a>

This way, if the user doesn't have javascript turned on, then they'll still be able to see the pictures...

[Gadifae]

Originally posted by Black Book:
I'd do it with a wee bit of javascript and allowing it to degrade well.

That was exactly the lead I was hoping to find. A Google search for showPic and JavaScript brought up an article from A List Apart which looks like just the thing I need.

Google search for "showPic JavaScript" brought up an article over at A List Apart which looks like it might do the trick.

http://www.alistapart.com/articles/imagegallery/

Thanks!

G.

[Gadifae]

Originally posted by Gadifae:
That was exactly the lead I was hoping to find. A Google search for showPic and JavaScript brought up an article from A List Apart which looks like just the thing I need.

Google search for "showPic JavaScript" brought up an article over at A List Apart which looks like it might do the trick.

http://www.alistapart.com/articles/imagegallery/

With the basics of my image gallery done, using the technique from the article at A List Apart, I have a couple more things I would like to do before putting the page online.

First, to view an image, the visitor clicks on a number on the navigation bar. I use a:hover to put a thin border around each number as the visitor runs the cursor along the navigation bar. I would like the border to remain, as an indicator of where they are in the gallery, until a different number in the navigation bar is clicked. How might I go about implementing that?

Second, the script I found over at A List Apart uses the Title element of a link as the image caption. Does anyone know of a way to use something along the lines of a PHP include statement instead? I want to style the caption far more than using that technique will allow and being able to create a text file that contains exactly the HTML and have the script use that would be divine.

Again, thanks for any code suggestions or pointers that would help me get this the way I would like it.

B.

[Chris O'Brien]

I'd do something like:

Code:
var old_one;

function showPic(pic) {
    //other stuff in this function

    if (old_one != null) old_one.style.border = ""; //catches the first instance

    old_one = document.getElementById("whatever");
    old_one.style.border = "1px solid white"; //or whatever


}

Just a kind of toggle thing...

I'm not sure what you mean in your second question...

p.s. I'm also not sure why you googled for 'showPic', since it's just an arbitrary (albeit descriptive) function name I made up. Anyhoo - nice to know that me and the guys at ALA think along the same lines...

Oh, and for once it's a nice day here in Durham, so I'm hammered. Apologies if what I've written doesn't work - I'll review it when I'm sober, just incase

[DUNSEL]

Can't you just put the css style rules in a:active ?

[Chris O'Brien]

Isn't a:active only invoked when the mouse is down? From what I gather, Gadifae wants the border to be there the whole time the image it relates to is being shown...

[Millennium]

Originally posted by Black Book:
Isn't a:active only invoked when the mouse is down?

That's correct.

JavaScript isn't necessarily the only way to do this, but it's almost certainly the most compatible.

The other way I can think of would be to use an IFRAME, give it a name of "pix" or something, and then have a base target of "pix" for the page. Ideally, all of the links should then load inside the IFRAME, with no JavaScript involved. This is also perfectly standards-compliant if you need that, though you will need to use one of the HTML (or XHTML) Transitional doctypes. The target attribute is not in [X]HTML Strict or XHTML 1.1, though it was put back into XHTML 2.0 because they realized what a stupid mistake it was to take it out. However, no browser actually supports XHTML 2.0, since it's not a finished standard yet.

Pros: no JavaScript involved, and very little CSS (enough to position the IFRAME and possibly to turn off its borders).
Disadvantage: You lose support for NS4 and below, if you care about that.

[Gadifae]

Originally posted by Black Book:
p.s. I'm also not sure why you googled for 'showPic', since it's just an arbitrary (albeit descriptive) function name I made up. Anyhoo - nice to know that me and the guys at ALA think along the same lines...

Black Book:

I googled for "showPic" only because I know next to nothing about JavaScript and wasn't sure if it was a built-in function or an arbitrary name.

Also, your response to Dunsel's fine suggestion (thanks for the suggestion, Dunsel, it was my first thought too) was correct, I'm looking for the border to serve as a marker, thanks for helping clarify.

Enjoy your fine day in Durham...

You were also right about what I was looking for with the border.

Originally posted by Millennium:
The other way I can think of would be to use an IFRAME, give it a name of "pix" or something, and then have a base target of "pix" for the page. Ideally, all of the links should then load inside the IFRAME, with no JavaScript involved.

Millennium: I really like the simplicity of the JavaScript solution for the image gallery but will keep the IFRAME method in mind. Thanks for making it.

G.

[Gadifae]

To give things a bit more focus, I have put together a couple things that will help clarify what I currently have done and how I would like the final result to appear.

A mockup of what I would like to have my image gallery look like is here...

http://www.diagram32.com/example/intent.jpg

...the portion in the frame on the right would come from a PHP include statement and the image on the left would be switched by a JavaScript or another PHP statement. The frame content is just an example of the sort of CSS styling I would like to apply to the content.

What I actually have can be seen here....

http://www.diagram32.com/example/example.html

Just click on the numbers in the bar at the top of the page to see it in action.

I am not married to using the JavaScript used in the example above, so if someone knows a means of getting the intended result using either PHP or a different JavaScript I am open to suggestions. The only restriction I am finding in the current script is its use of "title" as the caption element. See the source for example.html if confused.

Again, thanks for all the suggestions, past and future.

G.

[Oisín]

Doesn't work in FireFox (ie. Mozilla 1.something) - just shows the picture (no description) in a new window...

I'm no JavaScript wizard or anything, but I guess that might be because you only deal with document.getElementById() in your script, nothing else... (what does Mozilla use?)

[Chris O'Brien]

Mozilla uses document.getElementById().

Um, I think that Cat, Dog and Pig are the descriptions for now since he hasn't figured out the second question he asked (I think I now understand what you want).

I'm trying to figure out the best way of doing this (since there's loads of possible ways).
A javascript approach could be to have the HTML you want to put in as the description stored in an array - but it starts getting a bit messy. Plus, it also means you'll have to use document.getElementById("description_place").inner HTML = description_array[whatever_index]; (which a lot of DOM evangelists don't like...)
To clarify:

Code:
var description_array = new Array();
description_array[description_array.length] = "<h1>Dog</h1><p>your first paragraph</p><p>etc</p>";

Does that make sense? I've just got up - and I enjoyed yesterday a bit too much...
Anyhoo - that's an all javascript approach - just chuck the .innerHTML bit into showPic() and it should work, but as I say, it's a bit messy...

Other methods? You could go for an XML way (I'll explain further if you want), or, there's the obvious server-side ways... It depends how many photo's you're going to be handling (and the technologies available to you) as to what approach is best... Oh, and your target audience. A client-side XML method would only work in Moz 1+ (and it's derivatives) and IE5+.

[DUNSEL]

Originally posted by Black Book:
Isn't a:active only invoked when the mouse is down? From what I gather, Gadifae wants the border to be there the whole time the image it relates to is being shown...

Not exactly. It remains active until the mouse is clicked elsewhere on the page. So perhaps it doesn't serve his wishes.

[DUNSEL]

Originally posted by Ois�n:
Doesn't work in FireFox (ie. Mozilla 1.something) - just shows the picture (no description) in a new window...

I'm no JavaScript wizard or anything, but I guess that might be because you only deal with document.getElementById() in your script, nothing else... (what does Mozilla use?)

That syntax is cross-browser compliant. It should work in all reasonably current browsers that support Javascript.

[Oisín]

Originally posted by DUNSEL:
That syntax is cross-browser compliant. It should work in all reasonably current browsers that support Javascript.

That was my first thought as well... but it doesn't work in my FireFox for some reason. I tried it in IE and it worked fine, with the 'cat', 'dog' etc. descriptions changing, and the image loading in the right place, but with FireFox it just opens the image in a new window and the description part is completely ignored.

[Gadifae]

Originally posted by Black Book:
Mozilla uses document.getElementById().

Um, I think that Cat, Dog and Pig are the descriptions for now since he hasn't figured out the second question he asked (I think I now understand what you want).

I'm trying to figure out the best way of doing this (since there's loads of possible ways).
A javascript approach could be to have the HTML you want to put in as the description stored in an array - but it starts getting a bit messy. Plus, it also means you'll have to use document.getElementById("description_place").inner HTML = description_array[whatever_index]; (which a lot of DOM evangelists don't like...)

Can things like PHP includes be passed via .innerHTML? If my code was something along the lines of...

Code:
document.getElementById("description_place).innerHTML = '<?php include ('desc2')?>';

...that would remove the messiness of the array (a solution which I considered earlier but knew it would be too messy for what I wanted).

Hmm, now that I think about this that approach most likely would not work since the JavaScript is running on the user's machine, while the PHP include would have to run on the server?

Or is there a way to get around that?

Anyhoo - that's an all javascript approach - just chuck the .innerHTML bit into showPic() and it should work, but as I say, it's a bit messy...

The more I think about this, the more it seems like using a pure PHP solution would be better. Use one php include for showing the photo, use another php include for displaying the description and yet another php include for displaying the navigation bar.

Other methods? You could go for an XML way (I'll explain further if you want), or, there's the obvious server-side ways... It depends how many photo's you're going to be handling (and the technologies available to you) as to what approach is best... Oh, and your target audience. A client-side XML method would only work in Moz 1+ (and it's derivatives) and IE5+.

The number of photos is as many as i can store on my account. The page is one where i display some of the photographs i've taken. so i want the page(s) to be as scalable as possible. when adding new photos, i just want to upload the photograph, a text file with a description of the photo in html and an updated navigation bar with the pointer to the new photograph and have the page do the rest.

i know how to do the php includes, but i don't know how to change photos using php in a way similar to how the A List Apart script works.

Can you offer any suggestions on that front?

G.

P.S. The example page up above is currently not working since i was doing a php include test when the battery on my laptop died (i'm on another machine right now, one from which i don't have a way to change the code right now) so the example will be down until sometime later this afternoon. :-( i feel like such a newbie.

The javascript code, however, is taken directly from the A list Apart article i linked to in an earlier post.

oh, oisin, my example page displays as intented under FireFox 0.8 (or at least it did before my failed php experiment)on Mac OS X 10.3.3. I wonder why it didn't work for you.

[DUNSEL]

Originally posted by Ois�n:
That was my first thought as well... but it doesn't work in my FireFox for some reason. I tried it in IE and it worked fine, with the 'cat', 'dog' etc. descriptions changing, and the image loading in the right place, but with FireFox it just opens the image in a new window and the description part is completely ignored.

Well I have no explanation for that. I can tell you that I've used that method of referencing page elements and had it work in all browsers, Mozilla/NS included. But Moz and NS have some very peculiar restrictions concerning javascript. For instance, using css positioning on a parent element, nullifies the ability to change certain properties of a child element with JS. Quite annoying it is, too.

[Chris O'Brien]

Originally posted by Gadifae:
Can things like PHP includes be passed via .innerHTML? If my code was something along the lines of...

code:
document.getElementById("description_place).innerH TML = '<?php include ('desc2')?>';



...that would remove the messiness of the array (a solution which I considered earlier but knew it would be too messy for what I wanted).

I suppose you could do that, so it would be cleaner for you writing it, but messy on the client side...

The best way (in my opinion) would be to go for Milleniums way, and have the iframes source as a php page which you passed arguments to, taking the descriptions (and, I suppose images) from a MySQL database... seems the nicest way to me.

[DUNSEL]

How many images are we talking about here? Because if it's just one for each of those 5 or 6 triggers, then it shouldn't be so hard to either hide them with divs, then show onclick, or, have em all present and chance the z-index on click. Or further still, you could display a 1 pixel clear gif, which would be invisible, and change the src onclick. The only way it gets messy is if there's a LOT of pics.

You could even make the triggers images also, and swap both on click, which solves the border problem.

[Gadifae]

Originally posted by DUNSEL:
How many images are we talking about here?

Just over thirty images at the moment and each weighs in at between 30-50k.

I'm going to try Millennium's IFRAME suggestion soon since its starting to look like combining that with PHP (as suggested by Black Book) might be a decent solution.

How standards-compliant are frames now anyway? From Millennium's response, it seems they might be in a kind of limbo state.

Oh, the code for my example page has been fixed. See my previous post if curious about how the battery on my laptop died while I was working on this earlier.

G.

[DUNSEL]

But I only saw like 5 or 6 links to click. How many pics are assigned to each? Will each one bring up a series of thumbnails? I dunno how universal iframes are, but I can tell you that NS and Mozilla both support them now. NS as far back as 6.2. Can't speak for safari, but that should be easy to find out here.

[Gadifae]

Originally posted by DUNSEL:
But I only saw like 5 or 6 links to click. How many pics are assigned to each? Will each one bring up a series of thumbnails? I dunno how universal iframes are, but I can tell you that NS and Mozilla both support them now. NS as far back as 6.2. Can't speak for safari, but that should be easy to find out here.

What you saw was merely an example page, a slimed down version of a page which has yet to appear online. The still-in-development version has 33 links in the navigation bar (and another batch that will be added once I lock down a design) with each link pointing to one image.

IFRAMES do work with Safari, or at least they do with Safari 1.2.1.

G.

[DUNSEL]

Hmmmmm, well I've used that many images before with a simple array. You can actually set the value of the array index inside the page element that you click on. So if your function sets imgTagName.src=arrayName[i];
then set the value of i inside all your little links there.

[DUNSEL]

Originally posted by Gadifae:
What you saw was merely an example page, a slimed down version of a page which has yet to appear online. The still-in-development version has 33 links in the navigation bar (and another batch that will be added once I lock down a design) with each link pointing to one image.

IFRAMES do work with Safari, or at least they do with Safari 1.2.1.

G.

The more I think about it, this is clearly the simplest way, with the least amount of fuss and muss. A single img tag (it can start out displaying whatever you want, including an invisible single pixel clear gif), a single JS function:
i=0;

var pics=new Array();
//I assume you know how to declare the buckets, then just
function change()
document.imgName.src=pics[i];
//that's really all that's needed.

Then inside each a tag, or whatever you wish to click to call the function, put onclick="change(i=whatever)" passing the value of i as argument. The number you set i equal to will determine which pic in your array comes up, and voila. It's done. You can place that single img tag anyway you want, including css, and do it all in a single HTML doc. if you wish. No databases, no nothing. That's if I understood what you want to do correctly. If you have 2 sets of 33, then 2 functions with 2 arrays would be easiest to handle.