jQuery (mb)MaskedGallery 1.8 (new!) « Matteo Bicocchi’s Blog

jQuery (mb)MaskedGallery 1.8 (new!)

with 25 comments

maskedgallery

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:
<img src="images/2.jpg" class="{url:'mbMaskedGallery1.html'}>
instade of:
<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:$(function(){$("#g1").mbMaskGallery({ type:"normal", galleryMask:"mask/monitor.png", galleryColor:"black", galleryLoader:"loader/loader_black.gif", loaderOpacity:.3, loader:false, fadeTime: 200,slideTimer: 6000, changeOnClick:false, navId:"", nextPath:"", prevPath:"" }); })

here is the code for each container:

<div id="g1" class="galleryCont" > <img src="images/3.jpg"> <img src="images/2.jpg" url="mbMaskedGallery1.html"> <img src="images/5.jpg" script="alert('PIPPO')"> <img src="images/4.jpg"> <img src="images/6.jpg"> <img src="images/7.jpg"> <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!

Written by Matteo Bicocchi

February 16, 2009 at 9:21 pm

Posted in code, javascript, jquery

Tagged with jquery gallery, jquery slideshow, masked gallery, mbmaskedgallery

25 Responses

Subscribe to comments with RSS.

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?

Tito

February 26, 2009 at 8:36 am

Reply
- 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
  
  Matteo Bicocchi
  
  February 26, 2009 at 10:52 am
  
  Reply
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

Col

February 26, 2009 at 4:17 pm

Reply
- 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
  
  Matteo Bicocchi
  
  February 26, 2009 at 4:32 pm
  
  Reply
is there a way to configure this to not switch by fade times, but clicking on a thumbnail? thanks!

Kenton

March 2, 2009 at 1:48 pm

Reply
- Hi Kenton,
  I’ll get your suggestion for next release,
  thnx,
  Matteo
  
  Matteo Bicocchi
  
  March 2, 2009 at 3:40 pm
  
  Reply
Thanks

Kenton

March 2, 2009 at 4:15 pm

Reply
it is possible to change attributes like fade time etc.. dynamically ? was also looking to add next.. previous buttons.

remo

March 23, 2009 at 4:04 am

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

Joe

March 24, 2009 at 7:05 pm

Reply
- Hi Joe,
  I just make a new release that should solve your request.
  Just download the 1.5.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  March 24, 2009 at 10:48 pm
  
  Reply
[...] DIRECT LINK » [...]

mbMaskedGallery | Feed Reader

April 16, 2009 at 5:02 am

Reply
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

Daniela

April 20, 2009 at 3:46 pm

Reply
- 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
  
  Matteo Bicocchi
  
  April 20, 2009 at 7:04 pm
  
  Reply
Grazie Matteo,
proverò !!.
Ciao
Daniela

Daniela

April 22, 2009 at 10:26 am

Reply
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 !

Julien Marie

May 26, 2009 at 12:10 pm

Reply
- Hi Julien Marie,
  I’m working on it, next release.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  May 26, 2009 at 2:10 pm
  
  Reply
- Hi Julien,
  I’ve updated the (mb)MaskedGallery with the crossFade transition as default.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  May 26, 2009 at 10:30 pm
  
  Reply
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

Karsten

May 29, 2009 at 9:45 am

Reply
- 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
  
  Matteo Bicocchi
  
  May 29, 2009 at 4:36 pm
  
  Reply
- 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
  
  Matteo Bicocchi
  
  June 3, 2009 at 5:21 pm
  
  Reply
  - thanks. now it works.
    
    Karsten
    
    June 4, 2009 at 2:47 pm
thanks for the app ! exactly what I needed !

Clément

June 19, 2009 at 12:11 pm

Reply
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

Agota

July 29, 2009 at 8:13 am

Reply
- 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:
  function preloadImg(u){ var o = new Image (); o.onload = function (){changePhoto (u);}; o.onerror = function (){alert ("can't load " + u);}; o.src = u+"?rnd="+Math.floor (Math.random () * 1000); }
  
  Try to remove +”?rnd=”+Math.floor (Math.random () * 1000);.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  July 29, 2009 at 1:00 pm
  
  Reply
[...] 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 [...]

Masked Gallery | jQuery Wisdom

September 19, 2009 at 3:30 pm

Reply

Matteo Bicocchi’s Blog