这是一款类似lightbox点击图片放大预览效果的jQuery弹窗放大图片展示插件,有多种展示方式可供选择,具体请看演示。
js代码
<script type=\"text/javascript\" src=\"js/jquery.galpop.min.js\"></script> <script type=\"text/javascript\"> $(document).ready(function() { $(\'.galpop-single\').galpop(); $(\'.galpop-multiple\').galpop(); $(\'.galpop-info\').galpop(); var callback = function() { var wrapper = $(\'#galpop-wrapper\'); var info = $(\'#galpop-info\'); var count = wrapper.data(\'count\'); var index = wrapper.data(\'index\'); var current = index + 1; var string = \'Image \'+ current +\' of \'+ count; info.append(\'<p>\'+ string +\'</p>\').fadeIn(); }; $(\'.galpop-callback\').galpop({ callback: callback }); $(\'.manual-open\').change(function(e) { var image = $(this).val(); if (image) { var settings = {}; $.fn.galpop(\'openBox\',settings,image); } }); $(\'.manual-open-group\').change(function(e) { var v = $(this).val(); var images = [ \'images/gallery/large/apocalypse.jpg\', \'images/gallery/large/vintage.jpg\', \'images/gallery/large/magicLake.jpg\', \'images/gallery/large/underwater.jpg\', \'images/gallery/large/goodBoy.jpg\', \'images/gallery/large/darkroad.jpg\', \'images/gallery/large/roadkill.jpg\', \'images/gallery/large/wolfMarine.jpg\', \'images/gallery/large/alice.jpg\', \'images/gallery/large/reflection.jpg\', ]; var settings = {}; $.fn.galpop(\'openBox\',settings,images,v); }); $(\'.click-open-iframe\').galpop({ contentType: \'iframe\', }); $(\'.click-open-ajax\').galpop({ contentType: \'AJAX\', }); }); </script>
暂无评论内容