jquery.mb.bgndGallery
A flexible photo gallery as background!
With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best.
You can either navigate the gallery with your keyboard or with a control panel displayed where you whant in the page.
v. 1.1.0
What’s new in 1.1.0 version:
Solved a bug on Opera that prevents the correct behaviour.
Hi,
I would like to use mbBgndGallery but I wonder if there is a way to make background images more faded in order no to affect foreground objects?
Best Regards.
Hi,
You can do that via CSS:
.mbBgndGallery img{
opacity: 0.6;
}
Bye,
Matteo
I wanted to get the faded image effect also, but ran into an issue with the suggestion, so I thought I would post my experience here….
The image element with “mbBgndGallery” class has an inline opacity attribute on it already and hence putting an entry in the CSS will not have any affect since inline has precedence over any CSS entry (unless you do ‘!important’ maybe). To achieve the faded background image effect I actually had to set opacity on the parent div like so:
.mbBgndGallery {
opacity: 0.6;
}
Great! awsome! Very nice!!!!!
thx!!!
Hi! How can I use mbBgndGallery.changeGallery to change the background to just one picture in flickr mode?
Thanks !!
Hi Rodrigo,
Thank you for the mail you sent t me.
The flickr methods provided with the component actually works only for sets or profile public images, not for single images…
I’ll see to add a single image method even if this sounds strange for a gallery system…
Bye,
Matteo
Thanks a lot! Matteo, this is what i am doing: http://pixelesbanda.com/arena/index.php
I want to change the backgrounds when I click in “la banda” (the band).
I’m very happy with the mb stuff, works amazing! =)
and what about having a special set just with one picture?
Hi Jean,
If you have just one picture why should you use this component?
Bye,
matteo
Is there anywhere i can find a step by step explanation of how to add it to your site? This is my first time using a plugin..
Hi Alex,
No, there’s no step by step explenation; but you can start from the demo page you find in the downloaded file and see the documentation: https://github.com/pupunzi/jquery.mb.bgndGallery/wiki.
Bye,
Matteo
Hi,
When I add mb.bgndGallery.js, all inputs become NOT clickable. I can not insert a text or whatever into inputs. How can I fix this?
Best Regards.
Hi,
Can’t replicate your issue…
do you have a public url where to test this behaviour?
Bye,
Matteo
Hi,
Nope I dont have a public URL but when I remove the “” and the JQuery, I can enter into inputs.
Here is JQuery:
$(document).ready(function () {
$.mbBgndGallery.buildGallery({
containment: “body”,
timer: 4000,
effTimer: 2000,
// // If your server allow directory listing
folderPath: “elements/”
});
})
Try http://www.tommycarl.com/bgimages/
Tommy Carl
Hi Matteo,
I was able to setup my site.
Unfortunately i came across an obstacle. When I preview my site in dreamweaver the website appears and functions correctly, but when i type in the url in safari “soulskatingla.com” the website does not show and/or load the plugin. Is that a problem with godaddy? or me? How can i fix it?
Hi Alex,
I should see the page to understand what’s going wrong…
Do you get any error in console?
Did you try setting the array instead of the path of your images folder? If your server doesn’t allow directory listing the path to folder will not work.
Bye,
Matteo
Very nice gallery plugin! Thanks! @opendirhu
Hi Matteo
First of all Thank so very much for the great tuts and material to work with.
My question is that I want to have the background gallery in a site where it would work in several links under different names, how would I be able to make this function correctly. I mean if I have a page for signs I like this work with the signs in the back ground the next with banner which will then show about banners, do I have to do anything else than the naming the images so they don’t get mixed up? please advise.
Thank you again.
Hi Nikolai,
in each page just initialize the gallery pointing to different photo list; if you are using the “folderPath” property than point to a different folder, else if you are using the “images” property build a different images path array.
Bye,
Matteo
Hi Matteo,
According to the post above, how can I appoint a new folderPath dynamically, so that I can point to different photo list with different category.
Can it be done by calling the function again?
Also, any logic to show the thumbs on the page?
Thank you
Tommy
Hi Matteo,
I added:
$('#loadNow').click(function() { var gallery=$("#wrapper").get(0); var array=jQuery.loadFromSystem('elements/category/Bouquet/'); var array=["1.jpg","2.jpg", "3.jpg"]; $.mbBgndGallery.changeGallery(gallery,array); });But nothing happen, what did I do wrong?
Thanks,
Tommy
Matteo,
Finally, I got it.
But I still need some help on showing thumbnail.
Thanks,
Tommy
Tommy,
This is not an overly elegant solution, but I just knocked it up as an example:
var iss = $(“body”).get(0);
iss.opt.images.forEach(function(i) {
var img=$(“”).attr(“src”,i).click(function() {
$.mbBgndGallery.changePhoto(i,iss);
iss.opt.paused=true;
});
$(“#thumbs”).append(img);
});
Ignore the variable naming – just whatever came to mind.
Hope this helps.
Matteo, thanks for the great plugin. I’m using it on the redesign of my homepage. Here’s the draft I’m working on http://kckps.org/index_new.php
It seems to work fine except it sometimes skips images and jumps back to the default picture I’ve put in the background using css (in case it doesn’t work for somebody, they’ll at least see a picture instead of white space). I just posted your mb.bgndGallery.js without any changes and you can view the source on the new homepage.
Any ideas on how to make it transition more smoothly?
NEVER MIND … I just had the code to call the function in the body section instead of the head. When I moved it, it worked fine. THANKS for this great plug-in.
I have some pictures in portrait orientation (width < height) and they get cropped when this jQuery plugin I fell in love with displays it.
Is there a way so that the height can be adjusted to stay with in the browser window –like for instance the way Windoze [sic] picture previewer displays it?
Hi Keith,
This behaviour is needed to let images alwais fill the containment space; if I ajust the height to the browser window height than the space would not be filled correctly…
So there’s no way to solve this issue sorry,
Matteo
Thank you for your quick response Matteo… I appreciate the design decision. I just wonder, if this could be added as a configuration option?
$.mbBgndGallery.buildGallery({
allowSpaces: true,
…
});
I’ll see to add this property to the next release.
Bye,
Matteo
I am very much happy that you are considering my humble request. I will keep looking for updates. This is an enormously helpful component –especially its usage is really very simple.
Obviously this is just happening with me.. would like to use mb.bgndGallery. Looks/works good in safari and firefox, BUT not in Chrome and I only have one addon AdBlock Plus.. I disabled it for the mb.bgndGallery example page, but yet the VERY FIRST background slide is good, this is what the backgrounds look like after the first one! http://imageshack.us/f/35/backgrounddelete.jpg/
Hi Bernard,
It doesn’t happen to me… which version of Chrome are you using?
Bye,
M
I’m using version 12.0.742.122
Hello,
first of all great plugin!
this is site that I’m developing http://dev.tomislavboric.com/#
and background slider DON’T WORK with firefox 3.6
please I need your help cause I have to finish it tommorow! thank you!!
Hi Tommy,
Can you tell me if you get any error on the console using FF 3.6? I use to upgrade FF to the latest version (as most of FF users do) and I can’t test it.
Bye,
Matteo
Any word on the bug with google chrome with the version I listed above?
Hi Bernard,
Don’t know if this could be the problem, but actually I’m testing all my components with the 13.0.782.107.
I can suggest you to update to the latest version of Chrome, than to clear your cache and to verify you are nor running the browser with cache disabled.
Bye,
Matteo
I’m up to date now 13.0.782.107.. and still the same, after the first frame all other bkgrnds are cut exactly in half
Hey guys,
problem detected….CSS3 transition effect is supported on Firefox 4+, so it doesn’s work on Firefox 3. Tryied to find Hack that could do the thing but couldn’t find anything…
I’t not that it’s not working for me, but don’t want unsatisfied client that maybe still have Firefox 3
Hey People,
The body gallery isn’t working correctly in google chrome, the first images is displayed correct.
But the other are displayed half.
is there maybe a list in wich browsers and versions the plug in works?
Hi Chankerd,
On my test it works fine on Chrome too…
It should work fine in all browsers that support CSS3 transitions.
Bye,
M
Ok I see this, on your own demo.
http://imageshack.us/photo/my-images/812/plugin.png/
I use google chrome, 13.0.782.112 m, windows
I was having problems in Chrome as well. It looks like the problem is with the extension AdBlock, once I disabled that the slideshow worked fine.
Thank You ! I love this thing.
^ Which is the exact same thing for me!
http://imageshack.us/f/35/backgrounddelete.jpg/
Hi Bernard,
Tested it again on Chrome Mac and PC without any problem…
If you find out what’s going on please let me know.
Bye,
M
It’s actually placing the top of the image in the center of the page, it’s not actually ‘cut in half’ it’s shifted to top edge being 50% below the top of the browser window.
Trying to figure it out now. Obviously many people are having issues with this, repeating that it ‘works for me’ isn’t going to help
Ill post as soon as I figure something out!
Hi Brian,
.
You are of course right saying “repeating that it ‘works for me’ isn’t going to help”, but if I can’t replicate the issue it’s quite hard for me to find the solution, ad considering that this plugin has been downloaded more than 3000 times in two months and only two people get this issue, I can’t consider it as a real bug.
If you can help me figuring out what is the problem you are well come
P.S.: I like your photos. Go on with your great work.
Bye,
Matteo
if(!el.opt.preserveTop)
//image.css(“margin-top”,(($(containment).height()-image.height())/2));
image.css(“margin-top”,”0″);
Lines 165,166
The script seems to place the image halfway down the page after the first image is loaded. Not entirely sure why the margin-top would ever be set to anything but zero – nonetheless, the way it’s written now everything past the first image will end up halfway down the page
I simply commented it out and set the margin-top to zero.
Works like a charm now
Even if this solution works, I don’t think this is the right solution.
The “el.opt.preserveTop” parameter let user to choose if images should anchor to the top or to the center of the containment. Changing that line you always anchor it to the top.
Now I’m leaving for the sea side for some days, When I’ll be back I’ll try to figure out what “(($(containment).height()-image.height())/2))” is returning and how to make it robust.
If you whant to help me you could replace momentarily:
if(!el.opt.preserveTop)
image.css(“margin-top”,(($(containment).height()-image.height())/2));
with:
if(!el.opt.preserveTop){
image.css(“margin-top”,(($(containment).height()-image.height())/2));
console.debug( “margin-top”, (($(containment).height()-image.height())/2) )
}
And tell me what does it return in your chrome console.
Bye,
matteo
It’s a shame but it doesn’t work on the latest version of Opera for PC. Anyway thanks and congratulations
Hi Joserra,
there’s a bug at line 410 of the script:
change:
else if ($.browser.opera) {sfx="-0-";
transitionEnd = "oTransitionEnd";
}
with:
else if ($.browser.opera) {sfx="-o-";
transitionEnd = "oTransitionEnd";
}
It works fine also in Opera.
Bye,
Matteo
Yeeeessss! Thanks a lot its great!
Hi Matteo,
this is great work. Thanks a lot.
I’m currently working on a photo gallery script that is using your JQUERY.MB.BGNDGALLERY . So far it works fine. Now I’m trying to bring some text (titles, descriptions, captions etc…) to each shown Picture in the background. Do you see any possibility, where I can hook on in your code to show those text snippets for each picture?
Bye,
Wolf
Outstanding Plugin!!
Is there a way to make the array order random rather than always sequencing the same way? Ideally, the array would be randomized each time the page loads so that it always starts on a randomly-picked photo?
Hi Glen,
here is a function to shuffle an array:
$.shuffle = function(arr) {for (
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i],arr[i] = arr[j],arr[j] = x
);
return arr;
};
you can first define your image array:
var myImages=[img1.jpg, img2.jpg,...];than shuffle it:
var shuffledImages= $.shuffle(myImages);than pass this new list to the function:
$.mbBgndGallery.buildGallery({images: shuffledImages,
...,
...
});
This way, every time you get the page the order of images will be different.
Bye,
Matteo
Thanks Matteo – works great! Great plug-in by the way – I really love it!
Que tal Mateo!
I’ve started my project with this plugin and !It is great!
I’d like to make a simple change in the first demo file.
How can I change the slide transition to be fade in/off ?
I tried to modified but it seems that I did something wrong.
Thank you very much for this blog!
Hi Juan Carlos,
You should change the “effects” param as follow:
effect:{enter:{left:0,opacity:0},exit:{left:0,opacity:0}},
Bye,
Matteo
Mateo
You’re such a great person!!
It works great!…I had to modify also the controls but now it’s working as expected
Many thanks for you continuous suuport!
Juan Carlos
Check out what you’ve done for me : http://bobcolehairdesign.net/
Thank you, thank you, thank you. : )
Hi Bob,
Happy for you
Bye,
Matteo
Hi Matteo!
..and if I’d like to change “fade transition” in a “slide transition” as in the INSIDE THE ELEMENT DEMO gallery ?
Thanks a LOT for all…
babe EMBARKED
Solved modifying script in DEMO.html
$.mbBgndGallery.buildGallery({
)))
// containment:”#wrapper”,
containment:”body”,
effect:{enter:{left:”100%”,opacity:1},exit:{left:”-100%”,opacity:1}},
timer:3000,
effTimer:0,
controls:”#controls”,
grayScale:false,
Hi
i want to make this like this blog (auto )
plz help me for this
don’t know if it’s only my fault but the file “demo.html” didn’t work at all. I had to modify “demo0.html”. I tried to copy&paste the code from demo on your site, didn’t work neither.
great plugin! i’m just building one site with it! many thanks!
Hi Jan,
the method used to get images in the demo file works only on a webserver if it allows directory listing.
If you whant to use it locally or on a webserver that doesn’t allow directory listing than you should fill the “images” array with the path of images you whant to display:
if you take a look at the code of the demo.html file you’ll see that the bgndGallery function is initialized as follow:
$.mbBgndGallery.buildGallery({ .... folderPath:"elements/", .... })This way images are retrived using a mthod that looks at the images folder and build an array list with all the path of images contained in that folder.
In your case images should be listed as follow:
$.mbBgndGallery.buildGallery({ .... images:[ "imagesPath/image1.jpg", "imagesPath/image2.jpg", "imagesPath/image3.jpg", ... ], .... })Hope this helps.
Bye,
Matteo
Matteo,
This is a great plug-in!
I was wondering if there is a way to implement thumbs when you are drawing images from your own source? any suggestions?
hello
great plug in!! i was wondering if there is a way of having the images selected separatedly, like the flikr demo but with my own images??
How to add this with my project which based on jsp…rply
Matteo,
Is there a cheat that will allow this to work properly in internet explorer prior to IE8? Is there a work around for that? I’ve unfortunately got users that have no upgraded so it’s not working for them.
It won’t work with FF3 and IE9… pretty far from useful like this! Although it would be wonderful if it worked!
Okay… I found the problem under FF3. It’s in
$.fn.galleryAnimate=function(opt,duration, type, callback)
FF apparently doesn’t support css transitions, but by adding
if($.browser.mozilla && $.browser.version[0] == 1) { callback(); }
to the end of galleryAnimate, it will work without transitions. Later I may change this to use to images layered and with js transitions.
Ciao Matteo,
complimenti per questo plugin, veramente ben fatto… fa piacere vedere tanta professionalità in un connazionale
I have one question only… it is possible to use other transitions, e.g. zooming in/out? And how to?
Thank in advance
Fabrizio
Ciao Fabrizio,
Grazie per i complimenti.
This plug in uses CSS3 to render Transitions and all those that are supporter by The .animate() jQuery method are appliable to it.
To change the transition type you need to modify the “effect” parameter. As it is an object it accept several properties: “enter” and “exit” (where to specify the CSS applied to the image before entering and after leaving), “enterTiming” and “exitTiming” that define the ease mode to apply.
To render a Zoom in and Zoom out transition, as those are not officially supported by jQuery, You can include this great plug in:
https://github.com/zachstronaut/jquery-animate-css-rotate-scale.
Using this you’ll be able to apply Zoom effect to images transition.
Bye,
Matteo
Hi.
Good work!
Unfortunately it doesn’t scale the images correctly with IE8 – or have I missed any path or updates on your script? Does anyone out there have a solution, otherwise not very usable script for me as major part of my clients still use IE8.
hi!
I would like to use the first demo of the download, but this doesn’t work, and I don’t know why, I downloaded and unziped the files, and I tried the demo.html but this file open but when the explorer open it, the file doesn’t work, the pictures don’t charge, can you help me please?
Hi Kayiita,
This happens because the component allows two ways to retrive images: one is by locating the images folder (and this is the one used on the demo) but it can work only if you are using the component on a web server that allows “directory listing”; the other is by listing all images path in an array:
$.mbBgndGallery.buildGallery({containment:"body",
timer:4000,
effTimer:2000,
controls:"#controls",
grayScale:false,
// If your server allow directory listing
//folderPath:"elements/",
// else:
images:[
"elements/1.jpg",
"elements/2.jpg",
"elements/3.jpg",
"elements/4.jpg",
"elements/5.jpg",
...
],
onStart:function(){$("#controls .play").hide();$("#controls .pause").show();},
onPause:function(){$("#controls .play").show();$("#controls .pause").hide();},
onPlay:function(opt){$("#controls .play").hide();$("#controls .pause").show();},
onChange:function(idx){}, //idx=the zero based index of the displayed photo
onNext:function(opt){}, //opt=the options relatives to this component instance
onPrev:function(opt){} //opt=the options relatives to this component instance
});
This second one is safer and can works also calling the page locally as file.
To solve your problem use this second method.
Bye,
Matteo
hi matteo,
good job: goodbye flash!
This pluggin (gallery background) is available with picasa?
I am “google” and use all tools for my business.
I’m looking for a pluggin like you to view my workshop (photography) ?
Thanks
Hi M,
I love this plugin – the code makes it very fast!
I need help making some last changes though.
(check my dummy on the link provided)
- I want ALL images aligned left regardless of its size (margin: 35/35/35/35px)
- Still use that cool scaling aspect ratio when the browser window is resized.
Ive made some changes so its almost working only the images are being cropped to the left at some points.
- Is it difficult to make the images slide left/right?
If you have time pleeeease help me. Feels like Im so close or… (?)
Any help is most appreciated, thanks!
/Daniel
Hi Daniel,
There’s an “effect” parameter you can pass to the initialization function that define how images should get in and get out from the screen.
if you need to slide images from left to right:
effect:{enter:{left:100%,opacity:0},exit:{left:-100%,opacity:0}, enterTiming:”ease-in”, exitTiming:”ease-in”},
This should work.
Bye,
Matteo
Hi Matteo,
Excellent plugin! Congrats!
Is there a way to point “folderPath” to an URL instead of a folder? I tried to insert an URL but it doesn’t seem to work.
Thx!
Hi Richard,
If you want to point directly to a list of images than you should pass the Array of URL instead of the “folderPath”.
Take a look here: https://github.com/pupunzi/jquery.mb.bgndGallery/wiki
Bye,
Matteo
Thanks Richard, I’m dont want to point to a list of images but to a folder located but located on another domain name. I tried to insert and http address (ex. /folderPath:”http://www.imgserver.com/gallery/”,) and it didn’t work.
Do you see what I mean? Is there a way to do this ?
Hi Matteo,
Thank you for the the quick reply!
Is it ok for you to reveal the secret with how the get left aligned images?
- Im really stuck and it seems like it doesn’t really matter where in the code I make changes; margins, positions, width, alignments… almost like it’s not supposed to be – but I want it to.
Thank you for your time.
Best,
Daniel
Hi Matteo,
Any idea how to create a pre-loader when loading images from an array (rather than load from system)? It works fine on my 100Mbit connection, but others have complained that they just see a black page for about a minute while it tries to load about 4MB of pictures – I would prefer to have some text like “Loading… Please wait” while it pulls them into memory.
Is this possible?
Nice work! I installed it on a simple html page, I find that it works on FF,O,IE8 but not Chrome. The Left Top seems to anchor on Left=0 and Top = Browser Dimensional Height – (O.5*(Browser Height)); This behavior is not consistent, sometimes it scales to the entire window, usually the first image, but at random times this behavior has been observed to do the same again. On Average it displays the Chrome incorrectly.
Hi,
Sorry but I can’t replicate your issue…
Do you have a link fro your page?
Bye,
Matteo
I have discovered the issue. I was using the Chrome Plugin Extension: Ghostery Ad blocker. Previously I edited the Ad blocker to white list the domain where I was implementing the mb.bgndGallery on without achieving the desired effect, i.e. the issue of half placed images was still observed. When I disabled the Ghostery Ad blocker plugin mb.bgndGallery behavior worked perfectly.
Hi. Great plugin, thank you for sharing it.
About the problem that someone has with Chrome or Safari, i had it too. Your plugin shares it with another similar and it’s all about a bug of WebKit (or so it seems). I was able to “resolve” it by repeatedly checking the width of the image before showing it. Maybe there is a better way to do it (checking this.node.width instead of image.width()?) but it worked for me.
Hello, great job!!!
we want to use your gallery for a project. is it possible to change the crossfade function to a fade-out -> fade-in function. the reason is that we want to position a third picture in the background (fullscreen) which alwas should be shown during the fading effect. could you please give us an advice or code example. thanks in advance.
Hi Daniel,
Actually the plug in works with cross effects and has no sequential effect implementation.
You can modify the script from line 187 to 197 to make the entrance as callback of the exit animation…
Bye,
Matteo
thanks for your answer!!! is it possible to have a pasue between the crossfade animation, to show a third picture with z-index:0.
greetz
Hi Matteo!!!! excelent work! Thanks so much!
Just to let you know, the source code for download is out-of-date, so Opera will have a few bugs, like autostart won’t work and there will be no transition effects. So download the script from the demo.
Thnx Dan,
I just updated the mb.bgndGallery to version 1.1.0 with the fix for Opera.
Bye,
Matteo
Dead link on FF and Safari. http://cloud.github.com/downloads/pupunzi/jquery.mb.bgndGallery/jquery.mb.bgndGallery.1.1.0.zip displays an error message so I can’t download this. Pisser cos it looks v good.
Hi,
Updated the download link. Now it works.
Bye,
Matteo
Wow, Matteo, such a fast response!
Could you clarify the “how to display shuffled images” code above in the comments, very confusing for us JS newbies (does everything go in the shuffle code or does some of it go in the demo.html file? and if so, which bits go where [slaps forehead]).
This is excellent work, sir. Thank you, really appreciate this plug-in.
Cheers, Matteo, wonderful to see full-screen bkgd image slideshow.
No matter how I play with it, though, I can’t get the shuffle to work.
Ah well, I’ll leave it, no worries.
Thanks a million, mate.
Hi Jez,
on the doc page you’ll find the explanation on how to shuffle your array of images path:
https://github.com/pupunzi/jquery.mb.bgndGallery/wiki
Bye,
Matteo
It must be me and my bad JS coding – I followed the docs (thanks for the link BTW) yet the shuffle gig doesn’t work for me
though I’m sure it works for everyone else
Any chance of adding a shuffle demo to the demo page?
Hate to bring this up but the plug-in fails on the following iPad and iPhone testing sites:
http://www.testiphone.com/
http://www.ipadpeek.com/
The Supersized plug-in meanwhile (does a similar job), um, runs perfectly on the above.
I’ve an iPad and an iPhone and it works great on both
Probably the two emulators fiter the url by a proxy violating a cross site scripting due to the way I’m getting images (using directory listing instead of an array of images path).
Bye,
Matteo
Thanks for that, Matteo.
hey, we want to use images for the control icons…it doesn’t work on iphone and ipad. do you have a solution?
thanks a lot!!!!!
Is there a way to make the entire page with the slideshow clickable without making the wrapper div clickable (which does not cover the entire page and does not seem to work in IE using something like onclick=”location.href=’http://www.xyz.com’”)?
Or even better: is it possible to make the individual images clickable with each a different URL?
Hi Marc,
Yes, using the onChange callback;
you can first define an array of urls corresponding to the image array:
var URLArray=[yourURL_1, yourURL_2, yourURL_3, ...]than define a function to attach at the onChange event:
function changePage(idx){
$("body").unbind("click.bgndGallery");
var URL= URLArray[idx];
if(!URL) return;
$("body").one("click.bgndGallery",function(){
self.location.href=URL;
});
}
Than you can initialize the plugin adding the function to the onChange callback event:
$.mbBgndGallery.buildGallery({
...,
...,
onChange: changePage,
...
})
Hope this can help you,
Bye,
Matteo
Hi,
I really like this bkgrnd image gallery, but had one question. Is there a way to add captions to the images? I would like an overlay of text to change out when the images do…Please let me know, thanks so much!
Hi Samantha,
Yes, there’s a way using events callbacks. You can see an example here: http://www.open-lab.com/gallery.html.
If you take a look at the source of the page you’ll understand how it works.
To do that you should have an array containing a desription for each images in the gallery then add to the mb.bgndGallery init the onChange callback that pass by default the index of the actual image so you can changes the html content of your overlay text with the corresponding text of the caption array:
var captions=[ "<h4>caption 1</h4><span>text caption...</span>", "<h4>caption 2</h4><span>text caption...</span>", ... ] $.mbBgndGallery.buildGallery({ ....., ....., ....., onChange:function(idx){ if(captions[idx]) $("#desc").fadeOut(function(){$("#desc").html(captions[idx]).fadeIn()}); else $("#desc").fadeOut(); } })Hope this can help you,
Bye,
Matteo
Hi Matteo
Thanks for this wonderful script, the best in his category.
It’s works great and smooth on all browsers but seems to be a resizing problem with IE8.
Live example here : http://bit.ly/uc8i3F
Am I missing something ? is there any workaround for this issue ?
Best Regards
Adel
Hi Adel,
I know, this happens because IE8 can’a maintain the aspect ratio while changing just one size of the image element.
I’ll try to solve this issue anyway the part of code is at line 145 : chekSize function;
Bye,
matteo
Hey Matteo, did you find a solution for that problem?
greetz
I found a solution for IE8:
You have to replace one of the “if”-functions below line 145 to the following code (sorry… dont know the exact line, because we did some modifications in the whole file):
var wAspectRatio=$(containment).width()/$(containment).height();
if(aspectRatio<wAspectRatio){
var absoluteWidth = $(containment).width();
var absoluteHeight = $(containment).width()/aspectRatio;
image.css("height",absoluteHeight+"px");
image.css("width",absoluteWidth+"px");
} else{
var absoluteHeight = $(containment).height();
var absoluteWidth = $(containment).height()*aspectRatio;
image.css("width",absoluteWidth+"px");
image.css("height",absoluteHeight+"px");
}
I hope it will work for You as well
Hi Stephan,
Your solution surely solve the problem, anyway you can download the latest gitHub release (https://github.com/pupunzi/jquery.mb.bgndGallery/zipball/master) where the problem has been solved with less script
.
Bye,
Matteo
Hi Matteo!
Great work and very interesting gallery. It works perfectly on Mac, but there seem to remain a few cross browser issues (of course with IE…). I am personally experiencing a problem on IE7 (PC) when using a folder instead of a list of files. Images seem to load but do not appear. The page is totally black.
Has anybody here got the same problem? Any idea to solve this bug ?
Check the following links on IE7
Script using a folder (doesn’t work)
http://masterpiecemagazine.com/1
Script using an img list (work well)
http://masterpiecemagazine.com/2
On a side note, in order to have the semi-transparent layer work on IE, I suggest to add this in the css (rgba is not supported by IE)
background: rgba(0, 0, 0,.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)”;
Is there a way to put a pre-loader so that the images are downloaded one at a time?(in order for the website to be faster)
Hi Matteo,
can i control images with a number? i have 100 pictures on a gallery, next and prev is a long way
Hi Matteo,
I am running into a problem when I put both jquery.mb.bgndGallery and jquery.mb.extruder on the same page. The latter one works fine, but the background images of bgndGallery don’t fade out fully. If I remove the extruder JS code then bgndGallery starts to work again correctly. Am I doing something wrong or is this a known issue? Any work around?
Here is my JS code:
$(document).ready(function() {
$.shuffle = function(arr) {
for (
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i],arr[i] = arr[j],arr[j] = x
);
return arr;
};
var myImages=["images/gallery/bg1.jpg", "images/gallery/bg2.jpg", "images/gallery/bg5.jpg", "images/gallery/bg6.jpg", "images/gallery/bg7.jpg"];
var shuffledImages=$.shuffle(myImages);
$.mbBgndGallery.buildGallery({
containment:"body",
timer:12000,
effTimer:4000,
//controls:"#controls",
grayScale:false,
images: shuffledImages
});
$("#extruderLeft").buildMbExtruder({
positionFixed:true,
width:350,
sensibility:800,
position:"left", // left, right, bottom
extruderOpacity:1,
flapDim:100,
textOrientation:"tb", // "tb" or "bt" (top-bottom or bottom-top)
onExtOpen:function(){},
onExtContentLoad:function(){$("#extruderLeft").openPanel();},
onExtClose:function(){},
hidePanelsOnClose:true,
autoCloseTime:0, // 0=never
slideTimer:300
});
});
Hi,
here is a zip file with both running together: http://dl.dropbox.com/u/1976976/extruder%2BbgndGallery.zip
Bye,
Matteo
Hi…When viewing your impressive project, using chrome I get the same problem that others have reported: The first image is “fullscreen”, but the others are pushed down the page, not rendered fullscreen. I took a screenshot and you can see it here:
http://www.andoverfabrics.com/fullscreen.jpg.
I’ve popped open the about screen so you can see the version of chrome – it says it is current.
I also tried turning off adblock. That doesn’t seem to be the problem either.
Thanks again for your effort.
Hi James,
I can’t see the screenshot – it says: Forbidden – You don’t have permission to access /fullscreen.jpg on this server.
Does it happens if you resize the window or always?
Bye
M
Thanks. Why would you ever want to set this to false?
You have to change this in the plugin to fix that I had the same problem with safari and chrome, just edit the plugin file you can find this at the beginning here is mine for example:
$.mbBgndGallery ={
name:”mb.bgndGallery”,
author:”Matteo Bicocchi”,
version:”1.1″,
defaults:{
containment:”body”,
images:[],
controls:null,
effect:{enter:{left:0,opacity:0},exit:{left:0,opacity:0}, enterTiming:”ease-in”, exitTiming:”ease-in”},
timer:4000,
raster:false, //”inc/raster.png”
effTimer:3000,
folderPath:true,
autoStart:true,
grayScale:false,
activateKeyboard:false,
preserveTop:true, <<<<<—————————————-!!!!!!!!!
onStart:function(){},
onChange:function(idx){}, //idx=the zero based index of the displayed photo
onPause:function(){},
onPlay:function(opt){},
onNext:function(opt){},
onPrev:function(opt){}
},
change “preserveTop:false” to “preserveTop:true”
Very nice plugin, I’m new to webdesign, but I’m getting my head around css and HTML , and now jquary . I want this add on to load in the confines of a DIV , not on the whole background of the webpage, is this possible ? if so how do I do that?
Awesome Script. The only problem is with IE8. It doesn’t resize the pics and doesn’t keep the aspect ratio. Someone who can help us, please.
greetz
Wonderful tool Matteo!
But there is a slight problem. Even on your own demo:
http://pupunzi.com/mb.components/mb.bgndGallery/demo/demo.html
the fades between images are choppy and not smooth. Can you tell me why and maybe offer a fix?
My current page, which is showing the problem:
http://wilshirerestaurant.com/fade.html
Thanks!
Hi Eddie,
On which browser are you testing the component?
For me (FF, Safari, Chrome on oSx snow leopard) the cross fade is smooth either on your page or on my test page…
Keep in mind that transitions on older browsers that doesn’t support the “CSS3 transition” property are rendered via javascript using my “CSSAnimate” component;
this could be the cause; javascript uses more CPU and on older computer can slow down the effect.
Bye,
Matteo
Hi Matteo,
OSX Snow Leopard 10.6.8
Chrome, Safari, FF
Each one shows the images “pulsing” as they come in. Very pronounced.
These browsers are clearly up to date, what do you think?
Eddie
It sounds really strange…
I’m running with the same hardware and software as your but for me is smooth… did you try from other computers?
Bye,
M
It is strange. Yes – that’s how I found out about it. Clients have been telling me that it is happening on their computers. Does the same on my laptop..
Here is a screencast…
http://wilshirerestaurant.com/fade-test.html
jquery version 1.7.1
Here is a screencast of your test page running on FF on my macBook pro: http://dl.dropbox.com/u/1976976/mb.bgndGallery_test.mov
You could try to slowdown the transition by changing the “effTimer” parameter of the function…
I don’t have any other suggestions at the moment…
Bye,
M
Hi Matteo,
This is a really great software, thanks so much. My question involves the mb.menu. I am trying to show menus on the same page where I have the mb.bgnd installed, and I can’t see the menus except when the pictures are transitioning. They don’t work either. How can I get the menus to appear in front of the mb.bgnd images?
Thanks
TinRoof
Hi TinRoof,
The mb.bgndGallery should have the lowest z-index and should stay on the back by default; if the menu goes behind this means there’s something wrong in the HTML structure.
Do you have a public link where I can see this behaviour?
Bye,
Matteo
Hi Matteo,
I was wondering if you could take a quick look at this site and let me know if it’s a server problem?
It works locally but when I put it on a server it stops working….
Here are two servers I have tried:
http://www.thefebs.com.au/riverstreet
http://www.zuber.com.au/riverstreet
Both have the same issue. Any thoughts?
Cheers
Bill
Hi Bill,
you have two errors in the page:
1. $.mbBgndGallery is undefined … $.mbBgndGallery.buildGallery({
2. $(“#coda-slider-1″).codaSlider is not a function … $(‘#coda-slider-1′).codaSlider();
First I notice that you are including jQuery two times: one at the beginning before the mb.bgndGallery and one at the end of the page where you have the codaSlider call.
This is bad; just include it once and better if it’s the latest as I included it.
Secod you should decide if you want to include scripts in the header or at the end of the page and than make just one documet ready call.
I don’t know if those are the reasons of your errors but first fix them than try it again.
Bye,
Matteo
Hi Matteo,
Thanks for your help! Such a simple problem! It was only the coda-slider script at the bottom that caused the problem. I forgot all about that bit of code!
Thanks for such a quick response, you are very helpful! Much appreciated. Grazie!
Cheers
Bill