Flexslider_XH

[Tata]

Have a look at http://treefrognursery.cmsimple.sk
There is the new plugin used in the banner.
Super done, Svasti.
One more idea (not tried so far): "Overlay 4" may facilitate WATERMARKS the same way (the frog on my slides is included into the pictures, but could be easily added by the pllugin).
Let it specify in config:
- watermark - text/image (maybe a separate newsbox?)
- position (TL, TR, BR, BL)
- margins/padding
- path to the watermark - image

EDIT on Aug. 26th
I tried to insert the caption text in 4 rows using <BR> and it works.
Also tried to insert an image instead of text as the standard img tag but this doesn't work. However the content of alt="LOGO" is shown as regular styled caption.
Should the tag be accepted? If so, what should be the img path? I used

Code: Select all

<img src="./userfiles/images/logo.png" alt="LOGO">

[svasti]

Have a look at http://treefrognursery.cmsimple.sk

Very nice. How did you do it?
Only on smartphones the font doesn't become smaller.

The smartphone problem can be solved with using the new css3 values vw, vh, vmin and vmax. Usually vw is most practical.
Something to consider is also to calculate the fontsize. In a test template I have:

Code: Select all

body {font-size:calc(50% + .5vw);}

This example increases the font size from 8px minimum on smartphones slowly to larger sizes on big screens.

[Tata]

Very nice. How did you do it?
Only on smartphones the font doesn't become smaller.

What exactly?
I have not yet played with the responsivity. WIll try it later.
I tried

Code: Select all

body {font-size:calc(50% + .5vw);}

but can't see any change.
Feel free to enter and look around.
Login in PM

[Tata]

I have prepared two new websites for the schools I teach in and have used flexslider.
As to the text, I used

Code: Select all

html, body, .body, #body{font: 100% Arial; font-size: 1rem;}

and

Code: Select all

/********** FONTS **********/
h1, h2, h3, h4, h5, h6{font-weight: 300;padding-bottom: 1rem}
h1{font-size: 2rem;}
h2{font-size: 1.8rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.4rem;}
h5{font-size: 1.2rem;}
h6{font-size: 1rem;}

.sitename{font-size: 0.8rem;}
.lastupdate{font-size: 0.7rem;}

.content{font-weight: normal;}

.box-in h4{font-size: 1.3rem}
.box-in h5{font-size: 1.1rem}
.box-in p{font-size: 0.8rem}

.footer{font-size: 0.7rem;}

No other tricks with texts were needed.

But when I open the website on my iPhone6 or using FF Responsive view with the width less than 480px, the flexslider moves right. I can't find the reason nor the can I solve it.
Also fading doesn't work at this resolution.
What's wrong?
[ external image ] [ external image ]
Have a look at http://szustrebisov.sk or hpp://szusvojcice.sk

[lck]

But when I open the website on my iPhone6 or using FF Responsive view with the width less than 480px, the flexslider moves right. I can't find the reason nor the can I solve it.
Also fading doesn't work at this resolution.
What's wrong?

Code: Select all

<div class="wrapper top">
            <div class="sitename">
                SZUŠ Trebišov, ul.I.Krasku 342/1            </div>
            <div class="lastupdate">
                Aktualizované: 28.08.2015 23:19:00            </div>
            <div class="break"></div> /* <<<----------------- here is the problem  */
</div>

It's a floating problem. Set the <div class="break"></div> after the last </div>

Code: Select all

<div class="wrapper top">
            <div class="sitename">
                SZUŠ Trebišov, ul.I.Krasku 342/1            </div>
            <div class="lastupdate">
                Aktualizované: 28.08.2015 23:19:00            </div>
</div>
<div class="break"></div>

[Tata]

Thanks, Ludwig, that was it. Now th epages look a little better.

[cmb]

Um, for small screens I still get a horizontal scrollbar which periodically shows/hides. For some reason Flexslider sets overflow:hidden for div.flexsliderflexslider_sk only part of the time; when it is not set, the scrollbar appears. Adding the following fixes this issue for me:

Code: Select all

div.banner {overflow-x: hidden}

[Ralf H.]

Da hoffe ich mal, dass Ralf die neue Version bei Gelegenheit integriert. Auf seiner Testseite kann man die Probleme der vorigen Version ja gut sehen (zumindest unter Google Chrome).

Habe meine Testseiten 01 (Slideshow_XH vs Flexslider_XH) und 02 (Flexslider_xh vs Slideshow_SH) jetzt auf Flexslider_XH 0.5 upgedatet.
Ich glaube, dass Flexslider jetzt nicht mehr das ehemalig beschriebene Aufbauproblem zeigt.

Flexslider ist wirklich klasse konfigurierbar, aber vom Layout gefällt mir momentan weiterhin Slideshow besser.
Flexslider ist evtl. mit manueller Konfiguration in der css ähnlich vom Design anpassbar, wie slideshow, aber der Antrieb fehlt mir momentan.

lg,
Ralf

[Ralf H.]

Flexslider ist evtl. mit manueller Konfiguration in der css ähnlich vom Design anpassbar, wie slideshow, aber der Antrieb fehlt mir momentan.

Konnte doch nicht die Finger von der css lassen.
Habe diese in Flexslider jetzt so angepasst, dass die Bilder wie in Slideshow aussehen (Schatten hinter Bilder und kein weisser Rand)

Muss nur noch den Wert finden, dass der graue Rand unter den Bildern wegfällt.

lg,
Ralf

[Ralf H.]

Muss nur noch den Wert finden, dass der graue Rand unter den Bildern wegfällt.

Grauen Balken unter den Bildern hab ich wegbekommen:
War nix in der css, sondern in den Einstellungen musste ich Seitenverhältnis von Standart auf Flexibel stellen.
Da muss man erst mal drauf kommen.

Jetzt sind aber die Ansichts-Einstellungen von Slideshow und Flexslider zumindest vergleichbar.
Mein Eindruck ist, dass bei manchem Bildwechsel Flexslider etwas stockt, wo hingegen Slideshow butterweich wechselt?!

lg,
Ralf