Page 1 of 2

Gallery en cycle maar dan responsive

Posted: Tue May 07, 2019 9:44 pm
by janvl
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

Re: Gallery en cycle maar dan responsive

Posted: Wed May 08, 2019 3:47 pm
by deactivated010521
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/

Re: Gallery en cycle maar dan responsive

Posted: Wed May 08, 2019 4:48 pm
by janvl
Bedankt Arnoud,

ik probeer dat met cycle2.

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

Mvg
Jan

Re: Gallery en cycle maar dan responsive

Posted: Wed May 08, 2019 5:18 pm
by Gregor
Op deze pagina staat e.e.a. uitgelegd http://jquery.malsup.com/cycle2/demo/basic.php

Re: Gallery en cycle maar dan responsive

Posted: Wed May 08, 2019 9:07 pm
by janvl
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: Select all

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

Re: Gallery en cycle maar dan responsive

Posted: Thu May 09, 2019 6:50 am
by deactivated010521
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: Select all

{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: Select all

.slider img {
width: 100%;
height: auto;
} 
Omdat je toch W3C standaards aanhoudt is het nog mooier om

Code: Select all

<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

Re: Gallery en cycle maar dan responsive

Posted: Thu May 09, 2019 9:14 pm
by janvl
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

Re: Gallery en cycle maar dan responsive

Posted: Fri May 10, 2019 5:46 pm
by janvl
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

Re: Gallery en cycle maar dan responsive

Posted: Sat May 11, 2019 6:44 am
by deactivated010521
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)

Re: Gallery en cycle maar dan responsive

Posted: Sun May 12, 2019 9:23 pm
by janvl
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

Re: Gallery en cycle maar dan responsive

Posted: Mon May 13, 2019 6:23 pm
by deactivated010521
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: Select all

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

Re: Gallery en cycle maar dan responsive

Posted: Tue May 14, 2019 9:39 pm
by janvl
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

Re: Gallery en cycle maar dan responsive

Posted: Wed May 15, 2019 6:13 pm
by deactivated010521
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/

Re: Gallery en cycle maar dan responsive

Posted: Sat May 18, 2019 9:33 pm
by janvl
Hallo Arnoud.

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

Mfg
Jan

Re: Gallery en cycle maar dan responsive

Posted: Mon May 20, 2019 6:13 am
by deactivated010521
Super, een "transparent.gif" heb ik ook wel eens toegepast voor het lazy-loaden van slider images mooi dat het werkt.