图片浏览器
使用图片浏览器,你需要在 sm.js
和 sm.css
之后额外引入如下两个文件:
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
{% highlight js %}
/*=== 默认为 standalone ===*/
$(function(){
/*=== 默认为 standalone ===*/
var myPhotoBrowserStandalone = $.photoBrowser({
photos : [
'//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
'//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
'//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
]
});
//点击时打开图片浏览器
$(document).on('click','.pb-standalone',function () {
myPhotoBrowserStandalone.open();
});
/*=== Popup ===*/
var myPhotoBrowserPopup = $.photoBrowser({
photos : [
'//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
'//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
'//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
],
type: 'popup'
});
$(document).on('click','.pb-popup',function () {
myPhotoBrowserPopup.open();
});
/*=== 有标题 ===*/
var myPhotoBrowserCaptions = $.photoBrowser({
photos : [
{
url: '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
caption: 'Caption 1 Text'
},
{
url: '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
caption: 'Second Caption Text'
},
// 这个没有标题
{
url: '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
},
],
theme: 'dark',
type: 'standalone'
});
$(document).on('click','.pb-standalone-captions',function () {
myPhotoBrowserCaptions.open();
});
/*=== 有视频 ===*/
var myPhotoBrowserVideo = $.photoBrowser({
photos : [
{
html: '',
caption: 'Woodkid - Run Boy Run (Official HD Video)'
},
{
url: 'http://lorempixel.com/1024/1024/sports/2/',
caption: 'Second Caption Text'
},
{
url: 'http://lorempixel.com/1024/1024/sports/3/',
},
],
theme: 'dark',
type: 'standalone'
});
$(document).on('click','.pb-standalone-video',function () {
myPhotoBrowserVideo.open();
});
})
{% endhighlight %}