switch from slides js to carousel

This commit is contained in:
wlx 2013-04-09 14:20:02 +00:00
parent e455c47efd
commit c2f01637da
1 changed files with 25 additions and 15 deletions

View File

@ -2,7 +2,7 @@
$this->headTitle($this->config->title->site); $this->headTitle($this->config->title->site);
$this->headTitle('首页'); $this->headTitle('首页');
$this->headTitle()->setSeparator(' - '); $this->headTitle()->setSeparator(' - ');
$this->theme->AppendPlus($this,'slides'); //$this->theme->AppendPlus($this,'slides');
$auth = Zend_Auth::getInstance(); $auth = Zend_Auth::getInstance();
$this->headLink()->appendStylesheet('/css/index.css'); $this->headLink()->appendStylesheet('/css/index.css');
?> ?>
@ -17,19 +17,29 @@
</ul> </ul>
</div> </div>
<div class="span7"> <div class="span7">
<div id="slides"> <div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php <?php
foreach($this->news as $k=>$v) foreach($this->news as $k=>$v)
{ {
echo '<div class="slide">'. echo '<li data-target="#myCarousel" data-slide-to="$k"'.($k==0?' class="active"':'').'></li>';
'<div class="thumb"><a href="'.$v['url'].'" title="'.$v['description'].'" ><img src="'.$v['image'].'" class="img-rounded" /></a></div>'.
'<div class="content">'.
'<div class="description"><h5><a href="'.$v['url'].'" style="color:#FFF;">'.$v['title'].'</a><span class="pull-right">['.date("Y-m-d",strtotime($v['ts_published'])).']</span></h5>'.
'</div>'.
'</div>'.
'</div>';
} }
?> ?>
</ol>
<div class="carousel-inner">
<?php
foreach($this->news as $k=>$v)
{
echo '<div class="item'.($k==0?' active':'').'">';
echo '<a href="'.$v['url'].'" title="'.$v['description'].'" ><img src="'.$v['image'].'" class="img-rounded" /></a>';
echo '<div class="carousel-caption">';
echo '<h4><a href="'.$v['url'].'">'.$v['title'].'</a><span class="pull-right">['.date("Y-m-d",strtotime($v['ts_published'])).']</span></h4>';
echo '<p>'.$v['description'].'</p></div></div>';
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div> </div>
</div> </div>
</div> </div>