Default size photo container / border ?

[theremotedr]

Here is the page in question.

https://www.theremotedoctor.co.uk/gallery.html

Looking through all the photos on this page they are all different sizes.
Im looking to have them all a default size but when clicked on they will open up & be shown like they currently do.


Can you advise how i would be able to apply a code so all are the same size so it looks neater.

Thanks

[theremotedr]

I’ve now added the height size to each photo which was time consuming.
Need to see how to apply it once so all images take note of it and apply it.

I’m still looking at an issue though.
Each image I’m looking on various pc phone iPad etc and all ok apart from one.

iPad in portrait mode.
I applied a code which did sort it but then the pc image was messed up.
I’m stuck just in iPhone in portrait image.

Any help is great thanks.

[coothead]

Hi there theremotedr,

Can you advise how i would be able to apply a code so all are the same size so it looks neater.

You need to create thumb images of the same dimensions for the gallery.

I have made an example for the aircraft images with thumbs sizes 300px by 168px.

Check out the attachment to see the result.

Of course, I will have to leave you to create the other 59 thumbs. !!!!

coothead

[theremotedr]

Hi,
Thanks very much.
Do I need to use thumb images & the full size images ?
I ask as I only see thumb in the Aircraft folder.

I’m limited as to what I can see in your screen file as on a phone at present but do I use your screen file along with my existing code or in place of my code ?

I ask as I was trying to see how clicking the thumb would load the full size image.

[coothead]

Hi there theremotedr,

Do I need to use thumb images & the full size images ?

Yes, that is correct.

To save KBs I did not download your full size images but instead added your address to the links, for example...

    <a  href="https://www.theremotedoctor.co.uk/gallery-images/Aircraft/1.jpg">

Of course, you would use your existing coded links not my test ones.

...do I use your screen file along with my existing code or in place of my code ?

No.
What I did, as it's considered to be good coding practise, was to remove your inline CSS from your HTML file
and then created the screen.css file with it instead. I then added this to your HTML...

<link rel="stylesheet" href="screen.css" media="screen">

I hope that this information helps.

coothead

[theremotedr]

Hi,
Now ive understood what you have done but i was really confused at the time.
To be honest thats a lot of work for me to do.
I thank you for your time but i think i need to fix this a quicker / easier way.

Currently i have only one issue of which is the way the image is displayed "Before" it is clicked on.
I understand you dont have a phone so i will explain.

Currently my code shows,

<div class="column Aircraft">
    <div class="content">
    <a target="_self" href="gallery-images/Aircraft/1.jpg">
      <img src="/gallery-images/Aircraft/1.jpg" style="width:100%" height="185">
    </a>
  </div>
</div>

The above height of 185 on an iphone has a stretched "height" look so this is all we need to alter.

Some how can the code check the screen size of device used & then show the correct px height accordinly.

Example.
Screen size is 414px so the code needs to be triggered to show the smaller or large image if you see what i mean.

So,
If screen size is 414px or less then show the image at "width:100%" height="90"

BUT

If screen size is 415px or greater then show image at height "width:100%" height="185"

Then it will show the correct height & the user can continue to click on the image & see its full size.

See example photo attached of iphone where image height is 90px & 185px
Many thanks



Currently still using my code

[coothead]

Hi there theremotedr,

would you like me to create the thumbs for you?

Things are very quite on coding forums now and it would at least give me something to do.

Your gallery, as it is at present, looks rather messy to my eyes.

The use of thumbs would give it the profesional touch.

coothead

[theremotedr]

Ok thats very kind of you.
I wasnt asking for you to do that as i could do it myself,i was stuck with the others.

I look forward to you file later.
I assume you can get all you need from the current site.

Have a nice day.

I assume you will return a css file & html file for which i will replace what i currently have

Please call the css file Gallery

Also please use my scroll to top code

[coothead]

Hi there theremotedr,

the completed site may be download here...

the-doctor-with-thumbs.zip

...as it exceeds the forum attachment size

Notes:

1. The "Red Kite" folder has been changed to "Red-Kite" as it does not validate and might cause problems in certain browsers.
2. The javascript has been removed from the HTML to a file of it's own - "Gallery.js" and the HTML now has this instead...
   

   <script src="Gallery.js"></script>

3. A noscript warning has been added to point out to those who may have it disabled that they will not be able to see the gallery.
4. A bottom margin has been added to the buttons to improve the look a little.
5. You wiil, of course, have to put your full sized images in the appropriate folders.
6. The scroll to top code is working when viewed on my desktop, does it not work on yoiur mobile device?

Don't hesitate to let me if you have any problems with the changeover.

coothead

[theremotedr]

Hi,
All installed but i dont see the images row by row but just all down the page.

Also none of the tabs along the top work

I see in the css that the backgrouns is blue but pc shows white.

Please take a look