maxImage: jQuery image scaler
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.
September 18th, 2009 at 10:02 pm
This is a great script, but I was wondering if there is a way to have the image stay in the center of the site and scale by top and bottom or left and right sides? – does that question make sense?
Or if it is possible to manually control the slideshow that would be great too – like a giant gallery.
thanks,
aaron
September 19th, 2009 at 2:35 pm
Hello Aaron,
Great script ! Thx a lot !
I’ve got just one issue on Firefox (3.5) on Mac OS X when pushing the Space bar : the image goes down like if there was a scroller…
Sorry, my english is too bad :/
++
DAvid
September 19th, 2009 at 2:38 pm
Thanks David… I will look into this.
September 19th, 2009 at 2:39 pm
@Aaron. Thanks for the feedback. Unfortunately maxImage does not support your scenario right now. I apologize, but will keep it in mind as I work towards future releases. Thanks.
September 20th, 2009 at 5:09 pm
Thanks Aaron, it’s just a minor issue… i can reduce it to the max with topSpace attribute in my case…
I will give you the adress of the site where I’m using your script when it’s ready
++
DAvid
October 1st, 2009 at 4:41 am
Super script. I found the same issue as DAvid.
I’m planning on using the slideshow effect on background images. Is it possible to start with random? Or specify starting image (then I’ll just feed it a random number)?
Thanks
Jesper
October 5th, 2009 at 5:50 am
Hi, all.
The script is working perfect with major browsers but i found that it doesn’t work in Firefox 2.
Is there any chance to making it wokr in that browser?
Sory about my english and thanks.
October 8th, 2009 at 5:27 pm
@Jesper. I apologize but currently the script does not have the ability to start on a random image or specify a starting image. It does however, start with the first image every time. You can use this to your advantage and randomize the order on load, before calling the plugin, which would result in the same effect. Hope that helps.
October 8th, 2009 at 5:29 pm
@Jaume. Hi there. Do you have an example that I can check out where it is not working in Firefox 2? That would be a great help. Thanks.
October 9th, 2009 at 2:21 am
Thanks Aaron. That’s doable for sure. I just wanted to be sure that U didn’t provide this feature bfore doing it myself
thanks
jesper
October 20th, 2009 at 2:38 pm
Grrreat! Thanks for this amazing plugin!
Maybe a fade option for the slideshow? Nevertheless, i just love it!
October 21st, 2009 at 3:30 pm
Spend some time but due to your plugin i’ve redesigned my homepage completely. http://www.heijmerikx.com/
Thanks again!
October 22nd, 2009 at 10:43 pm
After some fighting, I’ve finally figured out how to get this to work in Wordpress. It also doesn’t help that I’m not that well educated about javascript, or PHP.
But my question is, is it possible to have a scrolling page, with the image still stuck in place? I have some pages the go longer than the ‘fold’, but now that I’ve added this plugin, the scroll bars are gone. I guess I just figured that the background wouldn’t move when scrolled.
October 22nd, 2009 at 10:47 pm
oh, another question. How does the “verticalAlign: ‘bottom’” code work? I’ve changed it to both top and bottom, and didn’t notice a difference. I have a photo that is taller than the window, and I’d like for the bottom of the photo to start at the bottom of the window, and all the eccess of the photo goes past the top of the window.
Thanks
October 23rd, 2009 at 11:51 am
@Woody24 and all others who have asked about verticalAlign. I have fixed the bug that was not allowing the verticalAlign to work correctly on the slideshows. Please take a look at the new release and let me know if it works well for you. I do warn you though there are a few other updates too, so don’t push live without testing first.
Download the newest release here: http://plugins.jquery.com/project/maximage
I apologize but currently the overflow is set to hidden. I am looking into this for the next release.
October 23rd, 2009 at 1:58 pm
How can i pause the slideshow on the background? Or isn’t that possible? Thanks in advanced for any reply.
October 24th, 2009 at 11:12 am
Rutger -
Your website is amazing and powerful. A great usage of maximage. Do you mind if I use your website as an example of how maximage can be used to make powerful, dynamic websites?
My only suggestion, would be to do what you can to make your large background images are less than 500k. One of them (ijsselpath.jpg) looked like it was over 1.6MB. But other than that, what a wonderful site. You are a WONDERFUL photographer!
Unfortunately, right now, I do not have any way to pause the slideshow. I will think about this with future releases though.
What a great website.
October 27th, 2009 at 1:22 pm
Hi
I tried something to simulate the window scrollbar :
I made a parent div “#viewport” with “overflow:auto” andthen I fixed its height to the document’s one :
var myheight = $(window).height();
$(‘#viewport’).height(myheight);
It actually display the scrollbar as excepted when the document exceed the window size, but if I resize my browser “#viewport” will keep the same heigt. The page should be refreshed when resized.
I think it’s a good start to fix the overflow issue. If you have an idea for refreshing at resizing…
October 30th, 2009 at 8:45 am
This works :
CSS:
#viewport {overflow: auto; position: relative;}
The div #viewport is the direct child of body.
JS :
var myheight = $(window).height();
$(‘#viewport’).height(myheight);
$(window).resize(function () {
$(“#viewport”).height(document.documentElement.clientHeight);
});
I tested it in FF3, ie6 7 & 8, Safari 4
I once had an error in ie7 but could’nt reproduce it…
October 30th, 2009 at 10:12 am
Solution to the scrollbar problem
Hey Mael and all others who are trying to use maxImage and preserve the use of the overflow hidden attribute. I appreciate your initiative to get this to work the way you need to. That is needed with these plugins. It is impossible to create a tool that does everything for everybody.
That being said, the reason why I disabled the scrollbar was because I was noticing that some browsers would calculate the width of the browser differently and therefore would make maximage a little inconsistent at times.
I have just released a version with an “overflow” option that can be set to auto to re-enable the scrollbars [Download it here]. If you are using maxImage for it’s background image or background slideshow functionality, you can use position:fixed on the image so that the image doesn’t scroll.
See an example here:
http://www.aaronvanderzwan.com/maximage/bg.php
I hope that helps. Also, Mael, your solution seems wonderful and definitely should work. Maybe a little more complicated than it needs to be at this point. If we notice that my solution is just too darn buggy (I’m nodding in your direction IE), your solution might be a good fallback… if you don’t mind me using it.
Enjoy all. And let me know how this update works. Do you notice any problems?
October 30th, 2009 at 8:04 pm
October 31st, 2009 at 12:04 pm
I’m sorry Thiago, the plugin is not built to support fadeTo.
November 1st, 2009 at 2:16 pm
I’m glad to help !
I won’t test the new release now because I use the older on a soon-online site, but I will give you feedback if I find any problem in a future use.
Thanks again for sharing this !
November 2nd, 2009 at 3:24 pm
Hi again Aaron,
Please disregard the previous email from me. Duh? I’ve got everything working now.
Thanks,
elgin
November 3rd, 2009 at 6:16 am
Your plugin works great for me but only one question:
Is there a nice work around for aborting the slideshow en playing the slideshow?
November 7th, 2009 at 7:18 am
Hi Aaron, this plugin is cool.
I was wondering, would it be possible to put an image centered on a page with a padding lets say 20px and let it scale/resize on browser-resize ? Thus, something like the fullscreen/background solution, but not let it fill out all the way.
November 7th, 2009 at 11:24 am
@Richard Bakker
This should be possible. It gets a little more complicated when you want to use the offsets. Do you have a URL that I can see? I might be able to help point you in the right direction.
Thanks.
November 11th, 2009 at 7:11 am
Thank you for your Great Job!
Can you make a more detail document? thanks.
November 11th, 2009 at 11:22 am
@Jerry Liu
I have been meaning to do this, but I just can’t seem to find time. Is there anything you are having trouble with?
November 12th, 2009 at 9:10 am
Hey,
great script! But i have one question. When i have a resolution of 1024 x 768. The background on end of the page will cut off the background. Can you handle it?
Please awnser on my E-Mail-adress.
Greetings
Dennis
November 12th, 2009 at 11:01 am
Dennis -
I have sent you an email.
November 12th, 2009 at 4:18 pm
Hi Aeron,
First of all, thanks for the great job, this plugin is a great implementation!
I have a special need I believe many people may have. I would like to ask you if it’s possible, or if you have ever done it (I have a very limited jQuery knowledge as I’m a photographer not a web-designer).
I’m trying to use the Plugin with images contained in a div that already resizes with the browser window but the images should not exceed the div boundaries as they do using maximage.
What I need is to set max-width and max-height of the image to 100% (so it doesn’t exceed div size).
I want to have a fluid layout, otherwise I could use the offset properties, etc but they just wont do…
If I do this through CSS, it works as long as the user reloads the page after resizing but it doesn’t quite work dynamically as it should.
Have you though of this or could you give-me a hand with this?
Thanks loads in advanced and again, congratulations and thanks for putting up maximage!
Theo
November 12th, 2009 at 5:56 pm
Hi Theo-
Do you have a URL that you can share so that I can check out what you are trying to do? That would help a lot.
Thanks,
Aaron
November 12th, 2009 at 7:44 pm
Hi Aaron,
first of all, congratz for the terrific work done with this plugin. Simply amazing !!!
Do you know if there are conflicts between your plugin and the Galleria plugin (http://devkick.com/lab/galleria/) ?
I am trying to use both at the same time with no success …
Thanks. Vince
November 12th, 2009 at 7:53 pm
Hi there Vince.
I do not know if there are any problems with using maxImage and Galleria. I have actually never used it. It looks good though and might have to look at it sometime.
Let me know if you have any success. And if there is a URL where you are looking at it so I can check it out.
Thanks.
November 13th, 2009 at 9:55 am
hi, great plugin, but what’s happening if i have more then one image on page?
is there any way to handle multi img resize.
Tnx, Daniel
November 13th, 2009 at 10:51 am
@daniel
I have not tested the plugin for more than one image on a page. However, I have built another plugin, called maxgrid, that resizes images so that they fit to a grid.
November 24th, 2009 at 4:46 pm
Hi
Thanks for a great script, it is currently in use by one of our customers. We plan on using it on more sites, so I hope that you will continue maintaining it? Or that older versions will continue to work as they are – I suppose that is the case…
WIll be back with links later on!
November 24th, 2009 at 6:27 pm
Hi Aaron, i’m back again :’)
I am trying something else, what if I want to have to 2 images next to each other – can this work somehow ? (I have more portraitshots than landscape)
November 30th, 2009 at 11:20 am
Hi Richard -
I’m sorry, but currently the plugin does not handle that. It would have to be reprogrammed for multiple images. Please take a look at maxGrid though (http://www.aaronvanderzwan.com/maxgrid/). I have not tested this, but it might work with just two images in that plugin. maxGrid is not an official release so please test A LOT before going live with it.
Let me know how it goes.
December 2nd, 2009 at 4:25 pm
is it possible to have this contained inside a div instead of setting the vertical and horizontal offset.
December 2nd, 2009 at 4:26 pm
I believe my question is something similar to Theo’s.
December 2nd, 2009 at 4:31 pm
Hi Syrehn –
Like I requested with Theo, can you please send me a URL where I can see the issue you are having and what you are trying to accomplish. That would help a lot.
Thanks,
Aaron
December 2nd, 2009 at 5:35 pm
Hi Aaron,
I’m trying to accomplish something what I have done here:
http://www.designfoxmediaworks.com/clients/peaverymart/
I have managed to get my image to resize because I know the width that the containing div is when fully expanded and have it set to scale down to 30%. (this is done without yourscript)
I wanted to use your script to accomplish the same thing but have it as a background image in the div perhaps so that I could have functioning links above the image.
I hope that made sense?
December 3rd, 2009 at 12:38 pm
any thoughts?
December 15th, 2009 at 10:35 am
Hi Syrehn-
I’m sorry if i just got to your comment to late (this is a little over a week after you posted your URL), but the link that you posted is not working. I am getting a 404.
Please post again with a different working URL.
Thanks,
Aaron
December 16th, 2009 at 12:52 pm
armani watch
December 28th, 2009 at 8:30 am
Hi Aaron!
I’m sorry to say that i just saw your reply on my comment. Of course you may use my site as an example. I’m planning on optimizing it indeed. An image above 1Mb is a bit large.
Greets and thanks for your superb plugin!
January 5th, 2010 at 6:40 pm
Hi,
Just using your plugin and most is working well. Thanks! I just need to know if you can fix the problem with resizing the first image on each slideshow. The first image in each slideshow doesn’t scale and is fitted to the size of the browser you start with. I checked your example and it did exactly the same thing. If you could help me with this that would be great!
Thanks,
AK
January 9th, 2010 at 10:11 am
Is there any way to control the slide show? Next/Previous buttons.
January 13th, 2010 at 6:58 pm
script slide bg is very interesting for me
nice script & thx for inspiration
from THAILAND
January 23rd, 2010 at 8:32 am
Where Parameter For Fade Speed ?
February 1st, 2010 at 4:42 pm
hi aaron. great plugin. works beautifully on all browsers i’ve tested on, except for Firefox 2 on PC. it shows only the background color. thoughts? i was racking my brain on this, but i also checked your example site (http://www.aaronvanderzwan.com/maximage/) and your site doesn’t display the image either.
here’s my example: http://eddieshrake.com/AP
thanks much
February 2nd, 2010 at 10:49 am
Hello!
Hello, when i try to implement your script for the dynamically scaling background image, i get vertical and horizontal scrollbars.
does the base image have to be a specific size? no matter how i resize the windows, the scrollbars stay ….
greetings Aron
February 4th, 2010 at 10:57 pm
Hi AK,
I got the same problem as you where the first image of the slideshow didn’t want to resize, i had a look at the “jquery.maximage.js” file and altered the following to get it to work:
Approx. line 201, under //SLIDESHOW FUNCTIONS:
change this bit from:
if(currentImage==0){
_start_timer();
}
to:
if(currentImage==1){
_start_timer();
}
Approx. line 214:
change this bit from:
function _start_timer() {
var currentSlide = 0;
to:
function _start_timer() {
var currentSlide = 1;
Approx. line 236, under // Start time for slideshow :
change this bit from:
var slideInterval = setInterval(function(){
if(currentSlide < opts.imageArray.length-1){
currentSlide++;
lastSlide = currentSlide-1;
} else {
currentSlide=0;
lastSlide = opts.imageArray.length-1;
}
to:
var slideInterval = setInterval(function(){
if(currentSlide < opts.imageArray.length-1){
currentSlide++;
lastSlide = currentSlide-1;
} else {
currentSlide=1;
lastSlide = opts.imageArray.length-1;
}
I don't know any Javascript though what it seems to do is make it start from the second image, so that means you will need to add a blank placeholder image to the list of images so it recognises this as the first image and therefore will be skipped.
February 5th, 2010 at 10:48 am
@AK, and IK
What browser are you working in where you are having this problem. This is not a problem in all of the browsers that I am viewing it in (I’m on a mac).
@Matt Johnson
Unfortunately I do not have any way to control the slideshow with Next/Previous buttons yet, but will keep this in mind when I find time for the next update.
@Murat Ova
The parameter for fade speed is slideDelay.
@Edward
Your website looks beautiful. I am currently downloading Firefox 2. I will pull it up and give it a look. Hopefully I will be able to see something that will resolve your issue. Is Firefox 2 a large market share for users?
@Aron
I would check your other CSS. By default, maxImage hides the scrollbars with overflow:hidden. You can control the overflow-y with the ‘overflow’ parameter. But like I said, it defaults to hidden. Make sure you don’t have any other styles controlling this. Do you have an example I can look at?
@IK
I thank you for your fix, but would really like to fix this issue without having to put a blank image in the first space. Could you let me know what browser, what platform, how many images, the size of images, and any other information you think could help. I would really appreciate it. It sounds like it has something to do with load time or order and when I check the dimensions of the images. Thanks again for your interest in helping this issue get resolved.
@ALL
Thanks for the positive feedback. I am sorry I have been so busy lately, but I look forward to upgrading maxImage to take advantage of the speed upgrades in jQuery 1.4. Keep the comments coming, I want to help get this thing working as smoothly as possible.
Thanks again.
February 6th, 2010 at 7:05 am
Hey Aaron!
First, thanks! This is by far my preferred way to make websites with fullscreen BGs. One thing I miss though – haven’t digged into this myself yet – is slideshow with navigation. Perhaps just simple next / prev or even numbered navigation.
Just an input!
February 6th, 2010 at 11:10 pm
Hi Aaron,
Yes, that blank image thing i did was pretty nasty, the site i’ve been working on uses 5 images, all at 1080×810px, thing is i get the same thing happening on the slideshow page on your site as well (http://www.aaronvanderzwan.com/maximage/bgslideshow.php).
So far i’ve tried this on Safari 4 / Firefox 3.5 on Mac OS 10.5.8 and IE6 / IE8 on XP SP3, all with the same result, when you resize the browser the first image stays the same size and seems to pin itself to the bottom left corner of the browser window.
Hope that helps!
February 7th, 2010 at 1:48 pm
Great blog, although I think some of the stuff on itt is a little pre used lol.
February 7th, 2010 at 4:09 pm
dear Sir,
please have a look to this website:
http://ayerviernes.com/
can this plugin to have an easing effect when the browser resized just like that website ?
it would be cool if you have a navigation for the image slide
please advise
February 10th, 2010 at 3:42 pm
Hi there,
First things first, thanks for this great plugin.
I was wondering if there is any way to center the image vertically?
Your help would be great.
February 12th, 2010 at 7:40 am
HI Aaron,
I am using your plugin and I am trying to build a simple website.
What I am finding when you your plugin is that when I am stretching the browser window, image rescales no vertical scrollbar appears but a horizontal one does.
Is there something I am doing wrong.
I am testing it on safari 4.0 and firefox 3.5
When looking at your site no scroll bars appear at all.
Please can you help me.
Thanks
February 26th, 2010 at 7:48 am
Because sentences are made with a translation software, it might be strange.
HI Aaron,
First of all, we wish to express our gratitude for making the good one.
It is IE6 correspondence, and the demo page has been generated, too. The background image has fallen below.
The background image falls into the page that I made below in IE6.
http://www.harusa-web.com
Is there a problem in a Japanese version of IE6?
February 26th, 2010 at 8:09 am
I’m sorry.
It changed it into another plug-in.
Moreover, it uses it on another page.
Thank you.
March 1st, 2010 at 9:47 pm
Hey Aaron.
I’m trying to use this plugin with a centered div (ie. margn: 0px auto;) and it doesn’t keep the image centered but to the right of the div when it resizes, any idea to keep it exactly centered in the browser window no matter what?
On top of that I’m trying to use it JQuery Cycle Plugin and it works on the initial image, but none of the others.
Thanks again for making this, if I can get it to work how i need it, its exactly what i needed!
March 3rd, 2010 at 4:17 pm
Chiming in to say that I finally found the issue causing the first slide in the slideshow to not resize properly.
Change the section ~line 217 from:
if(currentImage < opts.imageArray.length-1){
currentImage++;
_loads_image(currentImage);
}
To:
if(currentImage < opts.imageArray.length-1){
_loads_image(currentImage+1);
}
This should fix it.
March 8th, 2010 at 5:57 am
Hi
Great job, thank’s a lot !
I try it, but i have a problem : how to diseabled Title in a slideshow (the title which is back right) ?
Have a good day
JM
March 8th, 2010 at 4:04 pm
The script is great but I am also having the problem with the first slide not resizing, this is happening on your sample page as well for me. I tried the fix from gnarwrangler but it didn’t work for me, and removed the 2nd slide out of 3 from the rotation.
These are the browsers I have tested:
Mac
FF 3.5.8
Safari 4.0.4
Chrome 5.0.307.11 beta
PC
IE 7.0.6001.18000
IE 8.0.6001.18702
Firefox 3.0.16
Safari 3.2.3
Thanks again.
March 10th, 2010 at 4:15 pm
I’m with Bjarne — Any way to make the slideshow usable with a Next/Prev type function?