jQuery點擊圖片彈出大圖展示代碼



57 226 76



特效描述:jQuery 點擊圖片 彈出大圖展示,jQuery點擊圖片彈出大圖展示代碼

代碼結構

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link type="text/css" rel="stylesheet" href="css/jquery.galpop.css" media="screen" />

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.galpop.min.js"></script>

3. HTML代碼

<div class="container">
	<h1 class="page-title">示例演示 | Galpop Image Gallery Popup</h1>
	<div class="row">
		<div class="col-md-12">
			<h2 id="single-head">1、單張圖片</h2>
			<p>Just bind galpop to the anchor link.</p>
			<div class="gallery-wrapper">
				<a class="galpop-single" href="images/gallery/large/apocalypse.jpg">
					<img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." />
				</a>
			</div>
			<h2 id="single-head">2、多張圖片</h2>
			<p>Bind a series of images with the same "data-galpop-group" attribute value.</p>
			<div class="gallery-wrapper">
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/apocalypse.jpg"><img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/vintage.jpg"><img src="images/gallery/thumbs/vintage.jpg" class="img-thumbnail" alt="An old, vintage poster." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/magicLake.jpg"><img src="images/gallery/thumbs/magicLake.jpg" class="img-thumbnail" alt="A scene of a magical forest." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/underwater.jpg"><img src="images/gallery/thumbs/underwater.jpg" class="img-thumbnail" alt="An underwater scene with lots of tension." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/goodBoy.jpg"><img src="images/gallery/thumbs/goodBoy.jpg" class="img-thumbnail" alt="A dog and his pet." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/darkroad.jpg"><img src="images/gallery/thumbs/darkroad.jpg" class="img-thumbnail"  alt="A scene where nothing is what it seems." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/roadkill.jpg"><img src="images/gallery/thumbs/roadkill.jpg" class="img-thumbnail" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/wolfMarine.jpg"><img src="images/gallery/thumbs/wolfMarine.jpg" class="img-thumbnail" alt="A portrait of a wolf marine." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/alice.jpg"><img src="images/gallery/thumbs/alice.jpg" class="img-thumbnail" alt="The scene from Alice in Wonderland where she meets the caterpillar." /></a>
				<a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/reflection.jpg"><img src="images/gallery/thumbs/reflection.jpg" class="img-thumbnail" alt="A magical poster with a reflection." /></a> 
				<h2 id="info-head">3、帶標題和鏈接的圖片lightbox</h2>
				<p>Galpop has a box on the lower left corner for captions. If the anchor contains a "title" attribute, that will be added to the box. If the anchor contains a "data-galpop-link" attribute, it will add an anchor to the box. Adding a "data-galpop-link-title" attribute will change the text of the anchor, and adding a "data-galpop-link-target" attribute will change the target of the anchor.</p>
				<div class="gallery-wrapper">
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/apocalypse" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An apocalyptic Earth." href="images/gallery/large/apocalypse.jpg">
						<img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/vintage" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An old, vintage poster." href="images/gallery/large/vintage.jpg">
						<img src="images/gallery/thumbs/vintage.jpg" class="img-thumbnail" alt="An old, vintage poster." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/magicLake" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A scene of a magical forest." href="images/gallery/large/magicLake.jpg">
						<img src="images/gallery/thumbs/magicLake.jpg" class="img-thumbnail" alt="A scene of a magical forest." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/underwater" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An underwater scene with lots of tension." href="images/gallery/large/underwater.jpg">
						<img src="images/gallery/thumbs/underwater.jpg" class="img-thumbnail" alt="An underwater scene with lots of tension." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/goodBoy" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A dog and his pet." href="images/gallery/large/goodBoy.jpg">
						<img src="images/gallery/thumbs/goodBoy.jpg" class="img-thumbnail" alt="A dog and his pet." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/darkroad" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A scene where nothing is what it seems." href="images/gallery/large/darkroad.jpg">
						<img src="images/gallery/thumbs/darkroad.jpg" class="img-thumbnail" alt="A scene where nothing is what it seems." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/roadkill" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." href="images/gallery/large/roadkill.jpg">
						<img src="images/gallery/thumbs/roadkill.jpg" class="img-thumbnail" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/wolfMarine" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A portrait of a wolf marine." href="images/gallery/large/wolfMarine.jpg">
						<img src="images/gallery/thumbs/wolfMarine.jpg" class="img-thumbnail" alt="A portrait of a wolf marine." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/alice" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="The scene from Alice in Wonderland where she meets the caterpillar." href="images/gallery/large/alice.jpg">
						<img src="images/gallery/thumbs/alice.jpg" class="img-thumbnail" alt="The scene from Alice in Wonderland where she meets the caterpillar." />
					</a>
					<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/reflection" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A magical poster with a reflection." href="images/gallery/large/reflection.jpg">
						<img src="images/gallery/thumbs/reflection.jpg" class="img-thumbnail" alt="A magical poster with a reflection." />
					</a>
				</div>
				<h2 id="callback-head">4、回調函數</h2>
				<p>You can add a callback function to fire after every completion of an image. You can grab the index and count from the "#galpop-wrapper" element.</p>
					<div class="gallery-wrapper">
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/apocalypse.jpg">
						<img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/vintage.jpg">
						<img src="images/gallery/thumbs/vintage.jpg" class="img-thumbnail" alt="An old, vintage poster." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/magicLake.jpg">
						<img src="images/gallery/thumbs/magicLake.jpg" class="img-thumbnail" alt="A scene of a magical forest." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/underwater.jpg">
						<img src="images/gallery/thumbs/underwater.jpg" class="img-thumbnail" alt="An underwater scene with lots of tension." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/goodBoy.jpg">
						<img src="images/gallery/thumbs/goodBoy.jpg" class="img-thumbnail" alt="A dog and his pet." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/darkroad.jpg">
						<img src="images/gallery/thumbs/darkroad.jpg" class="img-thumbnail" alt="A scene where nothing is what it seems." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/roadkill.jpg">
						<img src="images/gallery/thumbs/roadkill.jpg" class="img-thumbnail" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/wolfMarine.jpg">
						<img src="images/gallery/thumbs/wolfMarine.jpg" class="img-thumbnail" alt="A portrait of a wolf marine." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/alice.jpg">
						<img src="images/gallery/thumbs/alice.jpg" class="img-thumbnail" alt="The scene from Alice in Wonderland where she meets the caterpillar." /></a>
					<a class="galpop-callback" data-galpop-group="callback" href="images/gallery/large/reflection.jpg">
						<img src="images/gallery/thumbs/reflection.jpg" class="img-thumbnail" alt="A magical poster with a reflection." /></a>
				</div><!-- end callback galpop wrapper -->
				<h2 id="manual-head">5、手動打開Lightbox</h2>
				<p>You can also manually open the popup whenever you wish. You will have to use the "openBox" method and pass it the settings and image URL to open.</p>
				<div class="manual-wrapper">
					<select class="manual-open form-control">
						<option value="">Choose Image</option>
						<option value="images/gallery/large/apocalypse.jpg">An apocalyptic Earth.</option>
						<option value="images/gallery/large/vintage.jpg">An old, vintage poster.</option>
						<option value="images/gallery/large/magicLake.jpg">A scene of a magical forest.</option>
						<option value="images/gallery/large/underwater.jpg">An underwater scene with lots of tension.</option>
						<option value="images/gallery/large/goodBoy.jpg">A dog and his pet.</option>
						<option value="images/gallery/large/darkroad.jpg">A scene where nothing is what it seems.</option>
						<option value="images/gallery/large/roadkill.jpg">Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.</option>
						<option value="images/gallery/large/wolfMarine.jpg">A portrait of a wolf marine.</option>
						<option value="images/gallery/large/alice.jpg">The scene from Alice in Wonderland where she meets the caterpillar.</option>
						<option value="images/gallery/large/reflection.jpg">A magical poster with a reflection.</option>
					</select>
				</div><!-- end callback galpop wrapper -->
				<h2 id="manual-group-head">6、手動打開一組圖片</h2>
				<p>You can also manually open the popup as a group. Instead of passing it one url, you can use an array.</p>
				<div class="manual-group-wrapper">
					<select class="manual-open-group form-control">
						<option value="">Choose Image</option>
						<option value="0">An apocalyptic Earth.</option>
						<option value="1">An old, vintage poster.</option>
						<option value="2">A scene of a magical forest.</option>
						<option value="3">An underwater scene with lots of tension.</option>
						<option value="4">A dog and his pet.</option>
						<option value="5">A scene where nothing is what it seems.</option>
						<option value="6">Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.</option>
						<option value="7">A portrait of a wolf marine.</option>
						<option value="8">The scene from Alice in Wonderland where she meets the caterpillar.</option>
						<option value="9">A magical poster with a reflection.</option>
					</select>
				</div><!-- end manual open group wrapper -->
				<h2 id="load-iframe-head">7、加載 iframe 內容</h2>
				<p>In addition to images, you can also load an iframe into the popup.</p>
				<p><a href="ajax-content.html" class="click-open-iframe" style="color:#fff;text-decoration:underline;"><span class="glyphicon glyphicon-hand-right"></span> 點擊這里打開 iframe 內容</a></p>
				<h2 id="load-iframe-head">8、加載 AJAX 內容</h2>
				<p>If you don't want to load the entire window into an iframe, you can pick specific elements to load.</p>
				<p><a href="ajax-content.html" data-galpop-container=".text-content" class="click-open-ajax"  style="color:#fff;text-decoration:underline;"><span class="glyphicon glyphicon-hand-right"></span> 點擊這里打開 ajax 內容</a></p>
			</div>
		</div>
	</div>
</div>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 圖片廣告 lightbox
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表