Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting size of a web page

    I've been asked to set up a gallery of club photos for the club anniversary year.
    I plan to do it by having a page of thumbnails, each of which opens the full size photo on a new page when clicked.
    As it works at the moment, the new page is full size so the majority of photos do not fill it.
    I really don't like having a photo tucked away in a corner of a large, otherwise empty page, so how can I set the size of the target page to be the size of a photo (bearing in mind that a large percentage of them are of differing sizes)?

    The current HTML I use to display the full size photo is [img]picthumbnailname[/img]

    Thanks
    Silverback
    Silverback

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Setting size of a web page

    Hi Silverback

    If you are OK with CSS you could try something similar to this, between <style> tags in the <head> type:
    <pre>img { height: 60px;
    width: 80px;
    }
    .slot{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    float: left;
    width: 75%;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    padding-top: 5px;
    padding-bottom: 5px;
    background-position: top;
    }
    .leftgal{
    float: left;
    width: 50%;
    }
    </pre>


    Now create the tag soup to be like this

    <pre><div class="slot">
    <div class="leftgal">


    Stuff </p>
    <h5>Club photo's</h5>
    </div>

    [img]picthumbnailname[/img]
    </div>
    </pre>


    It gives a view of the images like so but tiled down the page each being 60 x 80 pixels in size
    Jerry

  3. #3
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    Hi Jerry
    Thanks for your reply and apologies for not replying to you earlier. Got a bit of an excuse, though. After your posting arrived, I fell off a ladder (only two rungs up) and it shook me up a bit. Nothing broken though, just a couple of bruises. Now - I hope this isn't going to happen every time you post me a reply!
    I'm not sure if I've mislead you/everyone with my posting. Not being fluent with CSS, I can't work out exactly what your example does. What I'm trying to do is size the page that the full size photo opens in. Is this what your example does? If it is, I can't work out which lines are doing the sizing.
    Just to be absolutely clear - I'm not so bothered about the thumbnails. I want the target page holding the full size photo to be just the size of the photo - and this will need to change because the photos are differing sizes.
    Sorry to be dumb <img src=/S/stupidme.gif border=0 alt=stupidme width=30 height=30>
    Silverback
    Silverback

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Setting size of a web page

    <P ID="edit" class=small>(Edited by jscher2000 on 22-Apr-08 12:38. Links are hard to post in the Lounge!!!)</P>One common way to do this is to use the JavaScript window.open() method. So for example, your link would look like this:

    <code>[img]picthumbnailname[/img]</code>

    Then your page would contain a function to display a new window:

    <code><script type="text/javascript">
    function popWin(link) {
    window.open(link.href, "", "width=770,height=550");
    }
    </script></code>

    Of course, as you can see, this assumes that the images are a consistent size. If the images are a bunch of different sizes, then this approach doesn't work very well -- you will end up with scroll bars here and there. If you want to code the size of each image into your thumbnail page, you could do this:

    <code>[img]picthumbnailname[/img]</code>

    <code><script type="text/javascript">
    function popWin(link,w,h) {
    window.open(link.href, "", "width="+w+",height="+h);
    }
    </script></code>

    Note that I haven't tested that. In some cases, the window might end up being bigger than the monitor's maximum resolution, so ideally your script would check that first and downsize to the maximum. It's becoming more work...

    An alternate approach is to build some intelligence into your target window by displaying the images in a web page rather than just displaying the image file. Once the image is loaded, the page can resize the window to fit, again using a script.

    Finally, if you haven't seen this script, check it out. It's very cool. In some cases, better than using a new window. Lightbox 2

    <img src=/w3timages/blackline.gif width=33% height=2>

    Added: Okay, I couldn't resist testing the script. Because browsers add a certain amount of default margin around pages, including images, you need to add some pixels all around when sizing your window. You can do this in the script so that when you write out you links, you are using the exact dimensions without having to do too much math. <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

    <code><script type="text/javascript">
    function popWin(link,w,h) {
    w += 12; h+= 12; // improve fit in window
    window.open(link.href, "", "width="+w+",height="+h);
    }
    </script></code>

    Hope this helps.

  5. #5
    Platinum Lounger
    Join Date
    Dec 2000
    Location
    Queanbeyan, New South Wales, Australia
    Posts
    3,730
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    I've chosen not to show a "full" size photo in a web page, because the full size is 2MB per photo, and I didn't want a viewer to wait that long (at least in Australia). The medium size pic is a compromise between quality and download time.

    I've implemented this approach at my Subway home page.

    I guess I could have the option of people clicking on the larger image to get a really full size image. For my application, it's not worth it. But it would be easy to implemen- using techniques already mentioned.
    Subway Belconnen- home of the Signboard to make you smile. Get (almost) daily updates- follow SubwayBelconnen on Twitter.

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Setting size of a web page

    Agreed about "full size" images. I find 2 megapixels (1600x1200) to be a nice size for "full size" on the web, and much more manageable for uploading. What always puzzles me is how many bytes little thumbnails can require...

    Gratuitous sample gallery page (approx. 730 KB of thumbnails): http://thailand.jeffersonscher.com/photos/Ranong2.asp

  7. #7
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Jakarta, Indonesia
    Posts
    274
    Thanks
    3
    Thanked 9 Times in 9 Posts

    Re: Setting size of a web page

    If I have fully understood your intention, it seems you wish to resize the user's window to the image size. My understanding is that if you do this, at least in a tabbed browser like Firefox, you permanently resize the browser window, so that the user then has to resize it again to his/her/its preference. This is a pain!
    I tend to avoid sites that play around with my preferences; to change a user's window size (or other settings) without permission is to me unacceptable practice, although I'm sure others will disagree...

    Chris

    Chris

  8. #8
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Setting size of a web page

    I totally right Chris, resizing of windows is an absolute no no and totally unnecessary these days. One of my colleagues at the College always makes me laugh when she says "It is very rude".

    My CSS suggestion creates a series of thumbnails (admittedly I read the OP slightly differently) which open to a larger image and funnily enough this was the precursor of Jeff's suggestion in <post:=707,469>post 707,469</post:> on using Lightbox 2 , where I have used that exact application/script to open the image. It really is good as it is a mixture of CSS and javascript and very intuitive once you have got over the initial design of your site, but the little pain it produces is well worth the effort
    Jerry

  9. #9
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Jakarta, Indonesia
    Posts
    274
    Thanks
    3
    Thanked 9 Times in 9 Posts

    Re: Setting size of a web page

    Yes, I almost used the words of your College colleague, but thought they might be considered rude! But I do hate anybody messing around with my settings!

    Chris

  10. #10
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    Hi Jefferson
    Thanks for your reply; I am, in the first instance, trying to get the popwin suggestion going before I try the super
    smooth lightbox method.


    I am a complete novice at web stuff; I inherited the website and make changes by either repeating what was
    already there and just editing the text or copying somebody elseís code. I was, therefore, not at all certain
    about your posting as it seemed to be missing some quotes and >, < signs, because when I put it into my
    HTML, both the call and the function declarations just appeared as lines of text.

    Iíve fiddled around with it (probably incorrectly) and have finished up with this :
    <pre><script type="text/javascript">
    <function popWin(link,w,h) {
    window.open(link.href, width="+w+",height="+h"); }>
    </script></pre>


    as the function declaration and this :

    <pre><a href="llant9.jpg" onclick="popWin(this,640,480); return false;">
    [img]llant9_t.jpg[/img]</a></pre>

    as the call.
    I no longer get errors when running this and the thumbnail is displayed correctly but the full size picture
    still appears in the top left hand corner of an otherwise blank new window.

    I am assuming that the onclick parameter is not being implemented and the code is behaving as if it was
    not there at all.
    Can you point me to why this is, please?

    Thanks
    Silverback.
    Silverback

  11. #11
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Setting size of a web page

    <P ID="edit" class=small>(Edited by jscher2000 on 27-Apr-08 13:03. )</P>
    <hr>I am assuming that the onclick parameter is not being implemented and the code is behaving as if it was not there at all. Can you point me to why this is, please?<hr>
    Hard to say. I assume this page is not on the web for testing. If you are running it locally, IE may have disabled the scripts. IE will indicate script errors in the lower left corner of the status bar. Firefox doesn't have security zones like IE, but the NoScript extension will block scripts from file:// unless you allow them. Firefox lists script errors in the Error Console on the Tools menu.

    Added: It's hard to be sure whether it's the Lounge or your code, but in your post there is a < character before the word function and > after the closing }. Those should not be there.

    Added: Here's a demo: http://sothai.com/photos/poptest.asp

  12. #12
    4 Star Lounger
    Join Date
    Mar 2004
    Location
    Griffith, New South Wales, Australia
    Posts
    507
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    As well as Lightbox, I stumbled upon photo revealer

    Seems to do a similar job

  13. #13
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    Jefferson
    Thank you for the demo page! It's solved the prob. By comparing very carefully your <a> href line and mine, I eventually found that I had typed popwin (no upper case W) so it wasn't calling the onclick routine. A quick edit - and now my thumbnail opens a sized window.
    Now you have shown me how to do this, I intend to build a page which will at least allow people to see the photos; this will be my backup. Then, I shall try to implement the lightbox method which I think is uber cool - but I will at least have a fallback position. Will report back on attempts to implement lightbox.
    Thanks so much for your help.
    Silverback
    Silverback

  14. #14
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    Johbot
    As mentioned in my reply posting to Jefferson, I am going to try to get lightbox going - I like its GUI slightly better than photo revealer - but thanks very much for taking an interest in my posting.
    Silverback
    Silverback

  15. #15
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    Warrington, Cheshire, England
    Posts
    712
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Setting size of a web page

    Oops - found a little problemette with the onclick - popwin method.
    How can I get a caption on the photo in this new window i.e. the people who are in the photo, please?
    (I realise that lightbox allows for just this - but I did want to get the page sorted using this method before I try lightbox)
    Thanks
    Silverback
    Silverback

Page 1 of 2 12 LastLast

Posting Permissions

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