Forum Moderators: not2easy

Message Too Old, No Replies

Simple gallery using css/html

         

Draw

7:33 pm on Jan 6, 2010 (gmt 0)

10+ Year Member



I'm wanting to create a simple gallery for my design projects using css/html. (some sort of javascript may be needed)

The gallery needs to be in 2 categorizes with sub categorizes.
The categorizes include Media/Clients. Thus, the sub categorizes for Media would be Print, brand identity, etc... Clients would be a list of the clients I have worked with.

I want to display the photos in a grid structure. 4 images horizontal and 3 vertical. (all around 100px by 100px each.)

When clicked on each image, this would load up a lighbox with all of the campaign material dealing with each client OR load into a new page with the image centered with the campaign.

Do you know of any Image Galleries that I could use? I'm trying to stay away from creating an iframe for this gallery. (I was thinking about using indexhibit. I could edit it for my needs and display it on the site with an iframe.)

Any advise would be greatly helpful. THANKS!

monie

11:19 am on Jan 10, 2010 (gmt 0)

10+ Year Member



I made a similar thing on a smaller scale: a scrolly box full of small images. When the user mouses over an img, a big version of it appears to the right complete with information about the image.

I didn't want to use iframes either, so I used javascript. Around each thumbnail img I added a tag <a href='#' onMouseOver="changeImg('img1, 2, 3...')"> (In your case, it would be onClick.)
I created the function changeImg(str) that would pull up the content I wanted as usual.

How to pull up the content you want? You could make a bunch of absolutely positioned divs with visibility:hidden and id="img 1, 2, 3...". Then the javascript would document.getElementById(str).style.visibility = visible;
document.getElementById(currentContent).style.visibility = hidden;
currentContent = str;

The obvious problem with that is, with 12 divs you could have a fair amount of content, and if it's image heavy the page might take a while to load. It may be better to pull content from another file onClick() (if that's possible?) rather than load it all at once. I know less about the performance side of this than many of the people here.