maxImage: jQuery image scaler – Now with center-ability!

maxImage Demo Screenshot
September 13th, 2009
|

Update – November-04-2011: Maximage 1.0 is no longer supported. MaxImage 2.0, is an update that finally utilizes jQuery Cycle Plugin to create dramatic background images is finally in beta. It has been completely rewritten from scratch and takes a new, “hands off” approach, giving you far more control over your slideshows. View more information

maxImage is a jquery plugin that I wrote a few months ago that automatically scales images based on how much room they have in the browser window. The image will always fill your browser window. I have built a basic demo mini site for the plugin.

Note: For some reason I have lost the post that originally contained the release of my plugin. I would like a place for users of the plugin to contact me and let me know how use of the plugin is going. Please use this space, the comment area to let me know how using maxImage is going, what you would like to see added or changed.

271 Comments:

  1. Hi Aaron!
    It is best plugin ever!
    But I have one trouble. I want to make this script as a slide show but scale image only on widh.
    I mean I want to have on my website slideshow on div {widh: 100%; height:300px}.

    How can I fix it?

    Reggards

  2. Hi,
    I have a problem with script on my site. I have a five 100% width and height div’s on slider. I would like to maxImage script on every div separately, now I have one script and one slideshow for every div. Please tell me guys, could I start maxImage script a few times on one site?

  3. Hey Aaron,
    Love the script, used it on a few sites now. I’ve found a bug when only one image is loaded though on line 184: I get the following error (firebug console)…

    objClicked is not defined
    opts.imageArray.push(new Array(o…,objClicked.getAttribute(‘title’)));

    Adding the line
    objClicked = jQueryMatchedObj[0];
    fixes this…

    Thanks!
    Rob.

  4. Thank you Robert. I will update this for the next release which is coming in the next week or two… I promise.

    How much interest is there in a slideshow plugin that integrates with the jQuery cycle plugin? I have been working on that over here at http://www.aaronvanderzwan.com/maxcycle/. It is getting close. I have to clean up IE yet, but everything else is working well.

  5. I just released MaxImage 1.1.8. It is a minor release to squash some of the bugs I have been reading about here and other places. Please let me know if there are any important issues you are having with 1.x. I am busy working on 2.0 which will use CSS3 background cover when possible and will have a clean fallback for non-css3 compliant browsers. The special part is that it will also integrate with the jQuery Cycle plugin and will utilize Cycle’s wonderful transitions (as many as possible for background images).

    Stay tuned for updates on 2.0.

  6. Hi Aaron,

    I’d love to see support for jquery cycle. It has such lovely transitions. Would be nice to see some in your plugin.

  7. Hi Aaron,

    Nice work! I’d love to see support for jquery cycle. It has such lovely transitions. Would be nice to see some in your plugin.

    Thnx,

    Jochem

  8. Hello: Thank you for publishing this script. I am interested in the slide show application. Is there a way to configure a smaller size than full screen? Also, I set the option background=false, but the images still appear as background to text and other images on my test page.

  9. Hey Aaron,

    I’m having a strange problem with the script. Using the slideshow background, it quickly cycles through all of the images and stops on the 4th (last) image. It then goes back to image 01.

    How do I get this to start at image 01 like on your example page?

    The link is http://inexfolio.com/temp/

    thanks!

  10. Pingback: 20 Best And Useful jQuery Plugins of March 2010 « RPL Class

  11. @Jay

    The images have to be set to display:none in the CSS. Please give that a try. (ref. line 126 of http://aaronvanderzwan.com/maximage/bgslideshow.php)

  12. @David Dantes

    There are plenty of slideshow plugins that will work if you don’t need the image to be a fullscreen background image. Feel free to check out my favorite, jquery cycle plugin… http://jquery.malsup.com/cycle/.

  13. @Mark and @Julien

    This seems to be an issue with modern browsers… they want to save resources so they don’t use setTimeout the way that they used to. I have made an update to 1.1.8 that should fix this… If you still notice an issue please let me know.

  14. @Stewart and @Thomas

    There is currently nothing built for a next / previous button. I will look into adding this to the 2.0 release.

  15. Pingback: 优秀jQuery插件 | Laofs.com【老粉丝】

  16. Hi Aaron,

    Nice plugin! I’m thinking about use it but for some reason I’m getting a scrollbar on the bottom of the page.
    I have no other content on the page just your jquery maximage script & a image I wish to use to scale in a browser.

    Regards
    Shane

  17. Hey Shane,

    I would take a look at “overflow” css attribute for the html / body elements along with the overflow option for this plugin.
    http://www.w3schools.com/cssref/pr_pos_overflow.asp

    If this doesn’t fix it, post a URL to the site you are trying to build and I will take a look.

  18. Hi, great plugin. Having trouble making it work how I want to though. I have seven images in a row inside a div container with the following code:

    #grid-container {
    position: relative;
    margin-top: 80px;
    margin-left:300px;
    width: 88%;
    height: 100%;
    overflow: auto;

    white-space: nowrap;
    }

    I have the following code to resize the images in my

    $(function(){
    jQuery(‘img.maxAtOrigImageSize’).maxImage({
    horizontalOffset: 740,
    verticalOffset: 191,
    horizontalAlign: ‘left’,
    verticalAlign: ‘right’,

    maxAtOrigImageSize: ‘true’,

    position:(‘absolute’),
    overflow:(‘auto’)
    });
    });

    Using this script, the plugin only seems ot work on the first image, but not the rest. I have used the class name in every image like so:

    However, no matter what I try, the first image just sits on top of the second image, and it’s the only one that behaves how I want it to. The plugin seems to completely ignore the other images in the container. Is there a fix for this?

    Love this plugin, regardless though.

  19. Hey JPGodwin. I’m sorry to tell you, but MaxImage 1.0 is unable to do what you are asking. MaxImage 2.0 will be unable (at least for the time being) as well. MaxImage 1.0 was built a little piecemeal. First I built the full background functionality. Then I needed images that weren’t in the background but were restricted to specific sizes and with offsets, then I finally built the slideshow functionality. Unfortunately I have not seen a strong demand for specific sizes with offsets as a slideshow (joining up the two). I like the idea of this, but just have not found a compelling reason to take the time to do it. As of right now, MaxImage 2.0 is focused on the slideshow functionality and does not have the options for offsetting an image. I will be looking to expand this in the future, but that is not going to happen for some time yet.

    I’m sorry I can’t help you any more than that.

  20. hi Aaron, I love your plugin, is exactelly what I was searching for.
    I just wonder if is it possible to fade the transition…

    Thanks for your efford

  21. Hi,

    thanks so much for this plugin, I finally build my portfolio the way I want.

    I made some minor modifications to make it work with thumbnails et Masonry, you can take a look here : http://nicolasbphoto.fr/portfolio/

    Regards,

    Nicolas

Comments have been closed for this post. If you would like to ask a question or need help, please post in the forums.