インライン型LightBoxを実現するJavaScript「jQuery.popeye」

使用方法

<link rel="stylesheet" type="text/css" href="jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.popeye-0.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {    
        $('#popeye1').popeye();
    });
</script>

<div id="popeye1" class="popeye">
   <ul>
       <!-- 画像1個目 -->
       <li><a href="大きい画像へのパス"><img src="サムネイル画像へのパス" alt="キャプション" /></a></li>
       <!-- 画像1個目ここまで -->
       画像分繰り返し
   </ul>
</div>

var options = {
    easing:     'easeInOutCirc',  //easingプラグインの値
    direction:  'left' //表示方向
    }
$('#popeye1').popeye(options);

サンプル

jquery.popeye demo

The first popeye-box to the left of this paragraph opens to the right (standard behavior).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam. Proin et neque. Fusce molestie eros et urna. Aliquam sed enim nec lacus bibendum suscipit. Sed varius, quam nec aliquam sagittis, risus sapien luctus nisi, sit amet convallis risus metus a mauris. Curabitur aliquam ultrices est. Pellentesque felis. Mauris luctus orci id justo. Mauris tincidunt massa nec pede. Proin auctor suscipit augue.

Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.

Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula.