Hi
I have an image gallery with thumbnails that call larger images kept in another folder. When they open they adopt a top:0; left:0.: position.
is it possible to make sure that when visitors click to display the larger images they appear centred in their screens?
Another question: I assume that by having the larger images in a separate folder, they do not add to the size of the gallery. is that correct?
Thank you
They can only add loading weight if they are loaded by the the gallery page itself. A separate folder is just the place from where it loads.
If they loads contained in a html page, you decide how.
If they loads as “naked” images, the browser normally displays them in the screen center.
Ahhh. so, how come in that in my screen the pics go into the top. left corner?
LATER
In fact, I?ve realized that Opera and FF display in the middle: Chrome, IE9 and safari on the left.
I guess there is nothing that I can do about it, is there?
If you are using PHP then try this to display images on the same page:
<!doctype html">
<html>
<head>
<style type="text/css">
img {padding:margin:2em; border:0; outline:0;}
</style>
<title> Centering Images </title>
</head>
<body>
<div style="float:left; width:12em; background-color:#cff;">
<p>
<a href="?img=favicon.ico">
Home
</a>
</p>
<p>
<a href="?img=/favicon.ico">
<img src="/favicon.ico" width="32" height="32" alt="#" />
</a>
</p>
</div>
<div style="background-color:#cfc; text-align:center;">
<img src="/favicon.ico" width="200" height="200" alt="" />
</div>
</body>
</html>
Hu John
You got me lost there.
What has the favicon got to do with it?
I do not want to onclude the large image in the page, and the page is fine as it is.
I just wanted to know if there was a way of making sure that the visitor would see the naked picture in the centre of the screen.
It looks as if Chrome, safari, and IE9 palce the image on the left.
I guess, unless I sis not understand the code you sent me, that I either leave things as they are, or at a later stage place each image in its own html page.
The favicon.ico was just an image chosen because I knew it existed.
I just wanted to know if there was a way of making sure that the visitor would see the naked picture in the centre of the screen.
It looks as if Chrome, safari, and IE9 palce the image on the left.
Why not create an extra big-picture.php page? If you are using PHP then use this script to pass the filename:
<a href="big-picture.php?img=filename.jpg">
Home
</a>
and this to display the image:
<div style="background-color:#cfc; text-align:center;">
<img src="<?php echo $_GET['img'];?> " alt="" />
</div>
Hi
It’s getting to the end of the day and the brain is complaining…
First I do not use php, which I know nothing about… I use css/html of which I also k
now very little…
I do not want to include the large images in the html so that its size does not grow to the point where the page does not load.
I am talking about some 60 images per page. The large images must be called from another folder.
This I understand is the equivalent of creating a htmlpage for each large image, no?
This is what I have at the moment:
<figure>
<a href="/Gallery/MaltaB.jpg" target="_blank">
<img src="/Gallery/MaltaS.jpg" alt="" width="240" height="320"></a>
Malta
</figure>
LATER
Let me see if I understand what you’re driving at: are you saying that, NO, I cannot do it with html/css but could do it with php?
Ok, as you can’t know if it’s displayed in center when you link to the naked image, you would better serve the image in a html page that you can use to display it in viewport center. I assume your images fits in expected browser window, or it’s not critical as long it is in the center.
Easiest solution: For each image, link to a simple html that covers the viewport and has it as a centred background. E.g.:
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Image, scale 1:1</title>
<style>
html,
body{
margin:0;
padding:0;
height:100%;
}
body{
background:url(too-large-will-be-clipped.png) center center no-repeat;
}
</style>
</head><body>
</body></html>
Edit: Should have mentioned that suitable file names could be the full image name plus html, like: “too-large-will-be-clipped.png.html”
Hi thank you very much for the trouble you’re taking.
From what I understand now I need one html for each image and the image src will be in the background: url.
i will try this tomorrow. It’s late here and I’m ready for bed.
I´ll keep you posted.
Thank you again
A LITTLE LATER
I was lying. I wanted to see how it worked straight away, and YES it works. Great. Thanks
I guess now I can think of further styling, although I may have made them too high: 800px.
Just one thoughT: how can I make it responsive as everything is in the head? I tried width:100% but it did not work as I narrowed the screen.
It’s getting late here too, so I’ll grab first thought. 
If you instead put the image tag in the body it can be both centered and resized accordingly.
Try this: (html file named like: “size-will-adapt.png.html”)
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<style>
img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; /* will refer to the position lengths */
width:80%; /* the omitted dimension will adapt */
max-width:900px; /* avoid possible large zoom scale */
}
@media screen and (max-width:600px){
img{ width:100%}
}
</style>
</head><body>
<img src="size-will-adapt.png" alt="">
</body></html>
Hi Eric
Perfect!
Now for background, just your opinion, if you don’t mind…
what would you advise as a colour as a background for colour images? White? Black? Grey? Green?
Look: http://pintotours.net/Gallery/Valletta.html . I’m not happy with this and having played with various colours and shades I’m lost.
I think you missed to consider the total width included extra box lengths. 
Then add for smaller viewports according to different images as you wish. I adjusted your code a little:
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
html,
body{
position:relative; /* now img will refer to body positions */
margin:0;
padding:0;
height:100%;
background-color:#143D29;
}
img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
border:25px solid #00371C;
padding:10px;
box-shadow:5px 5px 25px #000; /* fancy a shadow :) */
}
@media screen and (max-width:1003px){ /* 933+2(10+25) */
body{ margin-right:70px} /* to cater for 100% plus padding and border */
img{ width:100%}
}
</style>
</head><body>
<img src="VallettaB.jpg" alt="">
</body></html>
Hi Eric
Sorry, I was out all day yesterday.
I haven´t quite put my head round the importance of the position:absolute/relative. What does it do? It seems to work without too.
One question: I sized the thumbnails 240px x 160 px and gave them width and height in the html
Yets, when I check the page with GTmetrix it tells me that they are being resized to 186 x 24 (in fact, every time I check I seem to get different sizes)
I can only assume that this is being caused by the css: max-width:22%; but I’m not sure how to fix it…
#gallery {
display:table-cell;
vertical-align:top;
margin-left:190px;
width:85%;
background:#F0F0F0;
}
#gallery-inner{
max-width:1020px;
overflow:hidden;
}
.img-container{
text-align:left;
}
.img-container img {
border:0;
width:100%;
height:auto;
}
.clear {
clear:both;
}
figure {
display:inline-block;
vertical-align:top;
margin:10px 1%;
max-width:22%;
}
the html
<div id="gallery">
<div id="gallery-inner">
<div class="img-container">
<figure>
<a href="/Gallery/Bruges.html" target="blank">
<img src="/Gallery/BrugesS.jpg" alt="" width="240" height="160"></a>
Bruges, Belgium
</figure>
..........
</div>
</div>
</div>
It creates a stacking context for positioned children. When the img is taken out of flow by position:absolute it looses reference to its in flow containers. It now needs a positioned ancestor for reference and if there isn’t any it must refer to the root element as its container.
So, if the (borderless) body and root is the same area, img position will refer to root edges of same lengths and so it may seem to work the same. (Note: borders takes space but reference edges is the inside of.)
Hi Eric
I get very tired in the evening and need afresh b rain to work out what you’re saying in your post.
meanwhile my problems with this page are growing:
a) I need to sort out the size of the images as I mentioned above and am not quite sure whether to reduce them or adjust the code.
b) the code does not work in Ie8. The thumbnails stratch all the way across the screen and you have one image only in each row of an enormous size (when they are only 240px across)
if you can help sorting these out…
Thanks
The table-cell display on gallery doesn’t allow margins. Further it is affected by the creation of anonymous lacking mandatory elements. Try change the gallery display to table, then that can work better. See if that explains, I guess there is more code to consider.
Percentage max-width on its own acts the same as the same percentage width would, set a fix width and see the precentage max-width take over. Then try vice versa.
Percent refers to the width of nearest parent that has its width set, here the gallery’s 85% of viewport.
My opinion as precise as I can:
I would have a few different body backgrounds with matching dropshadows to give justice to different motives. I wouldn’t use thick borders. I would absolutly use dropshadows to give the image prominence.
I agree to 10px padding, but with a white image backgound-color to keep the photo style. I would probably have a 2px darker grey border combined with said dropshadows, same in all screen sizes. Smallest screens would loose the padding.
By the way, seems like I was off focus in post #13. Here is the mended code again.
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<style>
html,
body{
margin:0;
padding:0;
height:100%;
}
body{
position:relative;
margin-right:24px; /* to cater for 100% image plus padding and border */
background:#aaa;
}
img{
position:absolute;
top:0;
right:-24px; /* adjust the center position in body to the viewport */
bottom:0;
left:0;
margin:auto;
border:2px solid #666;
/* comma separated shadows combines. Gives deeper darkness against the grey background */
box-shadow:5px 5px 25px #000, 5px 5px 25px rgba(0,0,0,.5);
padding:10px;
width:100%;
max-width:933px; /* its intrinsic width for best result */
background:#fff;
}
@media screen and (max-width:500px){
body{ margin-right:4px}
img{ right:-4px; border-color:#fff; padding:0} /* loose the padding */
}
</style>
</head><body>
<img src="VallettaB.jpg" alt="">
</body></html>
Hi Eric
Many things happened today!
First, I found out that IE8 does not support the <figure> tag, so I had to fall back on a different code I had been given
Then, the difference in images sizes among what is set in the html, what I get from the properties of the dislalyed image on the screen; and what GTMetrix claims to be has left me totally confused.
Anyway, I decided to leave things as they are for the time being,until at least I get a reply to the email I sent to GTMetrix.
Then , with some more patience I will at least reduce the size of the images to what they should have been: 234 x 156 for the smaller ones.
Regarding the background for the large images I agree with you and will be working on it.
You can see the “finished” product here. Don’t laugh. many of the images are just what I could get where I am at the moment. I hope to change half of them in the summer.
http://pintotours.net/Pinto/PhotoAlbum.html
let me know what you think, please.
Hi Eric
I’m very sorry I ended up digressing and moving from subject to subject, and changing the basic code at the same time.
i have not been looking at the thread and #13 I did not use box-shadow:5px 5px 25px #000; /* fancy a shadow 
*/ because with the current background colour you can’t see the shadow.
Your post #15 is, I«m afraid, worse than Chinese to me! I can’t understand the CodeSpeak!
On post #17 I’m wondering if it is still worthwhile changing the code as the page appears to be working fine, now
Please, have a look: http://pintotours.net/Pinto/PhotoAlbum.html
I adjusted as much as I could the css for the large images, at the moment only for the first (Bruges) and the last but one (Alberobello) but I’m still not happy with the way the image behaves as it gets smaller. I gues it has to do with not quite knowing how to deal with podsition:absolute qirh all corners on “0” to start with.
Another problem is that I don’t understande why the last images are higher than the firts of the row when they all have the same physical mesurements and the same width/height in the css.
help…