0

According to the Slimbox2 documentation this function isn't supported. But I was wondering if anyone had encountered any tricks to make this work.

The main concern I have is that some of my images are fairly lengthy, and at low resolution LightBox2 would create an annoying experience for the user.

WednesdayWolf
  • 97
  • 2
  • 10

3 Answers3

2

I recently started to use slimbox2 on my website (http://www.trips.elusien.co.uk) and found that it could benefit from a few modifications:

  • "slide resize": this makes the size of the slideshow constant, rather than depending on the size of the image (by specifying a pixel size), or you can use a percentage to make the slides larger or smaller in the slideshow. You specify this using 2 new options:

    slideWidth: 0,              // Initial width  of the slide (in pixels or in percent as a string e.g. "50%")
slideHeight: 0,             // Initial height of the slide (in pixels or in percent as a string e.g. "50%")

  • enable the slides to be flipped automatically, rather than manually. You specify this using a new option:

    slideInterval: 0,           // Interval between flipping slides (in seconds), 0 means no automation.

  • download the slides from the slideshow.

The first and last features cannot be done with the origal version of slimbox2 since in that version the image is displayed as a BACKGROUND image, rather than using the "IMG" tag.

I have put the Javascript and CSS files on my website. If you want to try them go to my website and click on the "slimbox examples" link, you can download them from here. To see a neat way of using slimbox2 click in the "photoSLide Show" link on the home-page.

Regards Neil

Neil
  • 3,229
  • 1
  • 17
  • 15
1

its easy to fix check my code.

find and replace the three lines in slimbox2.js file:

$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);

with:

    /* make sure the image won't be bigger than the window */
    window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
    window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix        
    var winWidth =  window.innerWidth-200; //browser width
    var winHeight = window.innerHeight-100; //browser height
    var my_w = preload.width; //original width
    var my_h = preload.height; //original height

        // scale  width
        var scaleW1 = winWidth;
        var scaleH1 = (my_h * winWidth) / my_w;

        // scale  height
        var scaleW2 = (my_w * winHeight) / my_h;
        var scaleH2 = winHeight;
        var scale = (scaleW2 > winWidth);

        if (scale) {
            reswidth = Math.floor(scaleW1);
            resheight = Math.floor(scaleH1);

        }
        else {
            reswidth = Math.floor(scaleW2);
            resheight = Math.floor(scaleH2);

        }
        if ($("p").hasClass("slimboxie")){ 
        $(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});

        $(sizer).width(reswidth);
        $([sizer, prevLink, nextLink]).height(resheight); }
        else {      
$(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: reswidth + "px " + resheight + "px", visibility: "hidden", display: ""});
        $(sizer).width(reswidth);
        $([sizer, prevLink, nextLink]).height(resheight); 
        }

im amateur at javascript but i think its working great. I made it work with IE8 also. You only need to insert:

<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->
Vangelis
  • 21
  • 2
0

after loading the image, do this:

$('#lbImage').css('background-size', 'contain');

leo
  • 1
  • 1