Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is Form2Content template code that will generate an image gallery in your Joomla article based on the UIkit framework. It uses a Form2Content image gallery field with name IMAGE_GALLERY as input. See resulting gallery here: http://tweedehands-motorfiets.nl/motoren/harley-davidson-flhrci-road-king-classic
<div class="uk-panel uk-panel-box motor-slideshow" data-uk-slideshow="{ldelim}autoplay: true{rdelim}">
<ul class="slideshow uk-slideshow">
{foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE}
<li>
<a class="uk-overlay uk-overlay-hover" data-uk-lightbox="{ldelim}group:'motorfiets'{rdelim}" href="{$IMAGE_GALLERY_URL_RELATIVE}/{$IMAGE.FILENAME}">
<img src="{$IMAGE_GALLERY_URL_RELATIVE}/{$IMAGE.FILENAME}" />
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
</a>
</li>
{/foreach}
</ul>
<div class="slidenav uk-slidenav-position">
<a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-position-bottom uk-flex-center">
{foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE name=GALLERY}
<li data-uk-slideshow-item="{$smarty.foreach.GALLERY.index}"><a href="#"></a></li>
{/foreach}
</ul>
</div>
<ul class="thumbnav uk-thumbnav">
{foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE name=GALLERY}
<li class="uk-width-1-4" data-uk-slideshow-item="{$smarty.foreach.GALLERY.index}"><a href="#"><img src="{$IMAGE_GALLERY_URL_RELATIVE}/thumbs/{$IMAGE.FILENAME}" /></a></li>
{/foreach}
</ul>
</div>
<style type="text/css">
.motor-slideshow .slidenav .uk-slidenav {
width: 20px;
height: auto;
line-height: 1;
font-size: 30px;
display: block;
margin-top: -10px;
}
.motor-slideshow .slidenav.uk-slidenav-position .uk-slidenav-previous {
left: 10px;
}
.motor-slideshow .slidenav.uk-slidenav-position .uk-slidenav-next {
right: 10px;
}
.motor-slideshow [class*="uk-position-bottom"] {
position: relative !important;
}
.motor-slideshow .uk-dotnav {
margin-top: 0;
margin-bottom: 0;
}
.motor-slideshow .uk-overlay-icon::before {
content: "\f002";
font-family: "FontAwesome";
}
.motor-slideshow .thumbnav {
margin-top: 0;
}
.motor-slideshow .uk-thumbnav > * > * {
background: transparent;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.