jQuery图片弹出插件Fancybox修改版

来源:https://www.sucaihuo.com/js/2607.html 2017-07-31 23:53浏览(1006) 收藏

一款jQuery图片弹出插件Fancybox修改版,多种图片展现效果,还可以随意设置图片标题,另外,支持Inline、Ajax、Iframe和Swf,功能还是比较强大的,喜欢的童鞋请收下吧。
jQuery图片弹出插件Fancybox修改版
分类:图片代码 > 图片墙 难易:初级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 31

手机扫码访问:

下载资源 下载积分: 20 积分

页面的head部分,需引入两个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/style.css" />

接着引入jQuery库和JS插件,并设置好所有演示示例的参数,代码如下:

<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("a#example1").fancybox();

	$("a#example2").fancybox({
		'overlayShow'	: false,
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic'
	});

	$("a#example3").fancybox({
		'transitionIn'	: 'none',
		'transitionOut'	: 'none'	
	});

	$("a#example4").fancybox({
		'opacity'		: true,
		'overlayShow'	: false,
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'none'
	});

	$("a#example5").fancybox();

	$("a#example6").fancybox({
		'titlePosition'		: 'outside',
		'overlayColor'		: '#000',
		'overlayOpacity'	: 0.9
	});

	$("a#example7").fancybox({
		'titlePosition'	: 'inside'
	});

	$("a#example8").fancybox({
		'titlePosition'	: 'over'
	});

	$("a[rel=example_group]").fancybox({
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});

	/*
	*   Examples - various
	*/

	$("#various1").fancybox({
		'titlePosition'		: 'inside',
		'transitionIn'		: 'none',
		'transitionOut'		: 'none'
	});

	$("#various2").fancybox();

	$("#various3").fancybox({
		'width'				: '75%',
		'height'			: '75%',
		'autoScale'			: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'				: 'iframe'
	});

	$("#various4").fancybox({
		'padding'			: 0,
		'autoScale'			: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none'
	});
});
</script>

页面的body部分,都是常用的标签,所以结构不算复杂,代码如下:

<div id="content">
	<h1>FancyBox <span>v1.3.4</span></h1>

	<p>这是一个范例。</p>

	<hr />

	<p>不同的动画<br />

		<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>

		<a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>

		<a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
		
		<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
	</p>

	<p>不同的标题位置<br />

		<a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>
		
		<a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>

		<a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>

		<a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>
	</p>

	<p>相册图集<br />

		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>

		<a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>

		<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
		
		<a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
	</p>

	<p>多个示例</p>

	<ul>
		<li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
		<li><a id="various2" href="ajax.txt">Ajax</a></li>
		<li><a id="various3" href="http://google.ca">Iframe</a></li>
		<li><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li>
	</ul>

	<div style="display: none;">
		<div id="inline1" style="width:400px;height:100px;overflow:auto;">
			这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。
		</div>
	</div>

	<p>
		Ajax的示例需放到服务器端运行,本地无法运行测试。
	</p>
</div>
评论5
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

  • 头像 4楼
    03-06 18:59
    简***^
    非常漂亮的效果,我很喜欢~!
  • 头像 3楼
    08-10 20:04
    t***t
    很漂亮的效果啊
  • 头像 板凳
    08-02 09:15
    d***2
    很好的,就是很多不是很懂啦
  • 头像 椅子
    08-01 17:51
    演***我
    很好的,很漂亮的效果啊
  • 头像 沙发
    08-01 13:13
    欢***3
    哇塞,挺漂亮的啊
1 2