Welcome, Old Sport!

一款内嵌式Lightbox效果

by ilikecss ON 2011/11/07 3992

这款Lightbox灯箱效果比较特别,反映速度很快,不内置Lightbox插件框架,直接页面上弹出效果。类似新浪微博的图片弹出效果,喜欢的朋友可以按照个人喜好修改完善

Step1. 创建HTML

<ul class="ppy-imglist">
<li>
<a href="images/networking.jpg">
<img src="images/networking.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Title</strong><br />shot by flickr member Airos Chou<br />
<a href="http://www.flickr.com/photos/airos_king/sets/72157627696553219/with/6213002262/">View on flickr.com</a>
</span>
</li>
</ul>

Step2. CSS较长这里就不贴出来了,请下载DEMO后自行查看

Step3. 插入jQuery和脚本包

<script type="text/javascript">
    <!--//<![CDATA[
    
    $(document).ready(function () {
        var options1 = {
        }
        var options2 = {
            caption:    false,
            navigation: 'permanent',
            direction:  'left'
        }
        var options3 = {
            caption:    'permanent',
            opacity:    1
        }
    
        $('#ppy1').popeye(options1);
    });
    
    //]]>-->
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.popeye-2.1.js"></script>
目前还没有评论



TOP