Portfolio widget - CSS update
This commit is contained in:
parent
a23f8b6231
commit
a3fc9e3742
@ -1,3 +1,39 @@
|
||||
{{if isset($mode) && $mode == 'orbit'}}
|
||||
<div class="row">
|
||||
<div class="orbit small-12 medium-9 large-9 columns" id="photo-album-contents-{{$album_id}}" role="region" aria-label="portfolioOrbit-{{$album_id}}" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
|
||||
|
||||
<ul class="orbit-container">
|
||||
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
|
||||
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
|
||||
{{foreach $photos as $photo}}
|
||||
{{include file="photo_portfolio_orbit.tpl"}}
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
<nav class="orbit-bullets">
|
||||
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
|
||||
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
|
||||
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
|
||||
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
|
||||
</nav>
|
||||
<div id="page-end"></div>
|
||||
</div>
|
||||
<div class="photos-end"></div>
|
||||
<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
|
||||
<div id="page-spinner"></div>
|
||||
</div>
|
||||
{{elseif isset($mode) && $mode =='card'}}
|
||||
<div class="row">
|
||||
<div class="small-12 medium-9 large-9 columns" id="photo-album-contents-{{$album_id}}">
|
||||
{{foreach $photos as $photo}}
|
||||
{{include file="photo_portfolio_card.tpl"}}
|
||||
{{/foreach}}
|
||||
<div id="page-end"></div>
|
||||
</div>
|
||||
<div class="photos-end"></div>
|
||||
<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
|
||||
<div id="page-spinner"></div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="row column">
|
||||
<div id="photo-album-contents-{{$album_id}}">
|
||||
{{foreach $photos as $photo}}
|
||||
@ -8,4 +44,6 @@
|
||||
<div class="photos-end"></div>
|
||||
<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
|
||||
<div id="page-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
6
view/tpl/photo_portfolio_card.tpl
Normal file
6
view/tpl/photo_portfolio_card.tpl
Normal file
@ -0,0 +1,6 @@
|
||||
<div class="card" style="width: 300px;box-shadow: 0px 10px 6px -6px rgba(119,119,119,0.6);border-style: solid;border-width: 1px;border=color: rgba(230,230,230,0.6);margin:10px 5px 10px 5px;">
|
||||
<img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.desc}}" id="photo-top-photo-{{$photo.resource_id}}">
|
||||
<div class="card-divider">
|
||||
<h4>{{$photo.desc}}</h4>
|
||||
</div>
|
||||
</div>
|
5
view/tpl/photo_portfolio_orbit.tpl
Normal file
5
view/tpl/photo_portfolio_orbit.tpl
Normal file
@ -0,0 +1,5 @@
|
||||
|
||||
<li class="orbit-slide">
|
||||
<img class="orbit-image" src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.desc}}" id="photo-top-photo-{{$photo.resource_id}}o">
|
||||
<figcaption class="orbit-caption">{{$photo.desc}}</figcaption>
|
||||
</li>
|
Reference in New Issue
Block a user