For those of you that do your own websites, what kind of web photo album program do you use? I am now happy with just putting the pictures up. I really want something that allowa me to put up tumbnails that will enlarge when clicked on.

Good question....

I bought Web Studios Back to the Beach web design program. It's been a few years ago.
I'm sure there are better ones today. Try and Google web design.

Adobe Lightroom will do that for you... that is what I used on my photography site

For those of you that do your own websites, what kind of web photo album program do you use? I am now happy with just putting the pictures up. I really want something that allowa me to put up tumbnails that will enlarge when clicked on.

We have Dream weaver but, the way my daughter did ours was just to link the thumnails to the larger pic . I just asked her and she has further info .
Toni

Bot where are the larger pic located?

This site here:

http://www.tutorialized.com

Has some pretty good tutorials, depending on what you have. Just search for "photo gallery" and find one you like.

Toni

Here you are. Use thumbnails for it to reduce loading time. It is fully customizable too, editing the CSS file.

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Bot where are the larger pic located?

You upload your thumbnail and then your larger pic to your images folder .
Toni

Thanks for the link Toni

Thanks Cera

Now to read through those and see if I understand them.

Thanks Cera

Now to read through those and see if I understand them.

If you need any help, shoot me a PM. If you want it customized for your site, if you choose to go with lightbox, just shoot me what you want, and I will edit the .CSS file for you to save you some headache and time :)

Thanks. I use Art Explosion Publisher Pro to do my site. I do everything on my comp and just upload the changes to my page. This program might be able to do what I want, but I sure can't figure it out.

Ah ok :)

Oh, if you choose to use lightbox, here is the code you will have called "lightbox.css". To edit it you download the file for lightbox, then unzip it. Open the lightbox folder, and click CSS > Lightbox.css. Right click on lightbox.css, and click right click > open with > notepad. It will open up notepad and it will have this file in there.


#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{
border: none;
}

#outerImageContainer{
position: relative;
background-color: #fff; /* !!!change the background color of lightbox, from standard white!!! */
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

#imageContainer>#hoverNav{
left: 0;
}

#hoverNav a{
outline: none;
}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}

#prevLink {
left: 0;
float: left;
}

#nextLink {
right: 0;
float: right;
}

#prevLink:hover, #prevLink:visited:hover {
background: url(../images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
background: url(../images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff; /* !!!change the data container color, where the title would be, from standard white!!! */
margin: 0 auto;
line-height: 1.4em;
}

#imageData{
padding:0 10px;
color: #666;
}

#imageData #imageDetails{
width: 70%;
float: left;
text-align: left;
}

#imageData #caption{
font-weight: bold;
}

#imageData #numberDisplay{
display: block;
clear: left;
padding-bottom: 1.0em;
}

#imageData #bottomNavClose{
width: 66px; /* !!!if you add in a new close.gif thats larger, edit the width, so it appears right on the viewer!!! */
float: right;
padding-bottom: 0.7em;
}

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

/* Min-Width */

.lbWidth { /* most browsers */
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}

/* Clearfix */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* End hide from IE-mac */

The areas to edit for an easy theme change are listed as /* !!! "explanation" !!!*/

I hope this helped, but I probably just gave you a headache with it lol.

Yeah, that kinda looked like a foreign language. My program converts everything to code for me......I just arange everything how I want it. I do not know CSS or HTML except for image tags! LOL!

Haha if you want to use it, let me know what color you want. (Plain white is standard for it). I can shoot you the file in 5 minutes lol. If you want a custom close button with your logo, shoot me that via pm and I'll resize it and add a close to it. Should take nothing to do :)

Yeah, that kinda looked like a foreign language. My program converts everything to code for me......I just arange everything how I want it. I do not know CSS or HTML except for image tags! LOL!

maybe just loading the thumbnail and the larger image and linking them together is the easiest way to go .
t

Its about all she'd have to do with lightbox, but it'd look sharper :) Instead of linking the images as such...

<a href="images/image.jpg"><img src="images/imagethumb.jpg"></a>

She'd put in..

<a href="images/image.jpg" rel="lightbox"><img src="images/imagethumb.jpg"></a>

...that rel="lightbox" inside the link tag will activate lightbox and do alllllll of the work, and look pretty sharp too :) Its not as obtrusive as having to go to a new page to view the image. :cheers:

I used Photoshop CS2. It has a web album feature that offers a couple different themes, then I just saved the files to my site, set up links to the thumbs, etc. Still working on it, but the basic idea is there...

http://www.sublimeboa.com/Content/Photos/Albums/Lucy%20Album/


Photo Impact Pro also has some web album features built into it. Dreamweaver, which I use, wants to use Fireworks by default to create any albums with, which I didn't like at all. But I got around that.

Maybe if I wasn't self taught, and took the crash course, I could do better, but for me what I did works just fine.