I’m new and not sure if I’m posting in the right spot, so sorry in advance. I built a photo gallery on my website and it works great. The only thing I would like to change is. When you click on a photo it pops up big and that fine. but below it. it shows all the photos small. What I would like to do is have them all in a row and not in a cluster. Can this be done?
http://www.charismacommunications.ca/rebuild/photography.html
Hi @conquer2, and welcome to the forums.
Maybe start by making the site responsive because there is a big gap on the left when viewed on a tablet.
Is it a lot of work to make it responsive
Nonsense.
body {
align-content: center;
background: #ffffff none repeat scroll 0 0;
font: 87.5%/150% tahoma,helvetica,sans-serif;
/* min-width: 58em; /* DELETE Me. Don't restrict the body tag. */
/* padding-left: 25em; /* DELETE Me. */
}
#content {
border: 0.125em solid black;
border-radius: 1.5625em;
/* height: auto; /* DELETE Me. */
/* width: 72em; /* DELETE Me, OR consider max-width: */
margin:0 auto; /* ADD Me to center the outer container, #content, in the window. */
}
img { /* change img css to this */
border-radius:1.25em;
display:block;
height:auto;
width:100%;
}
The images are massive which causes very slow loading time. Use smaller thumbnail images for initial display. Click the thumb to open larger image if desired.
Instead of using inline CSS, style="width:100%", apply and fill in the HTML attributes with the actual image sizes, eg: width="2100" height="1575".
This does NOT address your initial request to place the unselected in a single row beneath the selected image. It makes the site responsive. As such, it’s a place to start. Your code is already impressively valid.
Thank you. It’s late here, so I’ll tackle it in the. Morning.
As @ronpat says you need smaller initial thumbnails; I see you are using the large image for the thumbnail as well. You should have a smaller image for the thumbnail I do not know how you are resizing the images but you could either perpend the thumbnail with say th_ or put them in a different folder.
As to your original question - I would say that there are too many to save in a row even if you reduced them a lot in size.
You would have to go for something like a JavaScript “ribbon/slide show” that you could scroll through.
I went for this layout in my latest gallery : https://www.rubble.info/ The previous version had a vertical “list” of images down the right hand side of the screen; but it restricted the size of the large image.
You can see I have also used the same size images so it does not disrupt the layout of the thumbnails. But saying that something went wrong with one of the images on the older photos page and it disrupts the flow!!
Note: are you building your page in just html? As adding/changing the images will start to take a lot of effort. It could be made dynamic buy using php
For my photo gallery, I got the code from W3C.
(1) What is the URL to the site from which you copied the photo gallery code?
(2) Have you tried to change your code to behave responsively (er… responsibly) as shown in post #4?. Did it work for you? If not, how did it fail? Your feedback is my reward.
(3) Have you taken a formal HTML and CSS class? If so, from where?
Why not simply use Bootstrap or Boilerplate. Isn’t that way easier?
As I understand it is your own website and understandable that you want it to be online as soon as possible, but like @John_Betong and @ronpat said allready, your site site needs more attention and should become responsive as well. From what I understand you’re a photographer, so you need a good looking and functioning website, Just take your time, ask questions and you will be ok, but take your time instead of having a bad functioning website online.
Correct me if I’m wrong, but I am to remove style=“width:100%” and replace it with width=“2100” height=“1575” ?
@conquer2
Yes your assumption is incorrect.
Carefully read the above snippet from @ronpat’s post.
Every individual image requires the width and height attributes and not the width: 100%; global CSS statement.
You really need to use thumbnail images which link to the larger versions, not use 2,100px × 1,575px images scaled to 236px × 177px. Even on my decent broadband connection, that page takes forever and a day to load.
A solution to the gallery problem might be to use a ready-made one which is already responsive. I’ve used Highslide on a number of sites, as it’s very flexible and can be customised in many ways, but there are plenty of options available…
Off-Topic:
Just FYI, @conquer2, W3C and w3schools.com are not related in any way.
Ok this is what I did. So just not to create a lot of work for nothing. I create a thumbnail folder and changed the first picture, jut to see what it looks like.I found on my main page. the images has become fussy. Here is what it looks like.
http://www.charismacommunications.ca/rebuild2/photography.html
On that page, your first image is 100px x 100px, scaled up to 297px x 297px, so of course it’s going to look fuzzy. You can’t scale an image up like that. You need to size your thumbnails to the actual size at which you intend to display them.
Ok so I"m a little confused what your saying. The original is 2100 x 1575. what should I make thumbnails size?
If you are displaying the thumbnails at 297px x 297px, then that is the size you should make them. If you’re displaying them at 150px by 200px, then make them that size.
You cannot scale an image up to display at a larger size than the original without loss of quality, as you’ve discovered. Using full-sized images and scaling them down makes your page unmanageably large and slow to load. Wherever you use images, choose a suitable size for the purpose.
So since my images are all 2100 x 1575. I should make them smaller before making thumbnails?
The normal way for an image gallery to work is that you make small versions of all the images, which will display on the page, and these link to the full-size version. Decide what size you want your thumbnails to display at, and create a set of images of the correct size.
If you are using Windows, then Irfanview has an easy-to-use batch processing facility for creating thumbnails.