Matteo Bicocchi's Blog

Slide your images into a mask!

Build your own png mask and choose your images to slide inside!

demo page:

http://pupunzi.com/#mb.components/mb.maskedGallery/maskedGallery.html

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