[1071]XOOPS模組開發
<style>
img.cover {
width: 100%;
height: 200px;
object-fit: cover;
}
.slide-img {
width: 100%;
object-fit: cover;
}
.carousel-caption{
background-color: rgba(0,0,0,0.5);
}
#carousel-example-generic{
position:relative;
top: -22px;
}
</style>
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<{foreach from=$all_focus key=i item=focus}>
<div class="item <{if $i==0}>active<{/if}>">
<a href="index.php?sn=<{$focus.sn}>">
<img src="<{$focus.cover}>" alt="<{$focus.title}>" class="slide-img">
</a>
<div class="carousel-caption">
<h2><{$focus.title}></h2>
<{$focus.content}>
</div>
</div>
<{/foreach}>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<h2>文章列表</h2>
<div class="row">
<{foreach from=$all key=i item=snews}>
<div class="col-sm-4">
<a href="index.php?sn=<{$snews.sn}>">
<{if $snews.cover}>
<img src="<{$snews.cover}>" alt="<{$snews.title}>" class="cover">
<{else}>
<img src="https://picsum.photos/400/200?image=<{$i}>" alt="<{$snews.title}>" class="cover">
<{/if}>
</a>
<{$snews.title}>
</div>
<{foreachelse}>
<div class="alert alert-danger">
尚無內容
</div>
<{/foreach}>
</div>
<{$bar}>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".slide-img").css('height', $(window).height()-$('.navbar').height());
});
$(window).resize(function () {
$(".slide-img").css('height', $(window).height()-$('.navbar').height());
});
</script>