Skip to content

一款内嵌式Lightbox效果

by sunflowamedia ON 2011/11/07 695

这款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>
No Comments Yet

Leave a Reply

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS


Top