添加了jquery.masonry插件，修改缩略图列表样式
This commit is contained in:
Li Jianxuan
parent
2468842967
commit
c0f86e6012
|
|
@ -1679,7 +1679,7 @@ class DataController extends Zend_Controller_Action
|
|||
$sum=$row[0]['count'];
|
||||
$select=$this->db->select();
|
||||
$select->from('normalmetadata as m','m.*')
|
||||
->order('m.title desc')->limitPage($page,$this->limit);
|
||||
->order('m.title desc')->limitPage($page,9);
|
||||
$this->view->metadata = $this->db->fetchAll($select);
|
||||
$this->view->page=new Pagination($sum,$page,$this->limit);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,46 @@
|
|||
<?php
|
||||
$this->headTitle($this->config->title->site);
|
||||
$this->headTitle($this->config->title->data);
|
||||
$this->headTitle('缩略图浏览');
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$this->headLink()->appendStylesheet('/css/water.css');
|
||||
$this->breadcrumb('<a href="/">首页</a>');
|
||||
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
||||
$this->breadcrumb('缩略图浏览');
|
||||
$this->breadcrumb()->setSeparator(' > ');
|
||||
$this->headScript()->appendFile('/js/jquery-1.7.min.js');
|
||||
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
|
||||
$this->headLink()->appendStylesheet('/css/colorbox.css');
|
||||
?>
|
||||
|
||||
<?php echo $this->page->getNavigation(); ?>
|
||||
<hr />
|
||||
<div id="mdlist">
|
||||
<?php foreach($this->metadata as $md) : ?>
|
||||
<div class="thumb">
|
||||
|
||||
<div class="thumbtitle">
|
||||
<a href="/data/view/uuid/<?php echo $md['uuid'];?>"><?php echo $this->escape($md['title']); ?> </a>
|
||||
</div>
|
||||
<a class="colorbox" href="/service/bigthumb/id/<?php echo $md['id'];?>" title="<?php echo $this->escape($md['title']); ?>">
|
||||
<img src="/service/thumb/id/<?php echo $md['id'];?>" alt="<?php echo $this->escape($md['title']);?>" title="<?php echo mb_strlen($md['description'])>400?$this->escape(mb_substr($md['description'],0,400,'UTF-8').'...'):$this->escape($md['description']);?>" />
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<hr style="clear:left;"/>
|
||||
<?php echo $this->page->getNavigation(); ?>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function(){$(".colorbox").colorbox({rel:"colorbox",photo:"true",transition:"fade"});});
|
||||
<?php
|
||||
$this->headTitle($this->config->title->site);
|
||||
$this->headTitle($this->config->title->data);
|
||||
$this->headTitle('缩略图浏览');
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$this->headLink()->appendStylesheet('/css/water.css');
|
||||
$this->breadcrumb('<a href="/">首页</a>');
|
||||
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
||||
$this->breadcrumb('缩略图浏览');
|
||||
$this->breadcrumb()->setSeparator(' > ');
|
||||
$this->theme->AppendPlus($this,'masonry');
|
||||
?>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="row-fluit">
|
||||
<?php echo $this->page->getNavigation(); ?>
|
||||
<ul class="thumb unstyled" id="container">
|
||||
<?php foreach($this->metadata as $md) : ?>
|
||||
<li class="items">
|
||||
<h4><a href="/data/<?php echo $md['uuid'];?>"><?= $this->escape($md['title']);?></a></h4>
|
||||
<a href="/data/<?php echo $md['uuid'];?>" class="thumbnail">
|
||||
<img src="/service/thumb/id/<?php echo $md['id'];?>" alt="">
|
||||
</a>
|
||||
<div class="caption">
|
||||
<p>
|
||||
<?php echo mb_strlen($md['description'])>120?$this->escape(mb_substr($md['description'],0,120,'UTF-8').'...'):$this->escape($md['description']);?>
|
||||
</p>
|
||||
</div>
|
||||
<span class="pull-right"><a href="/data/<?php echo $md['uuid'];?>" class="btn"><i class="icon-zoom-in"></i>查看</a></span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php echo $this->page->getNavigation(); ?>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function(){
|
||||
$('#container').masonry({
|
||||
// options
|
||||
itemSelector : '.items',
|
||||
//columnWidth : 240
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -98,7 +98,13 @@ class Theme
|
|||
$this->CSSKey => array(
|
||||
'/js/lib/jquery.datatable/datatable.css'
|
||||
)
|
||||
),
|
||||
),
|
||||
|
||||
'masonry' => array(
|
||||
$this->ScriptKey => array(
|
||||
'/js/lib/jquery.masonry.min.js'
|
||||
),
|
||||
),
|
||||
|
||||
/*********谷歌地图*********/
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
/* used in water */
|
||||
.PageNavigation{padding-left:30px;}
|
||||
hr{border: none 0;border-bottom:1px dashed #ccc;height: 1px;width:100%;margin:0;padding:5px 0 5px 0;}
|
||||
li {white-space:nowrap;}
|
||||
#mdlist{}
|
||||
#mdlist span{width:80%;}
|
||||
#mdlist ol li{white-space:normal;}
|
||||
|
|
@ -30,7 +29,7 @@ ul{list-style-type: none;margin:2px 5px 2px 20px;}
|
|||
/* used in search*/
|
||||
.mditem{clear:left;text-indext:2em;padding:5px;}
|
||||
.mditem hr{clear:both;padding:0;}
|
||||
.thumb {float:left;padding-right:5px;height:220px;overflow:hidden;margin-left:5px;}
|
||||
/*.thumb {float:left;padding-right:5px;height:220px;overflow:hidden;margin-left:5px;}*/
|
||||
|
||||
#search{}
|
||||
.float{float:left;}
|
||||
|
|
@ -104,31 +103,16 @@ ol,ol li{list-style:decimal;margin-left:20px;}
|
|||
font-size:12px;font-weight:bold;color:#00A9FF;white-space: normal;}
|
||||
.singleline img{height:20px;vertical-align:middle;}
|
||||
|
||||
#tabs-controller {overflow:hidden;padding:5px 0;margin:5px 0px;}
|
||||
#tabs-controller ul li{float:left;padding:3px 10px;border:1px solid #93bee2;border-radius:5px;margin:0 5px;}
|
||||
#tabs-controller ul li:hover{background:#f1f8fe;}
|
||||
#tabs-controller ul li.active{background:#e8f4ff;}
|
||||
|
||||
.bigtitle{font-size:14px;font-weight:bold;line-height:24px;text-indent:14px;background:url(/images/arrow_red_10x10.gif) 0 center no-repeat;}
|
||||
.bigtitle a{color:#004411;}
|
||||
.box-shadow{
|
||||
box-shadow:2px 2px 2px #ccc;
|
||||
-webkit-box-shadow:2px 2px 2px #ccc;
|
||||
-moz-box-shadow:2px 2px 2px #ccc;
|
||||
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=125, Color='#cccccc');
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=125, Color='#cccccc')";
|
||||
}
|
||||
.text-shadow{
|
||||
text-shadow:#ccc 2px 2px 2px;
|
||||
}
|
||||
|
||||
#datalist{overflow:hidden;}
|
||||
#datalist h2{margin-left:20px;}
|
||||
#datalist ul li{margin:5px 0px;padding:5px 0px;background:#f6f6f6;border:1px solid #FFF;border-radius:3px;}
|
||||
#datalist ul li:hover,#datalist ul li:focus{border:1px solid #ccc;background:#fefefe;}
|
||||
#datalist ul li a{font-size:12px;}
|
||||
#datalist ul li a.title{font-size:14px;}
|
||||
#datalist ul li a.more{font-size:12px;}
|
||||
#datalist ul li p{text-indent:24px;font-size:12px;line-height:24px;}
|
||||
#datalist ul li p img {vertical-align:middle;}
|
||||
.search_form{margin-left:20px;float:none;}
|
||||
.row-fluit{overflow:hidden;}
|
||||
.thumb{overflow:hidden;}
|
||||
.thumb li {width:320px;float:left; margin:10px 20px; overflow:hidden;border: 1px solid #DDDDDD;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 4px;
|
||||
transition: all 0.2s ease-in-out 0s;}
|
||||
.thumb li .thumbnail{width:80%;height:220px; overflow:hidden;display:block; margin:5px auto;padding:2px;border:none;}
|
||||
.thumb li img{width:100%;}
|
||||
.thumb li h4{ position:relative;top:0;height:40px;}
|
||||
.thumb li p{word-break:break-all;word-wrap:break-word;}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue