how to build a gallery with rollover

[jesennia]

in reference to this thread http://www.bhuz.com/forum/fitness-be...tml#post367906

am wanting to create a simple to use (adaptable to Front Page and current website) photo gallery, am thinking it would be nice to have a rollover feature that pulled up a larger image of the thumbnail along with some text such as dancers name, website and photographer info

still in the idea phase but if anyone knows of a photo gallery template (I will buy it) and/or some ideas on how to do this, please post.

If your website has a gallery with some neat features please post a link maybe? Am looking for a way to integrate the costume photos, the larger image of the dancer, with text about the dancer, and some links or additional photos of veils that go with the costume (hmm not sure if it would be too much to have one image blow up of the costume/dancer and then the option to roll to the side to have other images of matching veils..may be too complicated

anyways you guys are the pros, what would be easy to view and attractive and make sense? (must be easy for me to do or i am happy to pay someone to do for me so long as i can easily edit it with Front page)

hope that all made sense

[beafarhana]

You mean something like this?
Béatrice Curtis - Egyptian Dance - About Béatrice

[deelybopper]

I got the script for mine from here: Dynamic Drive DHTML(dynamic html) & JavaScript code library it's Image Thumbnail Viewer II, think it's the same asthe one Béa used? It was free, and I don't know enough about script to work out how to include captions, but it's somewhere to start...

ETA - Béa's version has captions...off to look at code...gorgeous pics Béa btw!

[Lauren_]

I did the same thing. Got the free script (probably from the same place) and somehow figured out how to make it work. I don't have any idea how I did it, and fumble like mad when I want to change it now!

[jesennia]

yes yes thats perfect!!! Bea you are so beautiful!!

That kind of set up is perfect..is it a code I can buy online? I do what Lauren does, fiddle until I get it

but would be happy to pay someone to do it for me?? just so long as you can teach me how to edit and use it ?

xx

[auraevans]

I have been wanting to build one of these too. I didnt know how/where to put the script in the page. I use dreamweaver to build my webpages. Somebody please help!!! I am happy to pay someone also or trade services etc. I want to know how to do it myself since I will need to keep adding galleries and changing them.

[auraevans]

yes yes thats perfect!!! Bea you are so beautiful!!

That kind of set up is perfect..is it a code I can buy online? I do what Lauren does, fiddle until I get it

but would be happy to pay someone to do it for me?? just so long as you can teach me how to edit and use it ?

xx

hey jesennia; someone came to my photo studio with a pair of your circle veils, the photos came out great.

[auraevans]

Bea your photos are gorgeous, you look beautiful.

[beafarhana]

Jes
I used a freebie script from Dynamic Drive (mentioned in deelybopper's post)
Dynamic Drive DHTML Scripts- Image Thumbnail Viewer II
That page contains all the scripts/coding that you need.

The main thing I originally found confusing with this coding/script, was that it told you to download the script file, but it didn't tell you what to do with it when you did. You need to have it in the same folder as the page that you're using for the gallery.

Thank you everyone for your kind comments. I've been very lucky to have some great photographers.

PS - I first set this up a while ago, but if anyone has any questions about how it works in practice, I'll do my very best to help.

[auraevans]

Hey Bea;

Yes, I remember we had a thread a while ago about this. I agree, the script is there, but then what??? I will give this a shot tomorrow, I will probably be pulling my hair out. hahahaha...

[Lauren_]

Jes, I keep reading the thread title as 'how to build a gallery with a revolver.' hee.

All I can remember is that you have to create a thumbnail for each image, then substitute your filenames for the placeholders in the script.

I can't be much help, since I don't remember how it worked, but I know I *did* figure it out eventually, and I only know a little html and no scripting, so I'm sure other people can figure it out, too.

It *was* frustrating and took time, though.

[auraevans]

this whole thing hurts my head but I want to figure it out!

I do know you have to build the thumbnail but the issue is where to put it and where to put the full size image and then make it all work on the webpage.

[beafarhana]

OK, you have your photos stored wherever you normally store them in your website files. I tend to have a folder for the pages and a folder for images, just because that's a way of organising my site that makes sense to me.

So, in my Pages folder, I have my gallery page, and the ThumbnailViewer2 script. In my Images folder, I have all the images I want to use, along with the appropriate thumbnails.

The next step (after having chosen the pictures & made the thumbnails, was to create the Gallery Page. I built the gallery page to look the way I wanted, with the thumbnails arranged around the space where the larger-view photos would appear. I had to make sure that the space would be big enough to show all the larger size images. So for example, I made sure all the large images have a max width of 500 pixels, and I made sure the viewing space was wide enough for that.

Next, I added all the scripting that was needed within the Gallery page. That's the first bit of coding that you copy & paste from the site, and it goes in the <head> section of the html file.

Next (and this is the time consuming bit) I created all the links for each individual thumbnail to link to the correct photo. The link looks like this:
<a href="http://www.beatricecurtis.co.uk/images/jc5.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="Photography: Joe Conway, Raw Focus"><img border="0" src="../images/jc5th.JPG"></a>
I colour coded to make the next bit make more sense!

Between the first set of <> brackets are all the instructions:
The href is the link to the large photo. It needs to be the full url for that photo file, I'm pretty sure- it's not enough just to make it "../images/jc5.jpg".
Rel is the mouseover instruction (or you can make it "click" instead)
Rev is the instruction as to where to show the large photo, the Load Area.
Title is the text you want associated with that photo. That's where I've put photographer credits, and maybe some information about the picture.

The second <> brackets are attributing all those instructions to that thumbnail.

The third <> brackets are closing the first set of brackets.

You need to do that for each individual thumbnail.

Finally I had to identify the load area in a way the script would recognise, so that space received the appropriate designation coding:
<div id="loadarea" style="width: 500; height: 750"></div>

I hope that gives you enough of a starting point. As I said, if there's anything that you're not getting, feel free to ask (I'm no expert, by any means, but I'll try...)

[jesennia]

've got a revolver and i'm not scared to use it..l;,..l;,

you guys are awesome, and thank you Bea. I'm going to ask a friend of mine if i can throw money and veils her way to just do it for me as I gather more photos. My hair is finally growing out and i dont want to rip it out :) thank you for the script I'll be passing to her to see if she can do it..I'm excited i want to showcase dancers and their costumes and play matchie.

Audra I pm'd you about my contact. Hey how did the shoot go? Lucky dancer! I wish you were here in Hawaii I'd hire you for a shoot, love your work :) did you get an email from a dancer in new york about a blue purple veil? I gave her your contact as I thought i saw you mention you were doing them..

[auraevans]

hey all;

I will visit this thread tomorrow am.

it is late here and damn we had once in 10 years snow in raleigh and snow etc you how that goes. kids home etc. so my creativity is postponed until tomorrow.

the shoot was awesome. both from developing new lighting strategies and a capturing movement, your veils look amazing. happy to photograph a fellow silk artist. will post some tomorrow for you though.

seems like someone posted about purple veils on my thread, but not from ny, but thank you so much!!! I will check pms though.

time for bed...
love and shimmies....

[auraevans]

Bea;

thanks for posting these instructions. I am going to bug you tomorrow about this... too late her to digest it and figure it out.!

[jesennia]

can't wait to see! i havent heard back from my web gal yet but she's pretty busy these days :) will share info when available

[Shaula]

If anyone uses Google's Picasa - there are some AMAZING templates out there:

20 Free Picasa Flash and HTML templates to showcase your photo

and tutorials:

www.easykiss123.com

I created my gallery this way.
silkgallery1

hope this helps

[palmier]

oooo
thank you, I have been meaning to work on my photo gallery but I had no idea how to...
I think I will attempt to do it myself .w.: