• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: Gallery vraag
PostPosted: Thu Mar 08, 2018 8:27 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
Op de homepage van http://www.uisge-beatha.eu valt me op dat er in het a-element een class "floatbox" wordt toegevoegd die wel op de front end te zien is, maar niet in de source code.

De code van de gallery-template
Code:
{$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">&nbsp;</div>
</div>
{/if}


Ter illustratie een snap shot van de code in de FireFox debugger en een deel van de pagina code:
Code:
<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>

Iemand die me wil uitleggen hoe dit kan? Het leidt er o.a. dat er een window wordt geopend nadat op de foto is geklikt dat niet geopend hoeft te worden.

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 :)


Attachments:
Schermafbeelding 2018-03-08 om 09.12.05.png
Schermafbeelding 2018-03-08 om 09.12.05.png [ 366.02 KiB | Viewed 354 times ]
Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery vraag
PostPosted: Thu Mar 15, 2018 1:13 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
Iemand die weet hoe de width en height die in de gallery template staan, weg kan laten? Zou de styling aan de cell willen overlaten waarin de foto wordt geplaatst.
Quote:
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery vraag
PostPosted: Thu Mar 15, 2018 10:57 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7561
Location: The Netherlands
Javascript zet die parameters er in, denk nietje dat zomaar kunt veranderen zonder de bron aan te passen. Je zou kunnen kijken of er parameters zijn die je kunt gebruiken om de output aan te passen...

Zelf gebruik ik http://dev.cmsmadesimple.org/project/fi ... ckage-1341
Demo op m’n persoonlijke site.

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery vraag
PostPosted: Tue Mar 27, 2018 6:40 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
Het bleek eenvoudiger dan gedacht om height en width van de foto aanpassen.
Code:
.carousel img {
   height: auto;
   width: 100%;
   float: left;
   margin: 0px;
   text-align: center;
}

/* flickity on by default */
.carousel:after {
  content: 'flickity';
  display: none;
}

@media screen and ( max-width: 768px ) {
.carousel .flickity-prev-next-button {
    height: 30px;
    width: 30px;
    }
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting