Slimbox2 Lightbox clone with automatic image resizing

I recently moved from Lightbox 2 to Slimbox2, whilst it is a little outdated, Slimbox2 offers many advantages;

  • jQuery language – no need for Prototype/Scriptaculous
  • page doesn’t need to be loaded completely before being run
  • has its own API

Unfortunately, it is missing automatic image resizing, which I love.

With the help of Example 9 on Neil’s Slimbox Examples, I have managed to hack together this feature which I am happy about.

Modified Slimbox2 with auto resize JavaScript
Modified Slimbox2 with auto resize CSS

Example in the below Image Map;

Test Images

1024x768 768x1024 800x600 600x800 640x480 480x640 320x240 240x320
  • M

    I wonder if im doing something wrong? I just replaced my slimbox2.js and slimbox2.css with the slimbox2-autosize.js and slimbox2-autosize.css but nothing happens..

    My code looks like this:

  • m, it should work, can you please send a link to your site where it is not working.

  • M

    Here you go: http://tinyurl.com/7nmxvra

    It’s the basic slimbox2 example files and I have just replaced the .css and .js files with the slimbox2-autosize ones.

  • M,

    Got it, in the Slimbox2 download, under src folder you will need to include autoload.js or copy the code at the top of slimbox2-autosize.js.

    Also, I made a change to the css to fix some formatting errors people where getting, replace
    #lbPrevLink, #lbNextLink {
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    outline: none;
    font-size: 100000px; /* Workaround needed for IE */
    overflow: hidden; /* Workaround needed for IE */
    color: #666;
    }

    with
    #lbPrevLink, #lbNextLink {
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    outline: none;
    font-size: 100000px; /* Workaround needed for IE */
    overflow: hidden; /* Workaround needed for IE */
    color: #666;
    line-height: 9999px;
    }

    “line-height: 9999px;” has been added

  • M

    Thanks a lot! That fixed it! :)

  • Integrale104

    Perfect!
    Thank you

  • Yun Kim

    this is awesome… but does it work with the NextGen Gallery? 

  •  Yun Kim, yes it should

  • Matt

    Enjoying playing around with this. My question is there any way to remove either the “close on background click” or the scroll from the main page when viewer is open? Thanks for any advice.

  • Matt, to remove the “close on background click”, modify the following section of code;
            bottom = $(”).appendTo(bottomContainer).append([
                $(‘‘).add(overlay).click(close)[0],
                caption = $(”)[0],
                number = $(”)[0],
                $(”)[0]
            ])[0];

    Delete the ‘click(close)’.

  • Matt

     Thanks for the response. I had already tried that and it didn’t work. For some reason, the plugin seems to only be running on the “mobile” javascript file, and that’s the only place I can edit variables. Not a huge deal, but kinda strange.

  • Your script is obviously working here on this page, but the downloadable version doesn’t work – is there som way you could upload the version you’re using without all the “tss” and image map stuff you’re doing here?

    Cheers =)

  • Never mind, hadn’t understood the comment about adding the autoload.js – works perfectly now, a happy ending to *days* of trying out different lightboxes! You’re a star, thanks a bunch! =D

    Maybe you should add the info more clearly up top somewhere? =)

  • Giovanni

    Can you update this clone to 2.05?

  • DolphinSurfer

    I made a small change to _prevent_ images that would already fit into the window from not being enlarged to fit. This code is near the top of animateBox:

    var c = options.scaler * Math.min($(window).width() / preload.width, $(window).height() / preload.height); //added
    if (c < 1 ) { //DO NOT SCALE UP AN IMAGE THAT FITS!!!!!
    preload.width *= c; //added
    preload.height *= c; //added
    }

    -SAB

  • flo

    Hi Giovanni,

    i have modified this script after inspiration from this author (thanks). It works for 2.05 and actual jQuery Version.

    https://www.dropbox.com/s/idp7qn935iv5q26/slimbox2.zip

    bR
    Florian

  • flo

    great …. i would take it in my slimbox 2.05 modification, too.

    http://thydzik.com/slimbox2-lightbox-clone-with-automatic-image-resizing/#comment-966724713

  • Grace

    I’m trying to get this to work on my site, and while it does autosize it’s also flipping the original image so it’s not showing up right side up….how can I fix this? http://www.fractured-beauty.com/Tara/gallery.php first picture is the tester

  • it is looking fine to me

  • Shoelaced

    When I click your examples in the image map above, it works great except that the translucent overlay comes up over the image and appears abruptly after the image animations, rather than fading in right away and in the background. I’ll see if I can fix it for my purposes and if I do I’ll update here, but attached is a screenshot of what I’m seeing. I’m on Windows using Chrome 33.

  • Shoelaced

    Fixed it, it’s working great! Total changes to slimbox2-autosize.js:

    Remove “.add(overlay)” from the link in the “bottom” section so that it says: $(‘‘).click(close)[0],

    Here’s the full slimbox2-autosize.js that is working for me, which includes the autoload script, the fix above, and the awesome input from DolphinSurfer below:

    http://jsfiddle.net/XPhL9/

  • Christophe B.

    This is the change you need to make in the code to make it compatible with newer versions of jQuery:
    https://code.google.com/p/slimbox/source/diff?spec=svn319&r=319&format=side&path=/trunk/js/slimbox2.js

    It’s the only thing that changed in version 2.05.

  • Sacha

    HI, I replaced the slimbox2.js code with this code. But it does not work for me, no popup is opened, only the image. Do I need to replace some other thing? Replacing the CSS with the version on top also has no effect.

  • Xunsinn

    ..same here but I just get this error on iPhone (5s) — on iPad mini it’s working fine!

  • alitaba

    hi there
    not work in android or iphone !!
    any help ?
    thanks

  • kumaran

    keep the slimbox.js and also add this external js link http://thydzik.com/downloads/slimbox2-autosize.js.

    Thats all… it will work awesome based on the window size

  • sebastiano

    I don’t understand and it doesn’t work for me, i’ve copied the css, the js and the autoload on the top but it doesn’t work.

    Here my code.

    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
    $(“a[rel^=’lightbox’]”).slimbox({/* Put custom options here */}, null, function(el) {
    return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
    });
    }

    (function ($) { ……

    and here my HTML code