jQuery弹窗放大图片展示插件

jQuery弹窗放大图片展示插件-精品资源网
jQuery弹窗放大图片展示插件
此内容为免费资源,请登录后查看
0
免费资源

jQuery弹窗放大图片展示插件

这是一款类似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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容