CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Gallery en cycle maar dan responsive
https://forum.cmsmadesimple.org/viewtopic.php?f=13&t=80809
Page 1 of 2

Author:  janvl [ Tue May 07, 2019 9:44 pm ]
Post subject:  Gallery en cycle maar dan responsive

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

Author:  arnoud [ Wed May 08, 2019 3:47 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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/

Author:  janvl [ Wed May 08, 2019 4:48 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

Bedankt Arnoud,

ik probeer dat met cycle2.

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

Mvg
Jan

Author:  Gregor [ Wed May 08, 2019 5:18 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

Op deze pagina staat e.e.a. uitgelegd http://jquery.malsup.com/cycle2/demo/basic.php

Author:  janvl [ Wed May 08, 2019 9:07 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  arnoud [ Thu May 09, 2019 6:50 am ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  janvl [ Thu May 09, 2019 9:14 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  janvl [ Fri May 10, 2019 5:46 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  arnoud [ Sat May 11, 2019 6:44 am ]
Post subject:  Re: Gallery en cycle maar dan responsive

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)

Author:  janvl [ Sun May 12, 2019 9:23 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  arnoud [ Mon May 13, 2019 6:23 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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"}

Author:  janvl [ Tue May 14, 2019 9:39 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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

Author:  arnoud [ Wed May 15, 2019 6:13 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

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/

Author:  janvl [ Sat May 18, 2019 9:33 pm ]
Post subject:  Re: Gallery en cycle maar dan responsive

Hallo Arnoud.

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

Mfg
Jan

Author:  arnoud [ Mon May 20, 2019 6:13 am ]
Post subject:  Re: Gallery en cycle maar dan responsive

Super, een "transparent.gif" heb ik ook wel eens toegepast voor het lazy-loaden van slider images mooi dat het werkt.

Page 1 of 2 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/