Help in critiquing website

[Cheyenne]

Thank you, Cary, for answering my questions.

Cheyenne

[Cheyenne]

John Zeman

You posted the following on April 7, 2007:

I would reduce the original photos down using the Photoshop, PaintShop Pro or whatever graphics program you use, saving them as JPGs with medium compression. Then if you want the full sized photos available you could make the reduced sized ones on the page clickable, where a click on a small photo would open the full size image.

I have Windows Photo Gallery/Paint - and - Vista Home Premium. Would Irfanview do just as good if not better?

Anyhow------

My main question is how do I perform what you are suggesting. The only thing I find online on compression is putting the file into a zip.

I also like your idea of the reduced size and making a small photo (jpg) or gif opening into full size with a click.

[John Zeman]

IrfanView will work fine, it's been so long since I've used Paint I don't remember much about it. The compression I mentioned has nothing to do with zipping files, it's an option you can set with IrfanView (or whatever imaging program you use that supports creating JPGs) when you save a jpg. High compression in a jpg results in smaller file sizes but less quality whereas low compression does the opposite. It has nothing to do with the image size (dimensions), you set that separately with IrfanView.

Here's a little snippet of code from one of my pages where I display a clickable thumbnail image which opens another page containing a larger version of it.

Code: Select all

<p><a href="nw-arrowwood-1.html"><img src="nw-arrowwood-t.jpg" width="150" height="99" border="0" alt="" title="">
<br>
Arrowwood Resort, Okoboji</a></p>

[Albert Wiersch]

Also, what I do is reduce the resolution by resizing the image. Digital photography is my hobby so when I post a photo somewhere, I will crop it and resize it and then use the "save for the web" feature in Adobe Photoshop Elements. It's great in that it will show you a preview and tell you how large the file will be before you actually save it.

After cropping, I usually resize images so that they're 720 pixels wide, but if you're doing thumbnails, they'll need to be much smaller than that.

Also check the web for tutorials about this. I'm sure there's a lot of useful info out there.

There's also programs that will do most of it for you, like ACDSee's "create HTML album" tool. But if you want to make sure these tools are generating good HTML and have the time to correct any problems, then you should run any created HTML through CSE HTML Validator. I usually don't have the time to do this (but would if the page was important).

[John Zeman]

Code: Select all

Digital photography is my hobby

You too eh Albert? I've always enjoyed photography but since the digital age I've really gotten into it. I probably spend way too much $$$ on equipment and software but I love every minute I'm playing with my "toys".

[Albert Wiersch]

Code: Select all

Digital photography is my hobby

You too eh Albert? I've always enjoyed photography but since the digital age I've really gotten into it. I probably spend way too much $$$ on equipment and software but I love every minute I'm playing with my "toys".

Yep... I spend "too much" money on it too, at least that's what my wife would say.

[Cheyenne]

Cary:
Regarding your post of July 4

I finally got a chance to do your suggestion. Wow, what a difference your CSS code made!

I've downloaded and installed Lightbox 2 you suggested on July 11. Instructions for installing are at www.huddletogether.com/projects/lightbox2

Two questions that were not answered in their forum, huddletogether.
1)Do I put lightbox.js in the CSS sheet or the web page. If so, where?
2)All of my jpgs and gifs are <img src>. Do I need to change them all to <a href=....>?


Thank you!!!

[CaryD]

I finally got a chance to do your suggestion. Wow, what a difference your CSS code made!

Yes I see you've made the changes to your Snaggs-Photos page. And you can easily change the space around images simply by adjusting the margin styling. However, I did notice a typo when you copied the styling. You have "border-styl" instead of "border-style", though this doesn't really matter unless the image is a link.

I've downloaded and installed Lightbox 2 you suggested on July 11. Instructions for installing are at www.huddletogether.com/projects/lightbox2

Two questions that were not answered in their forum, huddletogether.
1)Do I put lightbox.js in the CSS sheet or the web page. If so, where?

After you unzip the zip file, you should have 3 folders (css, images, and js). Put all of them in the same location on your site.

Then add the following lines to the head of your html if your page will be using the lightbox scripts (only pages containing links to images will be able to make use of lightbox):

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">

Modify all the above paths so they point correctly to wherever you have placed the three folders on your site. As they are, the paths assume that the folders are in the same folder/directory as the html page.

2)All of my jpgs and gifs are <img src>. Do I need to change them all to <a href=....>?

If they're all <img src> then you don't need to (in fact you can't) use lightbox, but if you have larger versions of the images, then you can change them to <a href=....> image links and then make use of lightbox.

Normally, you would use lightbox to enhance a page which already has thumbnail images linking to larger image files.

So instead of this:
<a href="images/image-1.jpg" title="my caption"><img src....></a>

You would have this:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src....></a>

The additional code activates lightbox.

[Cheyenne]

Cary:

Thank you for your help.

I also found out more about Lightbox at
http://www.dynamicdrive.com/dynamicinde ... /index.htm

I'm not to sure I'll change the current sigs I have, but this information is very important to me.