Introducing the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.
November 10, 2011 UPDATE: MaxImage 2.0 beta 2 has been released
This 2.0 release has been in the works for a while and I am happy to say that I think it is ready for beta launch. Please note… It is absolutely going to have a lot of bugs, but if you feel like testing it and letting me know how it goes that would be fantastic.
Contents
What’s New
There have been a number of changes since 1.0 but here are some of the biggest:
- MaxImage 2.0 uses the slideshow power from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle but now for a background slideshow.
- MaxImage 2.0 determines whether your browser can use CSS3′s background-size:cover. If it can, it uses it as to limit the amount of heavy lifting that jQuery has to do. That means the majority of your users will have a slim and smooth experience. That is so important with large image animations as it is. (still working on optimizing) If CSS3 is not available it falls back to the old way of sizing and centering background images.
- MaxImage 1.0 made the mistake of assuming certain things about your design. I have tried to limit the amount of styling that MaxImage 2.0 does to give you the maximum amount of control. I’ve even pulled styles that were originally being set by JS into an external CSS.
- MaxImage 2.0 has been completely rewritten to comply with current best practices
Demo
Check out a demo.
I am working on official documentation to release with the plugin when it is ready for a full release.
Installation
Step 1
Download jQuery MaxImage 2.0 CSS, upload it to your server with FTP, and include it in your <head> tag:
<link rel="stylesheet" href="styles/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
Step 2
Link to jQuery Library, download jQuery Cycle Plugin, jQuery Easing plugin (optional) and MaxImage JS and include them in your <head> tag or right before the </body> tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="js/jquery.cycle.all.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.maximage.min.js" type="text/javascript"></script>
Step 3
Call maximage and pass cycle your options (these are options used for the demo):
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx:'scrollHorz',
speed: 800,
timeout: 8000,
prev: '#arrow_left',
next: '#arrow_right'
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});
});
</script>
Download
You can download Maximage2.0-beta1 from the github. Â The project is the entire demo site, but if you’d prefer you can download the CSS for Maximage and JS for Maximage independently.
You can also get the css and JS from the demo site:
Cycle – http://jquery.malsup.com/cycle/download.html
Maximage CSS – http://www.aaronvanderzwan.com/maximage/2.0/lib/css/jquery.maximage.min.css
Maximage JS – http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.maximage.min.js
Feedback
As usual… let me know what you think and if you have any suggestions. I’d love to know if you encounter any bugs… as that is what I am testing right now. Along with create a forum / trac I have it in my notes to get this up to GitHub and allow people to fork / help me make this work even better. Â <= I have it up at github:Â https://github.com/akv2/MaxImage. Â I’m still new to GIT, but feel free to fork, etc.
Donate
If you feel that this plugin has saved you some time or just want to show your appreciation, feel free to throw me a couple of bucks.
Cheers.
If this actually works, I’ll be really excited.
I got your comment on the jQuery forums… so I’m gonna try it out tomorrow.
I love cycle. This looks promising.
Thanks for your comment MrSeanG. I’m pretty excited about it too. Seems like a logical move to let Cycle do what it is good at and just take care of the rest. I think it is the smartest solution for fullscreen background slideshows that I have seen.
So it has been tested in IE7+, Firefox (current), Safari, Chrome and iOS (it looks really good in iOS actually). Please give it a try and let me know if you find any bugs or if you have any suggestions for the final release.
I appreciate your support on this.
looks cool, have you seen jquery vegas?
Hey dave. I haven’t seen jquery vegas. I’ll have to check that out. Is that what you have been using?
nicely done, and very cool — nice photos too… works great in Google Chrome 16.0.912.21 beta-m Win Vista
Nice….i used your last plugin and was having a few problems with the slide show (first image not resizing and a little conflict with fancybox)…however this one is fine…nice to have the numerous transition options…
)
Based on your last version, do you think you could state html and css setup (rather than looking at the source…it would make things a little easier
Ive added it to one of my sites, works in FF, Opera, Chrome and IE9
Many thanks for your developments!
Hey Barney,
This is exactly the type of feedback I am looking for. I’m glad 2.0 is working well for you. Let me know if you run into any issues in the future.
I am currently working on a tutorial that will include the entire setup, including html and css. The nice thing, is 2.0 pretty much works out of the box and allows complete customization. I think I might create a number of demo’s with all of the different transitions and options. For the time being, feel free to check out JSFiddle. It’s a nice way to test the different transitions and navigations.
http://jsfiddle.net/akv292/sLEyE/3/
Thanks again.
Pingback: MaxImage 2.0-beta2 Release & jsFiddle with it | aaron vanderzwan
Hello
Great great script, that was (almost) what I was looking for…
What if I want randomly video (third party) and image in my slides ?
thx
Thanks for this plugin. Will you consider to enable multiple instances in one page?
For example I have a cycle slider with smaller images and maximage background with full image. This kind of setup works good.
But other implementation – not:
I have multiple cycle containers in one page with multiple maximage containers which is corresponding to cycle container.
For the first run – everything works fine. But if I activate twice the same maximage container – it does not work. I’ve traced back to maximage plugin code, where it requires img tags.. it is obvious that after executing for the first time img tags no more. So, ive did restore img tags, but plugin does not work as intended… goes only for 1 slide out of 3 and then stops.
This is how I restore img tags in maximage container:
for (var i=0; i < MaxChild.length; i++) {
var imgUrl = $(MaxChild[i]).css('backgroundImage');
var pattern = /url\(|\)|"|'/g;
var imgU = imgUrl.replace(pattern,"");
$(MaxChild[i]).remove();
$('#'+mID).append('’);
};
Sorry if it sounds to confusing, but it is how it is
@Yves & Zy
Thanks for taking a look and trying out the plugin. I am currently working on not requiring there be images in the slideshows. This will open up versatility and hopefully allow for a larger array of uses.
@Zy
Do you have a URL that I could look at your setup? I’d be curious to explore the issues.
You can find it here: http://laforma.dev.tyliai.eu/
The interesting part is here: http://laforma.dev.tyliai.eu/test-irasas
On the left side, there is a small thumbnails. Each of them represents unique cycle container. While pressing on it – you activate that particular cycle container.
while using php I create maximage container + big cycle container + small thumb. Everything should go in sync
but as I mentioned before, maximage works for the first time only.
As a feature request it might look like this:
- need a way to control cycle commands inside maximage container (stop, start, destruct) to enable chaining functionality. (probably needs to reconsider how internal structure of maximage wokrs..). This could be useful if I want to stop maximage n.1 and activate maximage n.2 and vice versa.
- would be nice to have overlay option to apply blur or something else.. like jQuery vegas plugin.
And maybe it could be written from the other side… as a cycle extension? I think a lot of problems could be solved..
@Zy
Thank you for your feedback. I address your 2 requests below:
Issue 1 (Stop, Start, Destruct cycle commands)
Have you taken a look at the JSFiddle I set up? There is some pause / play functionality going on there that present how you can use cycles direct commands through MaxImage.
http://jsfiddle.net/akv292/sLEyE/
Issue 2 (Overlay option)
Take a look at the demo (http://www.aaronvanderzwan.com/maximage/2.0/). I have a corner gradient png that overlay’s the slideshow to add a dramatic effect to all of my images. Here is a direct link to the image that I am using:
http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/gradient.png
I thought about rolling this in to the plugin but I really want to keep MaxImage simple. I want it to only do what it is needed to keep it clean. Since the overlay is possible and quite simple to do with CSS and since it doesn’t require any Javascript I didn’t want to add it to the plugin.
Please let me know if these do not address your concerns and I will re-address your comments.
I am unable to download the plugin/files.
The message I get is:
The plugins site is currently unavailable.
We’ve been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and we have decided to temporarily shutter the existing site. We will be providing more details on the new plugins site soon, so that plugin authors can hit the ground running with our new submission process.
Hi Tina,
It looks like the jQuery plugins site (http://plugins.jquery.com/) is currently down (2011-12-07 – 8:30am EST). I have added some links to the files you will need to download in the downloads section of this post.
Thanks for your interest.
Really nice plugin. Exactly what I was looking for. Even works for SVG images, although if it is possible, some optimisation would be great.
Also someone mentioned jQuery Vegas in the comments above – this is also a great plugin but because it uses jQuery to bring in each image, it is not good for image SEO.
P.S Is there any way to make a donation to you for your work?
hi,
Great script, but need ur help.
is that anyway i can add hyperlinks on image slider>
Hello! Is there a way to use MaxImage, but to make the images advance on click in stead of using the arrows?
Thanks!!
Hey guys, here is how to get thumbnails using the pagerAnchorBuilder function found within jQuery Cycle:
$(‘#example’).maximage({
cycleOptions: {
fx: ‘fade’,
pager: ‘#nav’,
pagerAnchorBuilder: function(idx, slide) {
imgsrc = jQuery.Slides[idx].url;
return ‘<a href=”#” rel=”nofollow”></a>’;
}
}
});
You need to make sure you have an element with an id=”nav” somewhere on the page.
Cheers
Oops, look like my code got chopped
Please see here: http://pastie.org/3049894
Hi,
Did anyone tried to implement this in WordPress? In combination with the Slideshow Pro plugin (http://madebyraygun.com)?
The javascript, css, jquery is all loaded, the image has the right class, but nothinh happens.
Any idea? Would be great to make this work on WordPress.
Kind regards,
J
Thanks for taking the time to create this neat ‘plugin plugin’
Problem for me, though, with the demo – when I resize the window, the slideshow adds superfluous whitespace between slides. This is the problem I, too, ran into when trying to make Cycle fullscreen. Have you noticed this? I’ve found this to be the case in both Safari and Chrome unfortunately.
I’ve found myself attempting to use Flexslider instead, which has been built to be responsive from the outset. It’s still very young though, so lacks the flexibility of Cycle.
Hello and thanks for this very userful plugin.
But there is a problem for me too: The website content is not scrollable, there is no scrollbar.
Can you give ma a hint, please.
Thanks in advance, kind regards
r.z
I used this for my website and it is absolutely brilliant, thank-you!. Never built a site before in my life and I had to basically figure it all out on my own. It works but is slow. Might be because I missed some code or did something else wrong or possibly my images sizes are quite too big? I am on a crappy free server right now so that could also be the problem for it being slow… but I will be switching it over soon to one with my own IP.
Anyway, I love my site now. Simple and to the point!
If you can, let me know if I should adress any issues in my code . It would be suuuper helpful.
CT
@luke
Thanks for helping out with posting the code for the cycle plugin anchor builder @ http://pastie.org/3049894. Very helpful.
If anyone would like to donate, I have added a donate page that just has a simple paypal button… http://blog.aaronvanderzwan.com/donate/. If you have used this plugin and wish to contribute, please donate.
@all
jQuery Cycle plugin, though a wonderfully versatile tool, was not originally built for large scale slideshows. That being said, if you are noticing some performance issues on large screens, I have found the fade transition to be the most smooth. I am working on figuring out a way to make everything run even more smooth but that is going to take some work. I have recently updated the plugin to use the code that I originally built for modern browsers which will help with that a little but, but there is still work to be done in this area.
As for scrollbars… please look at overflow:scroll css styles for your html elements and body elements (depending on browsers).
Also, MaxImage now lives at Github. I’m still new to GIT, but take a look and fork if you like:
https://github.com/akv2/MaxImage
Hi! I tried to download the project but the jquery link to plugin not work. There is an other link to download this project?
Thank you so much in advance!
@sans2012
I have fixed the link to the plugin. It is now pointing to the github project which is the entire demo. I have also linked to the maximage CSS and JS independently.