De code van de gallery-template
Code: Select all
{$canonical_url = "{$content_obj->GetURL()|lower|default:''}" scope=global}
{if $page_alias == 'test' || 'thuishaven' || 'test-2'}
{literal}
<div class="main-carousel" data-flickity='{"freeScroll": true, "wrapAround": true, "cellAlign": "left", "contain": true, "imagesLoaded": true}'>
{/literal}
{foreach from=$images item=image}
<div class="carousel-cell">
{if $image->isdir}
<a href="{root_url}/{$image->file}" title="{$image->titlename|substr:0:-4}">{CGSmartImage src="{root_url}/{$image->thumb}" noresponsive=1 alt="{$image->titlename|substr:0:-4}"} /></a><br />
{$image->titlename}
{else}
<a id="tmp-{$galleryid}" data-rel="gallery-{$galleryid}" title="{$image->titlename|substr:0:-4}" href="{CGSmartImage src="{root_url}/{$image->file|cms_escape:'urlpathinfo'}" noresponsive=1 alt="{$image->titlename|substr:0:-4}" notag=1 noembed=1}">{CGSmartImage src="{root_url}/{$image->thumb|cms_escape:'urlpathinfo'}" noresponsive=1 alt="{$image->titlename|substr:0:-4}"} </a>
<div class="image-overlay" style="display: inline-block;"> {* was class with no style-element *}
<span class="overlay-icon"><i class="icon-search"></i>
<h4>{$image->titlename|substr:0:-4}</h4>
</span>
</div>
{/if}
</div>
{/foreach}
<div class="galleryclear"> </div>
</div>
{/if}
Code: Select all
<br/></div></div></div><div class="row"><div class="col-sm-12"><div class="parent-container">
<div class="main-carousel" data-flickity='{"freeScroll": true, "wrapAround": true, "cellAlign": "left", "contain": true, "imagesLoaded": true}'>
<div class="carousel-cell">
<a id="tmp-5515" data-rel="gallery-5515" title="Coolant drainage-01" href="https://www.uisge-beatha.eu/uploads/images/Gallery/Winter1718/Boiler/Coolant drainage-01.jpg"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBl....... width="334" height="250" alt="Coolant drainage-01"/> </a>
<div class="image-overlay" style="display: inline-block;">
<span class="overlay-icon"><i class="icon-search"></i>
<h4>Coolant drainage-01</h4>
</span>
</div>
</div>
<div class="carousel-cell">
<a id="tmp-5515" data-rel="gallery-5515" title="Coolant drainage-02" href="https://www.uisge-beatha.eu/uploads/images/Gallery/Winter1718/Boiler/Coolant drainage-02.jpg"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVR...... width="334" height="250" alt="Coolant drainage-02"/> </a>
<div class="image-overlay" style="display: inline-block;">
<span class="overlay-icon"><i class="icon-search"></i>
<h4>Coolant drainage-02</h4>
</span>
</div>
</div>
<div class="carousel-cell">
<a id="tmp-5515" data-rel="gallery-5515" title="Coolant drainage-03" href="https://www.uisge-beatha.eu/uploads/images/Gallery/Winter1718/Boiler/Coolant drainage-03.jpg"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//........ width="334" height="250" alt="Coolant drainage-03"/> </a>
<div class="image-overlay" style="display: inline-block;">
<span class="overlay-icon"><i class="icon-search"></i>
<h4>Coolant drainage-03</h4>
</span>
</div>
</div>
Een tweede vraag, aan de img wordt een 'height' en 'width' toegevoegd waardoor op een mobile device de afbeelding heel uitgerekt komt te staan. Wat kan ik doen om die twee parameters te beïnvloeden?
Wederom dank