Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Default size photo container / border ?

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default Default size photo container / border ?

    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
    Last edited by theremotedr; 06-01-2022 at 09:44 AM.

  2. #2
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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.

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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.

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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...
    Code:
        <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...
    Code:
    <link rel="stylesheet" href="screen.css" media="screen">

    I hope that this information helps.

    coothead
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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,

    Code:
    <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

    Click image for larger version. 

Name:	3886.jpg 
Views:	17 
Size:	83.2 KB 
ID:	6510

    Currently still using my code

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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...
      Code:
      <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
    Last edited by coothead; 06-02-2022 at 05:43 PM.
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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

Similar Threads

  1. Thumbnail default size
    By theremotedr in forum CSS
    Replies: 1
    Last Post: 01-05-2018, 12:52 PM
  2. Replies: 2
    Last Post: 05-09-2014, 08:08 PM
  3. Replies: 4
    Last Post: 12-01-2011, 02:57 PM
  4. IE6 border size increase
    By killerchutney in forum CSS
    Replies: 1
    Last Post: 07-17-2007, 07:36 PM
  5. Photo pop'up with a determined size
    By imv in forum The lounge
    Replies: 0
    Last Post: 08-17-2005, 01:43 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •