Slimbox2 Lightbox clone with automatic image resizing

Comments

28 responses to “Slimbox2 Lightbox clone with automatic image resizing”

1. 

   M

   2 January 2012

   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:

   Reply
2. 

   MECTILE

   2 January 2012

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

   Reply
3. 

   M

   2 January 2012

   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.

   Reply
4. 

   MECTILE

   2 January 2012

   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

   Reply
   1. 

      sebastiano

      6 January 2017

      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

      Reply
5. 

   M

   3 January 2012

   Thanks a lot! That fixed it! 🙂

   Reply
6. 

   Integrale104

   15 May 2012

   Perfect!
   Thank you

   Reply
7. 

   Yun Kim

   1 July 2012

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

   Reply
   1. 

      Travis h

      1 July 2012

       Yun Kim, yes it should

      Reply
8. 

   Matt

   24 July 2012

   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.

   Reply
   1. 

      Travis h

      24 July 2012

      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)’.

      Reply
      1. 

         Matt

         25 July 2012

          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.

         Reply
9. 

   Jonas Lönborg

   25 April 2013

   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 =)

   Reply
   1. 

      Jonas Lönborg

      25 April 2013

      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? =)

      Reply
10. 

    Giovanni

    18 July 2013

    Can you update this clone to 2.05?

    Reply
    1. 

       flo

       28 November 2013

       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

       Reply
11. 

    DolphinSurfer

    25 November 2013

    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

    Reply
    1. 

       flo

       28 November 2013

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

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

       Reply
12. 

    Grace

    21 December 2013

    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

    Reply
    1. 

       Travis h

       21 December 2013

       it is looking fine to me

       Reply
13. 

    Shoelaced

    15 March 2014

    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.

    Reply
    1. 

       Shoelaced

       15 March 2014

       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/

       Reply
    2. 

       Christophe B.

       4 May 2014

       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.

       Reply
       1. 

          Sacha

          18 September 2014

          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.

          Reply
          1. 

             Xunsinn

             12 October 2014

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

             Reply
14. 

    alitaba

    28 October 2014

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

    Reply
15. 

    kumaran

    1 April 2015

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

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

    Reply
16. Slimbox2 – auto-resize version – Blog of sotel.de – the daily life of a online seller

    23 September 2018

    […] 80% of the desktopsize and looks more elegant than the standard slimbo2 i would say. We found the Slimbox2 Autoresize source code on this page – but it didnt work out of the box as its not compatible with the latest jQuery version i […]

    Reply