Gallery en cycle maar dan responsive
Moderator: velden
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
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
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/
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
Bedankt Arnoud,
ik probeer dat met cycle2.
Dat had ik gelezen maar niet gerealiseerd dat het JQuery is.
Mvg
Jan
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
Op deze pagina staat e.e.a. uitgelegd http://jquery.malsup.com/cycle2/demo/basic.php
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
Mvg
Jan
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;"/>
Jan
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:
In je CSS schaal je de afbeelding dan naar 100%;
Bijvoorbeeld:
Omdat je toch W3C standaards aanhoudt is het nog mooier om 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
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}
Bijvoorbeeld:
Code: Select all
.slider img {
width: 100%;
height: auto;
}
Code: Select all
<picture>
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
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
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
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
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
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)
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
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
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
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:
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
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
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
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/
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
Hallo Arnoud.
ik heb een eigen template gemaakt met een transparant beeldje als DIV-filler. Werkt op alle browser en is responsive.
Mfg
Jan
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
Super, een "transparent.gif" heb ik ook wel eens toegepast voor het lazy-loaden van slider images mooi dat het werkt.