JQuery图片放大器插件piroBox

简介

piroBox是一款JQuery图片放大器插件，采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前、向后控制链接。动态加载图片效果。易于定制。

参数说明：

border
//整数,图片边框，默认是: 0

duration
//整数,动画持续时间，默认:800

perspective
//整数,透视高度，默认: 140

minScale
//整型,背后图像的最小比例， 默认: 0.2

loadingClass
//字符串,加载图片时候把CSS样式加到元素里面，默认: nullbefore
//函数,下一个图片之前触发after
//函数,下一个图片之后触发

使用

1.  引入 jquery.js 和 piroBox.js 文件

2.  HTML

<div style="float:left; width:900px; display:block;">
  <div>
    <a href="images/1.jpg" title="Spain 2009">
      <img src="images/1s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/2.jpg" title="Nadia!!">
      <img src="images/2s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/3.jpg" title="Corsica 2008">
      <img src="images/3s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/4.jpg" title="Sunset in Rome">
      <img src="images/4s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/6.jpg" title="Portugal 2009 (Castle)">
      <img src="images/6s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/7.jpg" title="Portugal 2009 (Surfers Beach)">
      <img src="images/7s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/8.jpg" title="Portugal 2009, Lisbon story!!">
      <img src="images/8s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/10.jpg" title="Portugal 2009 (Templar castle)">
      <img src="images/10s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/11.jpg" title="Portugal 2009 (Lisbon area Alfama)">
      <img src="images/11s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/12.jpg" title="Portugal 2009 (Lisbon area Alfama)">
      <img src="images/12s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/13.jpg" title="Portugal 2009 (Lisbon transport)">
      <img src="images/13s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/14.jpg" title="Portugal 2009 (Sintra wolf's reserve)">
      <img src="images/14s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/15.jpg" title="Portugal 2009 (Is she drunk??)">
      <img src="images/15s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/16.jpg" title="Barcellona 2009, Ghotic area">
      <img src="images/16s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/17.jpg" title="Barcellona 2009, Ghotic area (Gargoyle)">
      <img src="images/17s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/18.jpg" title="Copenaghen 2009">
      <img src="images/18s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/20.jpg" title="Copenaghen 2009">
      <img src="images/20s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/21.jpg" title="Copenaghen 2009 (Christiania)">
      <img src="images/21s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/22.jpg" title="Copenaghen 2009 (Christiania)">
      <img src="images/22s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/23.jpg" title="Copenaghen 2009 (Helsingborg castle, Amlet's room)">
      <img src="images/23s.jpg"  />
    </a>
  </div>
  
  <div>
    <a href="images/24.jpg" title="Copenaghen 2009 (Helsingborg castle,statue of a Viking  )">
      <img src="images/24s.jpg"  />
    </a>
  </div>
  
</div>

3.  调用

<script type="text/javascript">
  $(document).ready(function() {
    $().piroBox({
      my_speed: 400,
      //动画的速度
      
      bg_alpha: 0.1,
      //背景的透明度
      
      slideShow : true,
      // true == slideshow on, false == slideshow
      
      offslideSpeed : 4,
      //幻灯持续的秒数(推荐3 到 6 )
      
      close_all : '.piro_close,.piro_overlay'
      // 追加类[.piro_overlay](逗号间隔)，如果你想要叠加效果。
    });
  });
</script>

相关链接

在线演示 ： https://www.91mszl.com/code/details/2286

官网地址 ：https://www.pirolab.it/