Are you familiar with the Firefox Browser? It has a very easy image dimension detail display. Right-click on the image and select “View Image Info”
Results:
Also beware when making thumbnails of the image aspect ratio. Either make the thumbnail the same aspect ratio as the original image or crop the image to the thumb dimensions.
Ok so I just did the first image to see what it would look like, and made it 395x296 to see how it worked. because I have three places in my code with the images, do I need to change the second set and leave the third?.
http://www.charismacommunications.ca/rebuild2/photography.html
Well that first image you reduced loaded relatively quick. The other are still loading now as I type this.
Oh I know that. I just wanted feed back if I did it right. 
Ok I got it all changed. I do noticed that things are sill a little slow after you click on an image and the thumbnails appear below them.
http://www.charismacommunications.ca/rebuild2/photography.html
Hi,
I’m afraid you are still failing to understand the concept of thumbnail images.
When I click on a thumbnail image from the link you provided here’s what it does.
Everything is backwards 
When you get that straightened out you need to optimize your full size images for the web.
Perhaps take time to thoroughly understand this detailed report will help…
So in my HTML code. I have the images in three places.
<div class="column">
<div class="mySlides">
<div class="column">
The first two I made them width=“395” height=“296” the last one, I made them the actual size width=“2100” height=“1575”
I’m thinking now that my width=“2100” height=“1575” are just to darn big to begin with. This is getting more confusing, and I’m driving you people crazy and I apologize.
No problem, the web pages with images learning curve is fraught with compromises that most have bitterly experienced
I’m not sure why you would need to do that. In the example you linked to, the images are set up in a conventional manner:
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
href="fjords.jpg" is the link to the full-sized image. <img src="fjords.jpg" alt="Fjords" width="300" height="200"> is the thumbnail image displayed on the page and used to link to the large image. (I really don’t like the use of target="_blank" to open everything in a new tab/window, but that’s a separate issue.)
However, the bottom line is that wherever you have a small image displayed on the page, it should be the thumbnail image. The code from W3schools is confusing, IMHO, because it shows the same file in both places. I would generally append _t to my thumbnail image names, so it’s clear (to me) which is which.
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="fjords_t.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
I guess I’m confused because I don’t see <a target="_blank" href="fjords.jpg"> in my code. So I have to have screwed up somewhere along the way. Maybe I should start from scratch.
That code came from the W3Schools example, which is what you said you were following, but you seem to be using something quite different, so I’m also confused.
However, my general advice still stands. Create small images to display as thumbnails on the page, give them an appropriate file name, so you can tell which are the thumbnail and which are the full size images, and use the thumbnails to link to the full size.
If you need further help correcting what you have, then please link to the source of the script you’re using.
The thumbnails I have done. I have them in a separate folder. There were two examples on the W3C page. I took the top one. But having said that. I’m thinking I should have used the second one because it’s a responsive gallery. Do you agree?
OK, this is my problem. You say you used the top example from that page. It is coded like this:
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
It is a CSS gallery, and does not use JavaScript.
On your page, I see code which begins like this: this:
<div class="row">
<div class="column">
<img src="thumbnails/photo-01.jpg" width="395" height="296" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" alt="Eastern Phoebe Series #1">
and is clearly using JavaScript.
I can’t see any relationship between the example you say you’re using and what you actually have on your page. Perhaps somebody else can see what I’m missing?
As I said before, I’d prefer to use something like Highslide, which is not only responsive but also keyboard-accessible, but the choice is yours.
Ok. so I screwed up. I must of deleted some code that I should have not. So I am gonna start from scratch and use the responsive cod at the bottom.
In that case, I would suggest that you just set up a few images, and then check everything is correct before doing the entire page.
I totally agree
Yes, that looks right to me.
The reason I said earlier that I don’t like the use of target="_blank" to open everything in a new tab/window is that I expect to be able to move easily through the images in a gallery. When the large image opens in a new tab or window, it means changing tabs every time I want to see another image, and if I want to view a lot of images, I could end up with a lot of open tabs. If you’re happy with that arrangement, then that’s OK - it’s your site. I just wanted to draw that to your attention before you do the whole page.
I agree with you. Is there a piece a code that I could add to change that?