Home

pupunzi edited this page Dec 22, 2010 · 9 revisions
Clone this wiki locally

jQuery.mb.maskedGallery

dependencies:

optional: jquery.metadata.js

How does it works:

here is the js call:


$(function(){
   $("#g1").mbMaskGallery({
        type:"normal",
        galleryMask:"mask/monitor.png",
        galleryUrl:"",
        galleryColor:"black",
        galleryLoader:"loader/loader_black.gif",
        loaderOpacity:.3,
        loader:true,
        fadeTime: 500,
        slideTimer: 6000,
        changeOnClick:true,
        navId:"nav1", //nav1
        descId:"desc1"
    });
})

here is the code for each gallery:


<div id="g1" >
  <img src="images/3.jpg">
  <img src="images/2.jpg" class="{url:'mbMaskedGallery1.html',desc:'photo description 2'}" >
  <img src="images/5.jpg" class="{script:'alert(\'here I am\')',desc:'photo description 5'}" >
  <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 accept true or false and specify if the loader is shown or not.
changeOnClick activate a navigation tool.
navId, descId accept a string rapresentind the ID of the nav element and the desc placeholder.

If you add an attribute url or script to the image, once it’s shown you can go to the url by cliccking on it.