Gallery en cycle maar dan responsive

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post 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/
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post by janvl »

Bedankt Arnoud,

ik probeer dat met cycle2.

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

Mvg
Jan
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Gallery en cycle maar dan responsive

Post by Gregor »

Op deze pagina staat e.e.a. uitgelegd http://jquery.malsup.com/cycle2/demo/basic.php
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post 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
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post 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)
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post 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"}
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post 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/
janvl
Power Poster
Power Poster
Posts: 945
Joined: Wed Aug 13, 2008 10:57 am

Re: Gallery en cycle maar dan responsive

Post 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
deactivated010521

Re: Gallery en cycle maar dan responsive

Post by deactivated010521 »

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

Return to “Dutch - Nederlands”