<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js图片和视频查看器插件 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
<div id="image_container" class="container">
<h3>图片</h3>
<p>Click thumbnails to load larger images. Loading spinner & 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://www.moobnn.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 src="dist/BigPicture.js"></script>
<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';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
js图片和视频查看器插件.zip （31个子文件） 
js图片和视频查看器插件 
js图片和视频查看器插件.jpg 64KB jiaoben5018 css 
normalize.css 2KB main.css 10KB img background1.jpg 54KB background3.jpg 42KB
favicon.png 884B photo7_thumb.jpg 23KB 2.jpg 23KB 6.jpg 12KB photo2.jpg 151KB 3.jpg 23KB 5.jpg 23KB photo1_thumb.jpg 20KB photo7.jpg 96KB broken_thumb.jpg 25KB photo1.jpg 116KB background4.jpg 85KB 4.jpg 12KB pattern_waves.png 6KB
bp.svg 8KB photo2_thumb.jpg 26KB background6.jpg 48KB photo3.jpg 45KB photo3_thumb.jpg 12KB 7.jpg 15KB background2.jpg 81KB vid_towers.jpg 48KB background5.jpg 45KB
index.html 5KB dist BigPicture.js 13KB BigPicture.min.js 4KB资源评论
