• 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  [ 22 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Gallery en cycle maar dan responsive
PostPosted: Tue May 07, 2019 9:44 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Hallo,

hoe krijg ik de gallery met cycle reponsive?

ik probeerde met % opgave bij de breedte maar dat gaat fout, ook met "skaleren" maar geen effekt.

Momenteel bouw ik een site om van de 1 serie naar 2.2.10 en maak die dan met W3.CSS responsive.

Iedere hint is welkom.

mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Wed May 08, 2019 3:47 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Heb je het over jquery cycle?

Er zijn verschillende manieren (JavaScript libs) om een "cycle" of image "carousel" te maken.

Niet alle cycle libs werken responsive.

Er zijn er een aantal (zoals jquery cycle 1) die de breedte van een afbeelding brekenen bij het intialiseren "$(document).ready". Schaal je de breedte van het browserscherm dan blijft de ge-initialiseerde breedte gehandhaafd tenzij je een her-initialisatie doet.

De nieuwere "cycle" of image "carousel" oplossingen kunnen over het algemeen goed met responsive en het schalen van browserschermen omgaan.

Bijvoorbeeld:
http://jquery.malsup.com/cycle2/
https://owlcarousel2.github.io/OwlCarousel2/
https://kenwheeler.github.io/slick/

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Wed May 08, 2019 4:48 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Bedankt Arnoud,

ik probeer dat met cycle2.

Dat had ik gelezen maar niet gerealiseerd dat het JQuery is.

Mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Wed May 08, 2019 5:18 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1836
Location: The Netherlands
Op deze pagina staat e.e.a. uitgelegd http://jquery.malsup.com/cycle2/demo/basic.php


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Wed May 08, 2019 9:07 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Hoi,

wil nog niet echt lukken.

cycle heb ik naar cycle2 gekopieerd,
de javascriptfile gewisseld, de verwijzing in de module veranderd.

Op verschillende plaatsen heb ik
width: 90%;
max-width: 680px;
gegeven maar geen resultaat.

Boven in de module kan ik alleen een breedt en hoogte aangeven, % gaat daar niet in en laat ik het leeg krijg ik thumbnails.

Ik moet wat over het hoofd zien, maar wat?

GEVONDEN
Ik heb thumb in file veranderd

Code:
<img src="{$image->file}" alt="{$image->titlename}" style="width:90%;max-width:680px;"/>

Mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Thu May 09, 2019 6:50 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Styling (CSS) houdt je meestal gescheiden van je Smarty template.

Met responsive design is het idee dat je de grootste Gallery afbeelding terug schaalt naar het maximaal weer tegeven formaat in de browser. Voor het schalen van afbeeldingen kan CGSmartImage gebruikt worden.

CGSmartImage voorbeeld met Gallery $image->file:

Code:
{capture assign='img_extralarge'}{CGSmartImage src=$image->file noembed='1' class=$_dimension force_ext='1' filter_resizetofit='1024,768,transparent' notag='1'}{/capture}


In je CSS schaal je de afbeelding dan naar 100%;

Bijvoorbeeld:

Code:
.slider img {
width: 100%;
height: auto;
}


Omdat je toch W3C standaards aanhoudt is het nog mooier om
Code:
<picture>
element in te zetten. Hierbij bepaalt je per breakpoint wat de breedte van de afbeelding is. CGSmartImage laat je voor iedere breakpoint een afzonderlijke afbeelding schalen.

https://www.w3schools.com/tags/tag_picture.asp

Fictief:
small (320px), medium (640px), large (800px), extralarge (1024px)

Een complete Gallery template waarin jQuery Cycle 2 + <picture> element zijn opgenomen:

https://pastebin.cmsmadesimple.org/1

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Thu May 09, 2019 9:14 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Bedankt Arnoud,

klopt allemaal,
Je link naar pastebin is bewaard, dat neem ik mee in het overleg met de klant.

We bouwen in de loop van de komende tijd 4 websites om, ook inhoudelijk, dus veel werk. In de definitieve versie wordt css van de template gescheiden.
Dit wordt de eerste site die helemaal w3css opgebouwd wordt.

mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Fri May 10, 2019 5:46 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Nog een vraag m.b.t. cycle.

Het is momenteel werkend.

Echter in firefox en chrome gaat het beeld over de text.
Ik heb op diverse plaatsen "clear:both;" en "display:block;" ingevoegd zonder resultaat.

Op Android met "firefox klar" werkt het wel zoals verwacht.

De beeldjes moeten nog op 1 formaat komen en e.e.a. wordt zeker nog verder aangepast.

Mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Sat May 11, 2019 6:44 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Zelf plaats ik een carousel altijd in een eigen container (grid kolom). Hierbij gebruik ik display flex of inline.

Titels en pager elementen horen als tekst boven de afbeelding te verschijnen.

Gebruik z-index om de volgorde van elementen aan te passen. In je browser debug tool kan je zien dat jquery cycle de z-index beinvloed.

Lees ook jquery cycle documentatie kopje: advanced api:

cssAfter object hash An object which defines css properties that should be applied to the slide immediately after it has animated out.
cssBefore object hash An object which defines css properties that should be applied to the slide immediately before it is animated in.

(object.style.zIndex)

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Sun May 12, 2019 9:23 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Bedankt Arnoud,

z-index had ik over het hoofd gezien omdat ik dat in deze website (nog) niet gebruik.

Er zijn ongeveer 50 inhoudspagina's om te bouwen met een berg kode die uit de tekstverwerker er in gekopieerd is, plus om de 10 formulieren uit formbuilder.

Voor de oude gcb's heb ik snippets (van Jeremy Bass) geladen.

Nog veel te doen.

mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Mon May 13, 2019 6:23 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Een "ver"ouderde site migreren naar v2 kan een aardig werk zijn. Niet alleen cmsms is veranderd maar als developer heb je waarschijnlijk ook nieuwe inzichten gekregen die je wil meenemen.

Er zijn verschillende manieren om "blokjes met html/smarty" te hergebruiken. Ik zou het bij Smarty include houden dit kan met templates uit de design manager, module templates en bestanden en templates uit de assets map bijvoorbeeld:

Code:
{include file='cms_template:template'}
{include file="module_file_tpl:MyModule;template.tpl"}
{* ./assets/templates/template.tpl *}
{include file="template.tpl"}

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Tue May 14, 2019 9:39 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Na vele experimenten blijkt dat chrome bij de omliggende div met id=slide geen "height:auto;" accepteert.
Alleen met "height:510px;" wordt de text niet bedekt.

Wat de snippets betreft, die zijn nog niet in gebruik, tot nog toe is alles in de core-template.
Bedankt voor de extra uitleg.
Ik overleg nog hoe dat het beste gaat met een klant die in staat is zelf een en ander te regelen maar niet met HTML kan werken.

Ik zoek nog naar een betere oplossing, wat de responsive cycle betreft voor chrome, met media-queries of berekenen van de werkelijke hoogte, ik vindt wat.

Mvg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Wed May 15, 2019 6:13 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Als je foto's een vaste verhouding (aspect ratio) hebben kan je ook padding-bottom ipv height gebruiken op het container element.

Onderstaande voorbeeld werkt met iframes maar kan ook op andere html elementen (slides in je cycle) toegepast worden.

https://codepen.io/frontendstudio/pen/bYWJRG

Flexbox kan ook het onvolledig schalen over de hoogte oplossen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Sat May 18, 2019 9:33 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 782
Hallo Arnoud.

ik heb een eigen template gemaakt met een transparant beeldje als DIV-filler. Werkt op alle browser en is responsive.

Mfg
Jan


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Gallery en cycle maar dan responsive
PostPosted: Mon May 20, 2019 6:13 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1319
Super, een "transparent.gif" heb ik ook wel eens toegepast voor het lazy-loaden van slider images mooi dat het werkt.

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


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  [ 22 posts ]  Go to page 1, 2  Next

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:  
Hosting Nation - Managed CMSMS Hosting