jQuery弹出大图效果

引用插件

   

Div布局

   <div id="content">

        <h1>imgBox</h1>

        <hr />

        <div id="images">

            <a id="example1-1"title="" href="images/4006876523_289a8296ee.jpg"><imgalt="" src="images/4006876523_289a8296ee_m.jpg"/></a>

            <a id="example1-2"title="Lorem ipsum dolor sit amet"href="images/photo_unavailable.gif"><img alt=""src="images/photo_unavailable_m.gif" /></a>

            <a id="example1-3"title="Maecenas eros massa, pulvinar et sagittis adipiscing, &lt;br/&gt; molestie et arcu"href="images/4003912116_389c3891cf.jpg"><img alt=""src="images/4003912116_389c3891cf_m.jpg" /></a>

            <a id="example2-1"title=""href="images/3793633187_44790d1f0a_o.jpg"><img alt=""src="images/3793633187_f56bb1bf99_m.jpg" /></a>

            <a id="example2-2"title="Maecenas eros massa, pulvinar et sagittis adipiscing, molestie etarcu" href="images/3793633099_3e1e53e4ac_o.jpg"><imgalt="" src="images/3793633099_4f9c3e08b3_m.jpg"/></a>

        </div>

</div>

 

JS代码控制

   <scripttype="text/javascript">

    $(document).ready(function () {

        $("#example1-1").imgbox();

 

        $("#example1-2").imgbox({

            'zoomOpacity': true,

            'alignment': 'center'

        });

 

        $("#example1-3").imgbox({

            'speedIn': 0,

            'speedOut': 0

        });

 

        $("#example2-1,#example2-2").imgbox({

            'speedIn': 0,

            'speedOut': 0,

            'alignment': 'center',

            'overlayShow': true,

            'allowMultiple': false

        });

    });

    </script>

 

效果图