1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved Enlarge a Photo

Discussion in 'Web Design & Development' started by Dingus, Sep 17, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Hi everyone.
    I'm looking to increase the size of an image from a thumbnail to a full screen image on a click.
    I was thinking of something like:

    <div class="thumbnail"><img src="Images/Landscapes/Barbi.JPG" alt="" width="100%" class="cards"/></a></div>

    and using:

    <script>
    function myFunction() {
    document.getElementById("thumbnail").width = "100%;
    }
    </script>

    Or if there's an easier way.
    Any ideas folks?
     
  2. Noyb

    Noyb Trusted Advisor

    Joined:
    May 25, 2005
    Messages:
    20,743
    I use Irfanview as my default image viewer and basic image editor....
    It can be set to view all images ... "fit to screen"

    Click on any image to view "Full Screen" ..
    Then the Right n Left mouse key scrolls thru the folder.
    Esc or click the center mouse key (Scroll Wheel) to return to normal screen viewing

    I really doubt that thumbnails will look good viewed at fullscreen ...
    or enlarged to view at fullscreen.
     
  3. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Thanks Noyb.
    I'm more looking to change to a better quality image when the click is done.
    However, I want to avoid having to load a full new page for each thumbnail.
    I'll have a look at Irfanview though.
     
  4. Noyb

    Noyb Trusted Advisor

    Joined:
    May 25, 2005
    Messages:
    20,743
    Sorry to tell you that only in Hollywood .... (Abby on NCIS) ...
    Can they enlarge a photo and get a higher quality image.

    The rule is ...
    If you enlarge an image twice as much ...
    It will look like the same quality ... twice as far away.
     
  5. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Now had a look at your program Noyb. This is a viewer. Not quite what I'm looking for, but thanks.
    This is a for a phtography site. I am a photographer and I know about enlarging images. Hence I want to make an image fill a screen. It doesn't have to be an enlargement of the thumbnail though. I would probably be another image of better quality.
    The thing I'm trying to avoid, is having to build a seperate page for each full image.
     
  6. Noyb

    Noyb Trusted Advisor

    Joined:
    May 25, 2005
    Messages:
    20,743
    Irfanview a Viewer and Basic Image Editor - without an Image Organizer.
    It has many advantages ... When working with my Photoshop.
    e.g... I can select several images of several types ... then with 2 clicks ..
    Open them all in Photoshop.

    Microsoft is not smart enough to know a photoshop file is an Image
     
  7. Noyb

    Noyb Trusted Advisor

    Joined:
    May 25, 2005
    Messages:
    20,743
    The view setting I use ...
     

    Attached Files:

  8. cwwozniak

    cwwozniak Trusted Advisor Spam Fighter

    Joined:
    Nov 28, 2005
    Messages:
    59,664
    First Name:
    Chuck
    You might consider requesting this discussion be moved to the Web Design & Development forum. It has been a few years, but I recall there being prewritten blocks of code available for different ways of viewing a series of thumbnails and getting a larger image by clicking the thumbnail.
     
  9. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Thanks cww but I thought I had. I'll get it moved
     
  10. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,220
    First Name:
    Colin
    You can do this simply or very complex.

    A simple way would be with this code:

    HTML:
    <a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>
    Alternatively you could do it with jquery or lightbox there are several online tutorials for that
     
  11. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
  12. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Colin I'm gonna look at that.
    Jimin I do like the modal, but knowing nothing of it I'll need to spend some time learning it.

    Thanks for helping for now.
     
  13. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    For now Colin can you say the best way to include your code.
    I have this just now:

    <div class="gallery">

    <div class="thumbnail"><img src="Images/Landscapes/Barbi.JPG" alt="" width="100%" /></div>
    <div class="thumbnail"><img src="Images/Structures/ZRHhouse.JPG" alt="" width="100%" /></div>
    <div class="thumbnail"><img src="Images/Transport/Old Train.jpg" alt="" width="100%" /></div>
    <div class="thumbnail"><img src="Images/Macros/Little Toad.JPG" alt="" width="1386" /></div>

    </div>

    I've kept it to 4 images until I get this issue fixed.
     
  14. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,220
    First Name:
    Colin
    What is the code in your thumbnail class? Post it here then I should be able to give you something to try.
     
  15. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,149
    Folk. After looking at Modal, I've decided to go that way.
    Thanks for your help.
     
    JiminSA likes this.
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1216655

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice