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

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.

270 Comments:

  1. How do you set up an on line auction sale? What are the requirements in setting up the online auction? What are its vantages and disadvantages? Thank for you ans.

  2. Hy

    I have the following problem. As the page loads, he first displays every picture in the slideshow in rapid speed, end then starts the slideshow. This causes that the text on the page remains invisible for the first couple of seconds (about 10 sec)
    This is the link http://prive.jelleverheugen.be/test/index.html

    What can I do to prevent this?

  3. Thank you for a great plug-in. It looks great on http://hello-sze.com/himym Awesome!

  4. Its not easy to find something of value on the internet. Fortunately your article proved to be different and really helpful. I hope you” keep up the good work.

  5. *;. I am very thankful to this topic because it really gives useful information ,*’

  6. learning php php 5 databases

  7. After searching the internet, found your great plug-in. Have configured it to work with my client website.

    But I’m have problems trying to locate where the ‘title’ is manipulated. My client would like this removed but i’m unable to locate where in the scripts it gets displayed. The part i am referring to is

    I can remove the title fro the above line, but still get a square white box displayed, Any Ideas on how to remove this white box.

  8. Hi Aaron

    Great tool.

    I used it on http://new.salenscommunicatie.be.viafutura.be/nl/corporate-news/
    Everything works great but for some small detail.
    Maybe you can take a quick look at it.

    When you first visit the page the general background is loaded and works fine. Every way I resize the window, the background image follows.
    However when I open a newsitem the news related background is loaded. When I then resize the window, you sometimes get black parts at the top and the bottom of the screen.
    Anyway to fix this??

    Thanks.

  9. Hi,

    Absolutely GREAT plugin. I would love to make it work with some sort of “previous-next” navigation. On the left I have a navigation menu for my website with a “previous image” and “next” image link. On the right side I have a DIV with that contains the image that needs to be processed by maxImage. The problem is that I can’t get it to work, I’ve had it work with images of the same exact dimensions, but when the aspect ratio changes, the image gets torn out of proportion. (I used this basic javascript: http://javascript.internet.com/image-effects/next-previous-image-gallery.html)

    I think that somehow the maxImage “algorithm” needs to do it’s work again after loading the new image. Anybody any idea as to how ?

    Thanks!

    PS: I tried fooling around with Cycle, but no dice. Unless I’m doing something wrong. My CSS/HTML knowledge is OK but my javascript/jquery knowledge is pretty much nonexistant.

  10. –î–æ–±—Ä—ã –¥–µ–Ω—å. –û—á–µ–Ω—å —Ö–æ—Ä–æ—à–∏–π –ø–ª–∞–≥–∏–Ω. –ù–æ –æ–¥–Ω–æ –ø—Ä–æ–±–ª–µ–º–∞. –ü–æ—á–µ–º—É-—Ç–æ –æ–ø—É—Å–∫–∞–µ—Ç –≤ –Ω–∏–∑ —Å—Ç—Ä–∞–Ω–∏—Ü—É –Ω–∞ –Ω–µ—Å–∫–æ–ª—å–∫–æ –ø–∏–∫—Å–µ–ª–æ–≤ –æ—Ç –≤–µ—Ö–Ω–æ–≥–æ –∫—Ä–∞—è –±—Ä–∞—É–∑–µ—Ä–∞. –ï—Å–ª–∏ –∫—Ç–æ –∑–Ω–∞–µ—Ç –∫–∞–∫ —Ä–µ—à–∏—Ç—å —ç—Ç—É –ø—Ä–æ–±–ª–µ–º—É. –ü–æ–¥—Å–∫–∞–∂–∏—Ç–µ –ø–æ–∂–∞–ª—É–π—Å—Ç–∞.

  11. hello there,

    Great plugin, thank you for your work in that!
    Is it possible to scale the background according to the height of your browser?
    It seems to stop when it reached the original height of the picture and does not scale it smaller.

    thanx in advance!

  12. @DeeBee

    If you look at http://aaronvanderzwan.com/maximage/ and resize your browser to the smallest you can, you will see that the background image shrinks… and continues to shrink smaller than the original image size. Hope that example helps.

  13. hi Aaron,

    Thanx for your answer. Yes it scales beautifull. But it does not scale if you only change the height of your browser-window. Would that be possible?
    Mnay thanx again!

  14. Oh, hold on. It DOES scale only heigth but it does not scale smaller then the original size.

  15. @DeeBee

    It has to do with keeping the ratio of the image correct. Have you tried the maxFollows: ‘height’ option?

    Does this do what you are wanting?
    http://www.aaronvanderzwan.com/maximage/maxheight.php

  16. Hey, I heve problem with SLIDE on Opera 11 – is not working – (bifore working fine)

    take look; http://www.ecocitytour.pl

    please helllllp

  17. I am currently trying to use this plugin for a full sized, scalable background solution for a sie I am making for a client. I am trying to use this through WordPress and am finding great difficulty.

    I am a novice and new to both JS and WP, so I am unsure if I am doing this incorrectly. I have tried following the “Installation” directions with little success. I find the image not fixing itself behind in document flow and not filling up the screen nor scaling.

    Link to staged site:

    http://www.staging.bhw1.com/lofts/?page_id=6

    Any help would be appreciated.

    Thanks.

  18. thanks a lot

  19. I have been using the plugin.. Maximage: Jquery Image scaler. I’m interested if there is any way of placing text and a url over the background image. Although the plugin has a tab, placed bottom right, I am not able to reposition the tab where I want it.

    Thanks

  20. great plug in.
    i just started building out a new site and wanted to incorporate maximage. im using the slideshow at open but am having difficulty removing the horiz slider bar from firefox. vert slider is gone and i copied the code correctly and added overflow: hidden. no worky. i also wrote some greek text in the body to see if it would display over it. it does but it takes a few seconds for it to show up. not sure why thats happening either.

    i found out about max image from this site: http://www.jaybsauceda.com/. interesting use. every time you click on the name of the site, new images randomly pop up (how?). the image is also absolute positioned and isnt affected by the sliders or browser scaling. wondering how that is accomplished as well. also incorporated maxsize for the portfolio pages. this is a wordpress site also. pretty awesome.

    sorry for the multiple q’s. i’m learning.
    thanks in advance.

  21. Hi Trevor,

    Feel free to download firebug and dissect anything that you see working. JaybSauceda has an awesome use-case of maxImage and using Firebug will let you know exactly how he accomplished it and will help you learn other things too. This is a good rule for a practicing web developer anyways.

    As for the scrollbars… Please remember that the they are handled on the ‘html’ element. You can always over-write a style with the !important option in CSS.

    html { overflow:hidden !important; }

    http://getfirebug.com/downloads

    Good luck!

  22. Oh and the firebug suggestion goes for you too Ray Lancashire… and many others here. If you find it working somewhere, figure out how it was done and how your code is different.

    Ray Lancashire – The main demo has resize text positioned top right using CSS. Please remember the !important css command. I shouldn’t have styled anything using the plugin, but now it is too late. Maybe in future versions I will remove all CSS from the js.

    http://getfirebug.com/downloads

  23. Pingback: Escalar imagenes seg√∫n el tamaño del navegador con Maximage : jmocana – maquetador web

  24. Hey,

    Quick question/problem using this in Safari and Opera:

    Everything looks good in all the browsers except Safari and Opera. Here’s the link.
    http://projects.focuswebmedia.com/tingle/

    The Problem:
    When the window is maximized, the scrollbars aren’t shown, but you can still scroll using the mousewheel, and it scrolls to shown the rest of the background image. It doesnt do this while not maximized though.

    Even assigning a dedicated height on the html or body tag still shows the entirety of the background image.
    Any ideas?

  25. thanks aaron. firebug is a great tool. i solved most of my problems and am almost done with my site. i actually contacted jay b sauceda to find out how he faded in each image using maximage. i tried his code and it didnt work. he couldnt remember if he used any other libraries or scripts as he built it quite awhile ago and remembers going through some struggles to get it all to work. is there a way to fade-in images using maximage? this is basically the code i’m working with followed by what i tried, per jay’s suggestion, that didn’t work. please help. i want to be done. ha.

    Lovely Specimen

    $(function(){
    $(‘img.maxAtOrigImageSize’).maxImage({
    horizontalOffset: 20,
    verticalOffset: 20,
    leftSpace:(280),
    rightSpace:(20),
    topSpace:(20),
    maxFollows: ‘both’,
    horizontalAlign: ‘center’,
    verticalAlign: ‘center’,
    maxAtOrigImageSize: true });

    });

    here’s code that didnt work based on jay’s suggestion.

    Untitled Document

    ##content {
    height: 800px;
    width: 1000px;
    }

    $(document).ready(function() {
    // This is more like it!
    });

    $(document).ready(function(){
    $(‘img.maxsize’).maxImage({
    verticalOffset: 20,
    horizontalOffset: 255,
    maxAtOrigImageSize: true
    });
    $(‘img.maxsize’).one(“load”,function() {
    $(‘img.maxsize’).fadeIn(550);
    })
    .each(function() {
    if(this.complete) $(‘img.maxsize’).fadeIn(550);
    });

    });

  26. $100 to anyone that can solve my problem. see above. i can upload the site if that helps.

  27. Aaron, is there any way we can connect trough mail or so? im also Dutch, so the communication would go a bit faster..

  28. @all

    Please post questions and code suggestions over at the Maximage Google group:
    http://groups.google.com/group/maximage

    You can let me know you are using the plugin here, but if you have any questions, please post them at the Google Group.

    Thanks.

  29. Pingback: 30+ Awe-Inspiring jQuery Plugins To Ramp-Up Your Skills | Chinasb's Blog

  30. viagra for women does it work

  31. Hi there

    This script really helped me in finding a way to do my radio station web site and using the iamges of the events we’ve been.

    I’m about o finsih the site but I have anissue. I’m using the slideshow settings you put in your page but I have this awkward behaviour at loading the page: All the images appear as fast as they are loaded before the slideshow starts.

    Feel free to contact me so I can shre you the Ip where I’m testing it sowe can find a way out.

    Apart from that I think this is the pluginwe are going to use. Thanks a lot.

  32. This script is beautiful! But is there a way to have it as a fixed background with the content scrolling over it?
    My problem is that although the background slideshow seems to be working well in my WordPress theme, the pages will now always be just as high as the browserwindow and all the content that is below the bottom of the page is cut of. Is there a way to resolve this? (probably there is but I am just a beginner in coding issues…)
    I would be very very grateful for a solution.. thanks in advance!

  33. @Ricekr

    I would try setting the images to display none in your CSS so that the page loads with them hidden… then with the onImageShow function: (plugin option) add display block with jQuery…

    I haven’t touched this code in a while so that is untested.

    @Henriette
    Please look in to position:fixed in your CSS for your background image.

    @All
    I am working on a new plugin that utilizes CSS3’s background-size for modern browsers with a fallback for older IE’s. It will also integrate seemlessly with jQuery Cycle Plugin. It is currently in it’s 0.1-alpha state but it is showing great promise.

  34. @Henriette

    Also, don’t forget to use !important on your css since the plugin sets it’s own CSS…
    i.e. “.maximage {position:fixed !important;}”

  35. Sorry so much for my previous post, after better reading through all the posts of you guys above a tried a little and now it works fine! The theme is not ready yet and am just playing locally, once it will be online i’ll post a link.
    Thanks so much for this great plugin!

  36. Hi,

    Thanks.

    It’s a great work. It used your script for a WordPress theme with a custom image background value for each post or page.

    K

  37. Hello,

    did any one make a fork with a previous / next image for the slideshow ?

    I would be great …

    Thanks

    K

  38. Hi there this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

  39. Hi Aaron. Firstly, thanks for a wonderful plugin!

    I would like to add a loading GIF to the background image, before it shows.

    At JQuery, it says that MaxImage has a editable region for “Loading-GIF”, but this is not actually in version 1.1.7

    I have experimented using z-index, but my loading image always stays above the full-width picture.

  40. P.S. Thanks also for the horizontal scrollbar tip at your Google Group. 🙂

  41. Like a Newbie, I’m often searching on-line for articles that may assist me. Thank you

    daidaihua

  42. Yahoo’s Webmaster Guidelines says to reside aside from SEOs which wish you to hyperlink your site to theirs. I think which is due to the fact if an SEO performs on a variety of these locations and they website link back to the SEO, afterwards the SEO’s internet site will benefit. These folks say not to permit your SEO to hyperlink to you from their own directory or research engine, but possess you previously witnessed a webdesigner or SEO producer devoid of a portfolio that hyperlinks to their customers?

    daidaihua

  43. Hi Aaron, thanks for this great plugin!

    But I think I found a bug in when using jQuery 1.6.1
    I’m building a website with the slideshow option.

    When I keep the site open at a certain page for some time (can take minutes), the slideshow goes nuts:
    Instead of keeping the slideshow delay, 2 slides start to change right after each other. When you focus on the screen again, the behaviour is restored to normal.

    This seems only to happen with jQuery 1.6.1 and Firefox 5 and latest Chrome.

    When changing to jQuery 1.5.2 the problem seems to be gone.

  44. Hello, definitely wholesome Picture. Security, will see more! Thanks
    tennis essen

  45. Hi Aaron,

    Like Thomas, I am curious if there is a way to add previous / next buttons for the slideshow.

  46. Pingback: The Machinist _forever under construction » Blog Archive » Scripts jquery

  47. Hi Aaron,

    Very excited to find your plugin! Great stuff.
    My problem is the same as Mark’s – the images seem to animate in quick succession and then nothing happens for a few minutes. Then the animation starts and works beautifully.
    I was curious whether you or Mark had had any success in resolving the issue.

    Thanks!
    Julian

  48. just to specify further – I’ve tried using both jquery 1.6.1 and 1.5.2

  49. 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

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