JQuery的FancyBox插件做出图片展示功能

web前端-js教程FancyBox是一个用于显示图像，HTML内容和多媒体的lightbox工具。jquery插件之fancybox弹出框特效，与广为人之的lightbox插件比较类拟,可以展示单张图片，也可展示一组图片，它还可以展示自定义的内容与ajax载入外部文件的内容等，功能也是很方便与实用的。Demo effect(image gallery):

Sample code:

  First test(Image gallery)    

    $(document).ready(function () {      $(".fancybox1").fancybox();          });

Demo effect(single images):

Sample code:

  Single images                                

    $(document).ready(function () {      $("#single_1").fancybox({        helpers: {          title: {            type: 'float'          }        }      });      $("#single_2").fancybox({        openEffect: 'elastic',        closeEffect: 'elastic',        helpers: {          title: {            type: 'inside'          }        }      });      $("#single_3").fancybox({        openEffect: 'none',        closeEffect: 'none',        helpers: {          title: {            type: 'outside'          }        }      });      $("#single_4").fancybox({        helpers: {          title: {            type: 'over'          }        }      });          });  

Demo effect(thumbnail):

Sample code:

  Thumbnail helper                                

        $(document).ready(function () {      $(".fancybox-thumb").fancybox({        prevEffect: 'elastic',        nextEffect: 'elastic',        helpers: {          title: {            type: 'inside'          },          thumbs: {            width: 50,            height: 50          }        }      });    });