You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
5.9 KiB
147 lines
5.9 KiB
<?php |
|
/** |
|
* 自定义图片分类的样式 |
|
*/ |
|
|
|
if (!defined('__TYPECHO_ROOT_DIR__')) exit; |
|
$this->need('component/header.php'); |
|
?> |
|
|
|
<!-- aside --> |
|
<?php $this->need('component/aside.php'); ?> |
|
<!-- / aside --> |
|
|
|
<!-- <div id="content" class="app-content"> --> |
|
<a class="off-screen-toggle hide"></a> |
|
<main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>"> |
|
<div class="hbox hbox-auto-xs hbox-auto-sm"> |
|
<div class="col center-part"> |
|
<?php if($this->options->blogNotice): ?> |
|
<!--公告位置--> |
|
<div class="alert alert-warning alert-block" style=" |
|
margin-bottom: 0px;"> |
|
<button type="button" class="close" data-dismiss="alert">×</button><p><i class="fontello fontello-volume-up" aria-hidden="true"></i> |
|
<?php $this->options->blogNotice(); ?></p> |
|
</div> |
|
<!--/公告位置--> |
|
<?php endif; ?> |
|
<header class="bg-light lter b-b wrapper-md"> |
|
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->archiveTitle(array( |
|
'category' => _mt('%s'), |
|
), '', ''); ?></h1> |
|
<small class="text-muted letterspacing indexWords"><?php echo $this->getDescription(); ?></small> |
|
</header> |
|
<div class="wrapper-md" id="post-panel"> |
|
<!--首页输出相册--> |
|
<div class="layout"> |
|
<div class="albums"> |
|
<?php |
|
$index = 0; |
|
while ($this->next()){ |
|
$cover = Content::returnHeaderImgSrc($this,"index",$index,true); |
|
$title = $this->title; |
|
$url = $this->permalink; |
|
$isLock = ""; |
|
$imgHtml = Utils::returnImageLazyLoadHtml($cover,300,300); |
|
if ($this->hidden == 1){ |
|
$isLock = " image-lock"; |
|
} |
|
echo <<<EOF |
|
<figure class="album-thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"> |
|
|
|
<a href="{$url}" class="img-wrap{$isLock}"> |
|
|
|
<img alt="{$title}" {$imgHtml} itemprop="thumbnail"> |
|
</a> |
|
<figcaption itemprop="caption description">{$title}</figcaption> |
|
</figure> |
|
EOF; |
|
$index++; |
|
} |
|
?> |
|
</div> |
|
</div> |
|
<!--分页首页按钮--> |
|
<nav class="text-center m-t-lg m-b-lg image_nav" role="navigation" style="display: none"> |
|
<?php $this->pageNav('<i class="fontello fontello-chevron-left"></i>', '<i class="fontello fontello-chevron-right"></i>'); ?> |
|
</nav> |
|
<nav class="text-center m-t-lg m-b-lg"> |
|
<button class="btn m-b-xs btn-sm btn-dark btn-addon view-more-button"><?php _me("加载更多") ?></button> |
|
</nav> |
|
<nav class="text-center m-t-lg m-b-lg page-load-status"> |
|
<!--<button class="btn m-b-xs btn-sm btn-dark btn-addon infinite-scroll-request"><i class="animate-spin fontello fontello-refresh"></i><?php /*_me("正在加载……") */?></button>--> |
|
<p class="infinite-scroll-request"><i class="animate-spin fontello fontello-refresh"></i>Loading...</p> |
|
|
|
<p class="infinite-scroll-last"><?php _me("已经到底了") ?></p> |
|
<p class="infinite-scroll-error"><?php _me("加载错误,请稍后重试") ?></p> |
|
</nav> |
|
<style> |
|
.page-navigator>li>a, .page-navigator>li>span{ |
|
line-height: 1.42857143; |
|
padding: 6px 12px; |
|
} |
|
</style> |
|
</div> |
|
</div> |
|
<!--首页右侧栏--> |
|
<?php $this->need('component/sidebar.php') ?> |
|
</div> |
|
</main> |
|
|
|
|
|
<script> |
|
if ($('.next a').length > 0){ |
|
$.getScript("<?php echo STATIC_PATH ?>js/features/infinite-scroll.pkgd.min.js", function() { |
|
var $container = $('.albums').infiniteScroll({ |
|
// options |
|
path: '.next a', |
|
append: '.album-thumb', |
|
history: false, |
|
button: '.view-more-button', |
|
status: '.page-load-status', |
|
hideNav: '.image_nav' |
|
|
|
}); |
|
var $viewMoreButton = $('.view-more-button'); |
|
//$viewMoreButton.click(); |
|
$viewMoreButton.on( 'click', function() { |
|
$container.infiniteScroll('loadNextPage'); |
|
$container.infiniteScroll( 'option', { |
|
loadOnScroll: true, |
|
}); |
|
$viewMoreButton.hide(); |
|
}); |
|
|
|
$container.on( 'append.infiniteScroll', function( event, response, path, items ) { |
|
<?php if (in_array('isPageAnimate',$this->options->featuresetup)): ?> |
|
$('.app-content-body').animateCss('fadeInUpBig', function() { |
|
$("img").lazyload({ |
|
effect: "fadeIn", |
|
threshold: "200" |
|
}); |
|
|
|
$(".lazy").lazyload({ |
|
effect: "fadeIn", |
|
threshold: "200" |
|
}); |
|
}); |
|
<?php else: ?> |
|
$("img").lazyload({ |
|
effect: "fadeIn", |
|
threshold: "200" |
|
}); |
|
$(".lazy").lazyload({ |
|
effect: "fadeIn", |
|
threshold: "200" |
|
}); |
|
<?php endif; ?> |
|
}); |
|
}); |
|
}else { |
|
$('.view-more-button').hide(); |
|
} |
|
</script> |
|
|
|
<!-- footer --> |
|
<?php $this->need('component/footer.php'); ?> |
|
<!-- / footer -->
|
|
|