Javasript Photo Gallery
Hello. I wonder if anyone can help. I'm building a website for my son with Mac Dreamweaver MX. I'd planned to download an extension for a flash gallery to display and manage my photos in dreamweaver, but hadn't realised these wouldn't be compatible with my 2002 version. I've used the photoshop web gallery in the past, but it's such a faff if you want to add new images, or want the viewer to sit within one of your pages - so I decided to mash together a few scripts to get as far as the gallery on this page:
I'll be swapping the links on the right with thumbnails, and fixing the first link once I've figured that bit out, but I'm really stuck with the big main picture. I'd like to specify the max space the image can take up, and have the pictures fill it whilst retaining their landscape/portrait aspect ratio. They look a bit weird stretched, but there must be an easier way than saving all the files again as .gifs so they are all exactly the same size but with bags of empty space around them. Anyone know of a piece of code I could add? Thanks
This is the code I'm using:
yeah, there is a good trick for this. dont have much time to type it all in, but...
basically you need to put the image inside a div, specify the height & width of the div, but not the height & width of the image.
then just set the div's style to overflow:hidden;
hope that helps
| Jameson Wallace
| Motion Graphics Festival
| New Motion + New Sound + New Code
Hello. What you said was very useful thank you. At least everything fits on the screen now. Although I really didn't want the taller images to be cropped at the bottom. The border seems to stop dead too. I was hoping for something which would resize any photo reguardless of it's size or shape, without going outside the space I've saved for it. Has anyone anymore suggestions? I've tried experimenting with different height and width values, and even wrappers and min/max height value, but I don't think my coding skills is up to it.
I'm now as far as:
Not sure if this will work, but try removing the height attribute from the main image.
Hello. Thanks for the suggestion. I tried what you said and it stopped the warping and worked horizontally. However it displayed the portrait images at the same width at the landscape images (if that makes any sense) - so what I ended up with was everytime I clicked on a thumbnail linked to a portrait image, it would balloon up so huge you'd have to scroll down the browser window to see the whole thing. What I was wanting was something like an imagery box, that all the photos would fit inside at their correct scale, without going outside the box reguardless of their shape and dimensions.
When you copy and paste, make sure to include the opening and closing script tags. There are two variables in this function that you'll need to replace and they are labeled. I have not tested this, so it may not work. Remember to keep the original function in tact, in case this doesn't work.
Hi Rocco, I was getting excited about this because it was working so well. However for some weird reason, if I click a portrait photo, then a landscape, then a portrait photo, it resizes great, but if I dare to click a landscape photo twice at any point, all the photos stretch again. I don't understand how it can half work! LOL
click the middle two thumbnails, then try switching and you'll see what I mean
ok. here's another attempt. replace the LoadGallery function with the following:
I think that should do it.