jQuery (mb)MaskedGallery 1.8 (new!)
Slide your images into a mask!
Build your own png mask and choose your images to slide inside!
demo page:
http://www.open-lab.com/mb.ideas/index.html#mbMaskedGallery
download page:
http://mbideasproject.googlecode.com/files/jquery.mbMaskedGallery.1.8.zip
jQuery project page:
http://plugins.jquery.com/project/mbMaskedGallery
Now
Releases:
1.8.0 (New!)
Major issue released:
- added:
transition:”crossfade”, // or “normal”,Now the default transition type is crossfade; if you want to have a fadein/fadeout transition set this parameter to “normal”.
1.5.0
Major issue released:
- added:
changeOnClick:false,
navId:””,
nextPath:””,
prevPath:””,
If changeOnClick the component adds a next and prev buttons defined by the nextPath and prevPath params;
if you want to build your own navigationbar positioned where you want with your NEXT and PREV buttons defined as you want (the component’ll look for child elements of the specified ID with className “next” and “prev” and will attach events) just set the ID into the navId param and that’s all. - Now the component works also with just 1 image defined.
- on each image you can define either a script or an URL to be executed once the image is shown
- In case of jquery.metadata plug-in you’ll write:
1<img src="images/2.jpg" class="{url:'mbMaskedGallery1.html'}>
instade of:
1<img src="images/2.jpg" url="mbMaskedGallery1.html">
1.0 first release
dependencies:
optional: jquery.metadata.js
How does it work:
here is the js call:
1 | $(function(){ |
1 2 3 4 5 6 7 8 | $("#g1").mbMaskGallery({ type:"normal", galleryMask:"mask/monitor.png", galleryColor:"black", galleryLoader:"loader/loader_black.gif", loaderOpacity:.3, loader:false, fadeTime: 200, |
1 2 3 4 5 6 7 | slideTimer: 6000, changeOnClick:false, navId:"", nextPath:"", prevPath:"" }); }) |
here is the code for each container:
1 2 | <div id="g1" class="galleryCont" > <code> |
<img src=”images/3.jpg”>
1 |
<img src=”images/2.jpg” url=”mbMaskedGallery1.html”>
1 |
<img src=”images/5.jpg” script=”alert(‘PIPPO’)”>
1 |
<img src=”images/4.jpg”>
1 |
<img src=”images/6.jpg”>
1 |
<img src=”images/7.jpg”>
1 |
<img src=”images/8.jpg”>
</div>
Params:
type axcept random or normal;
galleryMask, galleryLoader are the url for the mask and for the loader;
galleryColor is the background color of the mask;
loaderOpacity is the opacity of the loader;
fadeTime and slideTime are times in milliseconds for the fade of the image and for each image show;
loader axcept true or false and specify if the loader is shown or not.
If you add an attribute url to the image, once it’s shown you can go to the url by cliccking on it.
That’s all;
Enjoy yourself!
[…] your images into a mask!Build your own png mask and choose your images to slide inside! Web Site Demo Download AKPC_IDS += "215,";Popularity: unranked [?] Share and […]
Hi Agota,
I think that it’s due to the images preload function that calls the URL with a random number parameter on the request to let IE work fine (otherwise IE doen’t change image…); that cause the browser not to cache images…
the function is:
2
3
4
5
6
var o = new Image ();
o.onload = function (){changePhoto (u);};
o.onerror = function (){alert ("can't load " + u);};
<strong>o.src = u+"?rnd="+Math.floor (Math.random () * 1000);</strong>
}
Try to remove +”?rnd=”+Math.floor (Math.random () * 1000);.
Bye,
Matteo
Hi Matteo,
First of all , thank you very much for this awesome plugin. Love it’s simplicity and ease of use.
I am just experiencing one issue where the images used in the slide-show does not get cached. I uploaded a demo (35 image) of it to my development server and it ran up 1.6GB traffic in 1 day.
Just wondering if it might be something that I got wrong or something that I did not include in the script.
Look forward to your reply.
Thanks,
Agota
thanks for the app ! exactly what I needed !
thanks. now it works.
Hi Karesten,
I get your example and:
1. the images filename should be without spaces;
2. the png mask should have transparent background otherwise you’ll see only your png while images are running behind.
That’s why it doesn’t work.
Bye,
Matteo
Hi Karsten,
this plugin is used quite a lot and it should work… if you want you can send me a zip file with your gallery and <I can see what's wrong.
Bye,
Matteo
Hi,
I like your little MaskedGallery. But I am struggeling with three thinks.
1. on the demo, pictures are just shown in half of the “monitor” or other mask. How can I change it that the picture is shown in the total mask? If have seen it works on the webside mentioned below.
2. if I replace one of the demo pictures with one of mine (same size, jpg etc.) they will not be shown. What is it that I make wrong?
3. if I use one of mine picturses as mask, it will be shown. But neither your demo pictures nor mine will be shown inside.
I have used jquery.js in the version 1.2.1 and the latest. I have just made adjustment to the js call and container in the html script. Nothing changed in *.js
Can you help me?
Karsten
Hi Julien,
I’ve updated the (mb)MaskedGallery with the crossFade transition as default.
Bye,
Matteo
Hi Julien Marie,
I’m working on it, next release.
Bye,
Matteo
Hi,
I love this plugin.
But there’s one thing I think would be great is instead of fading from picture to gallery color and then to picture, why not fade from picture to picture ?
I find it strange to see a “nothing” state between pictures…
Thanks a lot !
Grazie Matteo,
proverò !!.
Ciao
Daniela
Ciao Daniela,
grazie per i complimenti;
purtropo la stragrande maggioranza dei siti di documentazione è in inglese… in italano puoi trovare qualche sporadico articolo; il consiglio che ti posso dare è quello di farti la tua esperienza scaricando esempi e guardando il codice, cercando di capire come funziona, provando a cambiarlo per vedere cosa succede, etc.
Non c’è migliore palestra che la propria curiosità di scoprire come funzionano le cose! 🙂
Questi sono i miei bookmark su jquery: http://delicious.com/pupunzi/jquery.
Ciao,
Matteo
Ciao, complimenti per la tua grande professionalità,volevo chiederti se ho modo di trovare risorse su iquery, css ectc in italiano?
Sto avvicinandomi da poco a questo modo di fare web
( se posso usare questa espressione ), poichè ho sempre usato il vecchio metodo delle tabelle e mi sono accorta di essermi proprio persa il treno e vorrei rimettermi in carreggiata.
Grazie
Daniela
[…] DIRECT LINK » […]
Hi Joe,
I just make a new release that should solve your request.
Just download the 1.5.
Bye,
Matteo
Wonderful! Could you please make a simpler version that would just load one image from URL and mask it, without preload? That would be great for decorative design.
it is possible to change attributes like fade time etc.. dynamically ? was also looking to add next.. previous buttons.
Thanks
Hi Kenton,
I’ll get your suggestion for next release,
thnx,
Matteo
is there a way to configure this to not switch by fade times, but clicking on a thumbnail? thanks!
Hi Col,
It can work also with IE6 but you need an extra plugin to fix the png bug of explorer (jquery.pngfix.js).
Here is an example that works fine in IE6: http://www.morethanicons.com.
bye,
Matteo
Hi,
I like the idea of this and can think of loads of uses. Just a quick one – I’ve tested on FF v3 and IE v6, workd fine on FF but is not working on IEv6. Does this need IE7+ to work or is it supported on IEv6?
Thanks,
Col
Hi,
This plug in has been thought to be used with a mask… Of course, if you don’t want the mask you can put a completely transparent image as mask and you have what you are looking for.
bye,
Matteo
Hi,
I just found this jQuery-Plugin and it seems to be useful for me.
I’ve just got a question: Is it possible, to use this without a mask?