SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot davejuk's Avatar
    Join Date
    Apr 2006
    Location
    UK
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery lightbox image size based on screen resolution and browser window size

    I have a site with a lot of thumbnail images that display a larger version using a jQuery lightbox effect when clicked. This works well but it doesn't make good use of the available screen real estate.

    To support 1024x768 users I use a minimum image size of 640x640 (so that 640x480 images in either orientation always fit on the screen). However this wastes a lot of space where I could be displaying a higher resolution version to users with a higher screen resolution or larger browser window. For example, for 2560x1600 users I would like to use a 1600x1200 image.

    Is there a lightbox plugin that can handle multiple image sizes automatically?

    This is a Wordpress site so a Wordpress plugin could also work.

    Any suggestions appreciated.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hey davejuk

    I use Shadowbox JS on my website with the NextGen Gallery Wordpress plugin to manage the galleries. I only use large images and Shadowbox will just resize them on smaller screens. (Open up an image and resize your browser window http://jvdl.id.au/galleries/wildlife.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot davejuk's Avatar
    Join Date
    Apr 2006
    Location
    UK
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi John,

    Thank you for your reply.

    I'm not keen on paying for a lightbox script when there are so many great open-source options. Having said that, it does appear to do what I want with regard to resizing the image with the viewport.

    I just can't believe that this isn't a common question. There must be a free solution.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yeah I've begun to notice that lot of authors of popular scripts are stipulating in their licenses that they require a fee for commercial use of their script.

    Fancybox is another good example of a lightbox that is excellent, but now requires a fee for commercial use.

    A few other free ones are:
    - Pirobox http://www.pirolab.it/pirobox/
    - Lightview http://www.nickstakenburg.com/projects/lightview/
    - Highslide http://highslide.com/
    - Prettyphoto http://www.no-margin-for-errors.com/...ightbox-clone/

    Not all of them resize when the browser is resizes, but they do all seem to size the image to the browser if the image is larger than the viewport. Hopefully one of them will suit your needs
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •