zoomla
Version:
16年专业研发|中文alexa排名第一的CMS品牌-基于dotNET core、功能强大，集成站群、微信开发、小程序与ERP及OA办公系统，支持国际语言和多民族语言，世界五百强与大型门户专用高端网站内核CMS系统
392 lines (386 loc) • 18.5 kB
HTML
{ZL.Source id="图库模型数据源标签"/}
<html>
<head>
<meta charset="utf-8">
<title>{SField sid="图库模型数据源标签" FD="Title" page="0"/}_{$SiteName/}</title>
<meta name="Keywords" content="{SField sid="图库模型数据源标签" FD="Tagkey" page="0"/}">
{ZL:Boot4()/}
<link href="{$CssDir/}global.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet"/>
<script src="/js/scrolltopcontrol.js" type="text/javascript"></script>
<script src="/JS/Controls/B_User.js"></script>
<script src="{$CssDir/}js/server.js"></script>
<style>
body{overflow:hidden;margin:0;padding:0;background-color:#fcfcfc}
.magazine-viewport .container{position:absolute;top:50%;left:50%;margin:auto;width:922px;height:600px}
.magazine-viewport .magazine{top:-300px;left:-461px;width:922px;height:600px}
.magazine-viewport .page{width:461px;height:600px;background-color:#fff;background-size:100% 100%;background-repeat:no-repeat}
.magazine-viewport .zoomer .region{display:none}
.magazine .region{position:absolute;overflow:hidden;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:#06F;opacity:.2;cursor:pointer;-ms-border-radius:10px;-o-border-radius:10px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
.magazine .region:hover{opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50)}
.magazine .region.zoom{opacity:.01;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter:alpha(opacity=1)}
.magazine .region.zoom:hover{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
.magazine .page{-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);-moz-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-ms-box-shadow:0 0 20px rgba(0,0,0,.2);-o-box-shadow:0 0 20px rgba(0,0,0,.2)}
.magazine-viewport .page img{margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.magazine .even .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,left top,right top,color-stop(.95,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-moz-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-ms-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%);background-image:linear-gradient(left,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%)}
.magazine .odd .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,right top,left top,color-stop(.95,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-moz-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-ms-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:-o-linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%);background-image:linear-gradient(right,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%)}
.magazine-viewport .zoom-in .even .gradient,.magazine-viewport .zoom-in .odd .gradient{display:none}
.magazine-viewport .loader{position:absolute;top:280px;left:219px;width:22px;height:22px;background-image:url({$CssDir/}images/loader.gif)}
.magazine-viewport .shadow{-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;-webkit-transition:-webkit-box-shadow .5s;-moz-transition:-moz-box-shadow .5s;-o-transition:-webkit-box-shadow .5s;-ms-transition:-ms-box-shadow .5s;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc}
.magazine-viewport .next-button,.magazine-viewport .previous-button{position:absolute;top:0;width:22px;height:600px}
.magazine-viewport .next-button{right:-22px;-webkit-border-radius:0 15px 15px 0;-moz-border-radius:0 15px 15px 0;border-radius:0 15px 15px 0;-ms-border-radius:0 15px 15px 0;-o-border-radius:0 15px 15px 0}
.magazine-viewport .previous-button{left:-22px;-webkit-border-radius:15px 0 0 15px;-moz-border-radius:15px 0 0 15px;border-radius:15px 0 0 15px;-ms-border-radius:15px 0 0 15px;-o-border-radius:15px 0 0 15px}
.magazine-viewport .next-button-hover,.magazine-viewport .previous-button-hover{background-color:rgba(0,0,0,.2)}
.magazine-viewport .previous-button-down,.magazine-viewport .previous-button-hover{background-image:url({$CssDir/}images/arrows.png);background-position:-4px 284px;background-repeat:no-repeat}
.magazine-viewport .next-button-down,.magazine-viewport .previous-button-down{background-color:rgba(0,0,0,.4)}
.magazine-viewport .next-button-down,.magazine-viewport .next-button-hover{background-image:url({$CssDir/}images/arrows.png);background-position:-38px 284px;background-repeat:no-repeat}
.magazine-viewport .zoom-in .next-button,.magazine-viewport .zoom-in .previous-button{display:none}
.animated{-webkit-transition:margin-left .5s;-moz-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s;-ms-transition:margin-left .5s}
.thumbnails{position:absolute;bottom:0;left:0;z-index:1;width:100%;height:140px}
.thumbnails>div{margin:20px auto;width:1050px;height:100px}
.thumbnails ul{margin:0;padding:0;text-align:center;-webkit-transition:-webkit-transform ease-in-out .1s;-moz-transition:-moz-transform ease-in-out .1s;-o-transition:-o-transform ease-in-out .1s;transition:transform ease-in-out .1s;-webkit-transform:scale3d(.5,.5,1);-moz-transform:scale3d(.5,.5,1);-o-transform:scale3d(.5,.5,1);transform:scale3d(.5,.5,1);-ms-transform:scale3d(.5,.5,1);-ms-transition:-ms-transform ease-in-out .1s}
.thumbanils-touch ul{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none;-ms-transform:none}
.thumbnails-hover ul{-webkit-transform:scale3d(.6,.6,1);-moz-transform:scale3d(.6,.6,1);-o-transform:scale3d(.6,.6,1);transform:scale3d(.6,.6,1);-ms-transform:scale3d(.6,.6,1)}
.thumbnails li{display:inline-block;margin:0 5px;-webkit-box-shadow:0 0 10px #ccc;-moz-box-shadow:0 0 10px #ccc;box-shadow:0 0 10px #ccc;list-style:none;-webkit-transition:-webkit-transform 60ms;-moz-transition:-webkit-transform 60ms;-o-transition:-webkit-transform 60ms;transition:-webkit-transform 60ms;-ms-box-shadow:0 0 10px #ccc;-o-box-shadow:0 0 10px #ccc;-ms-transition:-webkit-transform 60ms}
.thumbnails li span{display:none}
.thumbnails .current{-webkit-box-shadow:0 0 10px red;-moz-box-shadow:0 0 10px red;box-shadow:0 0 10px red;-ms-box-shadow:0 0 10px red;-o-box-shadow:0 0 10px red}
.thumbnails .thumb-hover{-webkit-box-shadow:0 0 10px #666;-moz-box-shadow:0 0 10px #666;box-shadow:0 0 10px #666;-webkit-transform:scale3d(1.3,1.3,1);-moz-transform:scale3d(1.3,1.3,1);-o-transform:scale3d(1.3,1.3,1);transform:scale3d(1.3,1.3,1);-ms-transform:scale3d(1.3,1.3,1);-ms-box-shadow:0 0 10px #666;-o-box-shadow:0 0 10px #666}
.thumbanils-touch .thumb-hover{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none;-ms-transform:none}
.thumbnails .thumb-hover span{position:absolute;bottom:-30px;left:0;z-index:2;display:block;width:100%;height:30px;color:#666;font:700 15px arial;line-height:30px;cursor:default}
.thumbnails img{float:left}
.exit-message{position:absolute;top:10px;left:0;z-index:10000;width:100%;height:40px}
.exit-message>div{margin:auto;width:140px;height:30px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:rgba(0,0,0,.5);color:#fff;text-align:center;font:12px arial;line-height:30px;-ms-border-radius:10px;-o-border-radius:10px}
.zoom-icon{position:absolute;top:10px;right:10px;z-index:1000;width:22px;height:22px;background-image:url({$CssDir/}images/zoom-icons.png);background-size:88px 22px}
.zoom-icon-in{background-position:0 0;cursor:pointer}
.zoom-icon-in.zoom-icon-in-hover{background-position:-22px 0;cursor:pointer}
.zoom-icon-out{background-position:-44px 0}
.zoom-icon-out.zoom-icon-out-hover{background-position:-66px 0;cursor:pointer}
.bottom{position:absolute;bottom:0;left:0;width:100%}
</style>
</head>
<body>
<div id="canvas">
<div class="zoom-icon zoom-icon-in"></div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button -->
<div ignore="1" class="next-button"></div>
<!-- Previous button -->
<div ignore="1" class="previous-button"></div>
</div>
</div>
</div>
<!-- Thumbnails -->
<div class="thumbnails">
<div>
<ul></ul>
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/JS/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="{$CssDir/}js/modernizr.2.5.3.min.js"></script>
<script>
(function() {
'use strict';
var hashes = {},
regexp = {},
history = [],
freq = 100,
num = 0,
pushState = false,
timer = null,
currentUrl = null,
freeze = function(obj) {
if (Object.freeze) return Object.freeze(obj);
return obj
},
getHashParts = function() {
return window.location.href.split('#')
},
startTimer = function() {
if (!timer) timer = setInterval(function() {
if (num > 0 && currentUrl != window.location.href) {
currentUrl = window.location.href;
window.Hash.check()
}
}, freq)
},
stopTimer = function() {
if (timer) {
clearInterval(timer);
timer = null
}
};
window.Hash = freeze({
pushState: function(yes) {
if (window.history && window.history.pushState) pushState = yes;
return this
},
fragment: function() {
var hash = getHashParts();
return (pushState) ? window.location.pathname + ((hash[1]) ? '#' + hash[1] : '') : hash[1] || ''
},
get: function(path, params) {
var p, fragment = '',
parameters = [];
for (p in params) {
if (!Object.prototype.hasOwnProperty(p)) continue;
parameters.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]))
}
if (parameters.length > 0) parameters = '?' + parameters.join('&');
return (pushState) ? path + parameters : getHashParts()[0] + '#' + path + parameters
},
go: function(hash, params) {
if (this.fragment() != hash) {
var to = this.get(hash, params);
if (pushState) window.history.pushState(null, document.title, to);
else window.location.href = to
}
return this
},
update: function() {
currentUrl = window.location.href;
return this
},
on: function(hash, callback, title) {
if (!hashes[hash]) hashes[hash] = {
title: title,
listeners: []
};
hashes[hash].listeners.push(callback);
num++;
startTimer();
return this
},
check: function() {
var i, hash, parts, fragment = this.fragment();
for (hash in hashes) {
if (!Object.prototype.hasOwnProperty.call(hashes, hash)) continue;
hashes[hash].regexp = hashes[hash].regexp || new RegExp(hash);
if ((parts = hashes[hash].regexp.exec(fragment))) {
if (hashes[hash].title) document.title = hashes[hash].title;
for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].yep) hashes[hash].listeners[i].yep(fragment, parts)
} else {
for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].nop) hashes[hash].listeners[i].nop(fragment)
}
}
return this
}
})
})();
var pics='{SField sid="图库模型数据源标签" FD="PhotoUrl" page="0"/}';
if(pics!=""){
pics=JSON.parse(pics);
var str="";
for(var i=0;i<pics.length;i++){
if(i==0||i==(pics.length-1)){
str+='<li class="i"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><span>'+(i+1)+'</span></li>';
}
else if(i%2!=0){
if(i<(pics.length-1)){
str+='<li class="d"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><img src="{$UploadDir/}'+pics[i+1].url+'" alt="'+pics[i+1].desc+'" width="76" height="100" class="page-'+(i+2)+'" /><span>'+(i+1)+'-'+(i+2)+'</span></li>';
}
else{
str+='<li class="i"><img src="{$UploadDir/}'+pics[i].url+'" alt="'+pics[i].desc+'" width="76" height="100" class="page-'+(i+1)+'" /><span>'+(i+1)+'</span></li>';
}
}
}
$(".thumbnails ul").html(str);
yepnope({
test: Modernizr.csstransforms,
yep: ['{$CssDir/}js/turn.min.js'],
nope: ['{$CssDir/}js/turn.html4.min.js'],
both: ['{$CssDir/}js/zoom.min.js', '{$CssDir/}js/magazine.js'],
complete: loadApp
});
}
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
if (flipbook.width() == 0 || flipbook.height() == 0) {
setTimeout(loadApp, 10);
return
}
flipbook.turn({
width: 922,
height: 600,
duration: 1000,
acceleration: !isChrome(),
gradients: true,
autoCenter: true,
elevation: 50,
pages: pics.length,
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
Hash.go('page/' + page).update();
disableControls(page);
$('.thumbnails .page-' + currentPage).parent().removeClass('current');
$('.thumbnails .page-' + page).parent().addClass('current')
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
if (page == 1) {
$(this).turn('peel', 'br')
}
},
missing: function(event, pages) {
for (var i = 0; i < pages.length; i++) addPage(pages[i], $(this))
}
}
});
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function() {
return largeMagazineWidth() / $('.magazine').width()
},
when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next')
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous')
},
resize: function(event, scale, page, pageElement) {
if (scale == 1) loadSmallPage(page, pageElement);
else loadLargePage(page, pageElement)
},
zoomIn: function() {
$('.thumbnails').hide();
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {
'class': 'exit-message'
}).html('<div>Press ESC to exit</div>').appendTo($('body')).delay(2000).animate({
opacity: 0
}, 500, function() {
$(this).remove()
})
}
},
zoomOut: function() {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function() {
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport()
}, 0)
}
}
});
if ($.isTouch) $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
else $('.magazine-viewport').bind('zoom.tap', zoomTo);
$(document).keydown(function(e) {
var previous = 37,
next = 39,
esc = 27;
switch (e.keyCode) {
case previous:
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break
}
});
Hash.on('^page\/([0-9]*)$', {
yep: function(path, parts) {
var page = parts[1];
if (page !== undefined) {
if ($('.magazine').turn('is')) $('.magazine').turn('page', page)
}
},
nop: function(path) {
if ($('.magazine').turn('is')) $('.magazine').turn('page', 1)
}
});
$(window).resize(function() {
resizeViewport()
}).bind('orientationchange', function() {
resizeViewport()
});
$('.thumbnails').click(function(event) {
var page;
if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
$('.magazine').turn('page', page[1])
}
});
$('.thumbnails li').bind($.mouseEvents.over, function() {
$(this).addClass('thumb-hover')
}).bind($.mouseEvents.out, function() {
$(this).removeClass('thumb-hover')
});
if ($.isTouch) {
$('.thumbnails').addClass('thumbanils-touch').bind($.mouseEvents.move, function(event) {
event.preventDefault()
})
} else {
$('.thumbnails ul').mouseover(function() {
$('.thumbnails').addClass('thumbnails-hover')
}).mousedown(function() {
return false
}).mouseout(function() {
$('.thumbnails').removeClass('thumbnails-hover')
})
}
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick)
} else {
$('.magazine').click(regionClick)
}
$('.next-button').bind($.mouseEvents.over, function() {
$(this).addClass('next-button-hover')
}).bind($.mouseEvents.out, function() {
$(this).removeClass('next-button-hover')
}).bind($.mouseEvents.down, function() {
$(this).addClass('next-button-down')
}).bind($.mouseEvents.up, function() {
$(this).removeClass('next-button-down')
}).click(function() {
$('.magazine').turn('next')
});
$('.previous-button').bind($.mouseEvents.over, function() {
$(this).addClass('previous-button-hover')
}).bind($.mouseEvents.out, function() {
$(this).removeClass('previous-button-hover')
}).bind($.mouseEvents.down, function() {
$(this).addClass('previous-button-down')
}).bind($.mouseEvents.up, function() {
$(this).removeClass('previous-button-down')
}).click(function() {
$('.magazine').turn('previous')
});
resizeViewport();
$('.magazine').addClass('animated')
}
$('.zoom-icon').bind('mouseover', function() {
if ($(this).hasClass('zoom-icon-in')) $(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out')) $(this).addClass('zoom-icon-out-hover')
}).bind('mouseout', function() {
if ($(this).hasClass('zoom-icon-in')) $(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out')) $(this).removeClass('zoom-icon-out-hover')
}).bind('click', function() {
if ($(this).hasClass('zoom-icon-in')) $('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out')) $('.magazine-viewport').zoom('zoomOut')
});
$('#canvas').hide();
</script>
</body>
</html>