jQuery (mb)MaskedGallery 1.8 (new!)

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 Valid XHTML 1.0 Transitional

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pingback: Masked Gallery | jQuery Wisdom

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

    • 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:

      1
      2
      3
      4
      5
      6
      function preloadImg(u){
              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

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