jQuery Fancybox插件说明

转载

mob604756eb6938 2015-10-19 08:02:00

文章标签 jquery javascript elastic ide css 文章分类 代码人生

这里有jquery影像回放路径插件称为Fancybox，项目主页地址：http://fancybox.net/

Fancybox的特点例如以下：

1、能够支持图片、html文本、flash动画、iframe以及ajax的支持

2、能够自己定义播放器的CSS样式

3、能够以组的形式进行播放，导航的button（上一项，下一项）

4、假设将鼠标滚动插件（mouse wheel plugin）包括进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片

5、Fancybox播放器支持投影。更有立体的感觉

Fancybox用法：

1、引入jquery核心库和Fancybox插件库

<script type="text/javascript" src="/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可选-假设须要用到fancy transition(一些动画效果)你还须要引入下面脚本

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

可选-假设须要支持鼠标滚轮滚动效果你还须要引入下面脚本

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、加入样式文件

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

3、在页面上创建链接元素

A、图片元素

<a id="simple_1" href="/img/simple1.jpg"><img src="/img/simple1.jpg" alt=""/></a>

B、普通文本

<a id="simple_2" href="#data" kesrc="#data">点击这里将显示文本</a>
<div style="display: none;">
    <div id="data">那片笑声让我想起我的那些花儿，在我生命每一个角落静静为我开着.</div>
</div>

C、Iframe

<a id="simple_3" href="http://www.baidu.com">Baidu</a>

D、不同的动画风格

<a id="example1" href="/img/simple1.jpg"><img alt="example1" src="/img/simple1.jpg" /></a>
<a id="example2" href="/img/simple1.jpg"><img alt="example2" src="/img/simple1.jpg" /></a>
<a id="example3" href="/img/simple1.jpg"><img alt="example3" src="/img/simple1.jpg" /></a>
<a id="example4" href="/img/simple1.jpg"><img class="last" alt="example4" src="/img/simple1.jpg" /></a>

E、不同的标题位置

<a id="example5" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example4" src="/img/simple1.jpg" /></a>
<a id="example6" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example5" src="/img/simple1.jpg" /></a>
<a id="example7" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example6" src="/img/simple1.jpg" /></a>
<a id="example8" href="/img/simple1.jpg" title="Learn a little bit every day."><img class="last" alt="example7" src="/img/simple1.jpg" /></a>

F、以组的形式进行播放

<a rel="example_group" href="/img/simple1.jpg"><img alt="" src="/img/simple1.jpg" /></a>
<a rel="example_group" href="/img/simple2.jpg"><img alt="" src="/img/simple2.jpg" /></a>

4、jquery实现效果

<script type="text/javascript">
$(function(){
  $("a#simple_1").fancybox(); //图片元素
  $("a#simple_2").fancybox(); //普通文本
  $("#simple_3").fancybox({   //iframe元素 
    'width'     : '75%',
    'height'    : '75%',
    'autoScale'   : false,
    'transitionIn'    : 'none',
    'transitionOut'   : 'none',
    'type'      : 'iframe'
  });

  //不同的动画风格
  $("a#example1").fancybox();

  $("a#example2").fancybox({
    'overlayShow' : false,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic'
  });

  $("a#example3").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none'  
  });

  $("a#example4").fancybox({
    'opacity' : true,
    'overlayShow' : false,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'none'
  });

  //不同的标题位置
  $("a#example5").fancybox();

  $("a#example6").fancybox({
    'titlePosition'   : 'outside',
    'overlayColor'    : '#000',
    'overlayOpacity'  : 0.9
  });

  $("a#example7").fancybox({
    'titlePosition' : 'inside'
  });

  $("a#example8").fancybox({
    'titlePosition' : 'over'
  });

  //以组的形式进行播放
  $("a[rel=example_group]").fancybox({
    'transitionIn'    : 'none',
    'transitionOut'   : 'none',
    'titlePosition'   : 'over',
    'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
      return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / '
      + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
    }
  });

})
 </script>