js图片视频查看器插件



7 27 10



特效描述:图片视频查看器,js图片视频查看器插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css">

2. 引入JS

<script src="dist/BigPicture.js"></script>

3. HTML代码

<div class="main">
	<div id="image_container" class="container">
	  <h3>图片</h3>
	  <p>Click thumbnails to load larger images. Loading spinner &amp; captions are built-in.</p>
	  <div class="flex">
		<img src="img/photo1_thumb.jpg"/>
		<img src="img/photo7_thumb.jpg"/>
		<img src="img/photo2_thumb.jpg" caption="Example of an optional caption. You can put words here."/>
		<img src="img/photo3_thumb.jpg"/>
	  </div>
	</div>
	<div id="video_container" class="container">
	  <h3>视频</h3>
	  <p>支持Youtube, Vimeo和超链接。任何元素触发都可以触发弹出查看器。例如,点击这个超链接弹出一段<span class="text-trigger htmlvid" vidSrc="videos/panda.mp4">熊猫的视频</span>。</p>
	  <div class="flex">
		<div class="vid htmlvid" style="background-image:url(img/vid_towers.jpg)" vidSrc="http://hppts://www.51qianduan.com
/"></div>
		<div class="vid youtube" style="background-image:url(img/3.jpg)" ytSrc="tU1b1H2EWU4"></div>
		<div class="vid youtube" style="background-image:url(img/4.jpg)" ytSrc="rTi9FKuMNKQ"></div>
		<div class="vid youtube" style="background-image:url(img/5.jpg)" ytSrc="z_PeaHVcohg"></div>
		<div class="vid vimeo" style="background-image:url(img/6.jpg)" vimeoSrc="119287310"></div>
		<div class="vid vimeo" style="background-image:url(img/7.jpg)" vimeoSrc="154174852"></div>
	  </div>
	</div>
	<div id="local_image_container" class="container">
	  <h3>本地图片</h3>
	  <p>Normal image elements resized with css</p>
	  <div class="flex">
		<img src="img/background3.jpg"/>
		<img src="img/background4.jpg" caption="Another optional caption."/>
		<img src="img/background6.jpg"/>
	  </div>
	  <p>Elements with background-images. Script extracts the image automatically.</p>
	  <div id="background_images" class="flex">
		<div class="background-image" style="background-image:url(img/background2.jpg)"></div>
		<div class="background-image" style="background-image:url(img/background5.jpg)"></div>
		<div class="background-image" style="background-image:url(img/background1.jpg)" caption="You can use captions with any kind of element."></div>
	  </div>
	</div>
	<div class="container" id="broken_container">
	  <h3>错误处理</h3>
	  <p>If your remote link is 404, or the display element throws an error, the user will receive an alert.</p>
	  <div class="flex">
		<img id="broken_image" src="img/broken_thumb.jpg"/>
		<div id="broken_vid" class="vid htmlvid" style="background-image:url(img/vid_towers.jpg);width:480px;margin:.2em"></div>
	  </div>
	  <p>If the vimeo / youtube URL is incorrect, the embed is shown with the error.</p>
	  <div class="flex">
		<div class="vid youtube" style="width:480px;background-image:url(img/2.jpg)"></div>
		<div class="vid vimeo" style="width:480px;background-image:url(img/3.jpg)"></div>
	  </div>
	</div>
</div>
<script>
  (function() {
	function setClickHandler(id, fn) {
	  document.getElementById(id).onclick = fn;
	}
	setClickHandler('image_container', function(e) {
	  e.target.tagName === 'IMG' && BigPicture({
		el: e.target,
		imgSrc: e.target.src.replace('_thumb', '')
	  });
	});
	setClickHandler('local_image_container', function(e) {
	  (e.target.tagName === 'IMG' || e.target.className === 'background-image') &&
		BigPicture({
		  el: e.target
		});
	});
	setClickHandler('video_container', function(e) {
	  var className = e.target.className;
	  ~className.indexOf('htmlvid') &&
		BigPicture({
		  el: e.target,
		  vidSrc: e.target.getAttribute('vidSrc')
		});
	  ~className.indexOf('vimeo') &&
		BigPicture({
		  el: e.target,
		  vimeoSrc: e.target.getAttribute('vimeoSrc')
		});
	  ~className.indexOf('youtube') &&
		BigPicture({
		  el: e.target,
		  ytSrc: e.target.getAttribute('ytSrc')
		});
	})
	setClickHandler('broken_container', function(e) {
	  e.target.id === 'broken_image' &&
		BigPicture({
		  el: e.target,
		  imgSrc: '/nopic.jpg'
		});
	  e.target.id === 'broken_vid' &&
		BigPicture({
		  el: e.target,
		  vidSrc: '/novid.mp4'
		});
	  ~e.target.className.indexOf('vimeo') &&
		BigPicture({
		  el: e.target,
		  vimeoSrc: 'ajoiejlkr'
		})
	  ~e.target.className.indexOf('youtube') &&
		BigPicture({
		  el: e.target,
		  ytSrc: 'oijlksdjf'
		})
	});
  })();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到