v18 Sliders - Touch Devices and Swipe
For web developers, pleasant surprise to discover v18.0 (and I'm guessing Pro +) now supports swipe for touch-based devices. Upgraded three of my test sliders to v18.0 > https://initiostar.co.uk/demo/zNivo/
Works well (first example) in conjunction with an autoplay toggle button; full autoplay and swipe though is likely to confuse the visitor.
On the positive, v18 renders quite well on a 4K desktop; now understand though about the quirky new handles. Just need to talk about 'transitional websites' and not 'supersites' now?
Gary
Re: v18 Sliders - Touch Devices and Swipe
1 Attachment(s)
Re: v18 Sliders - Touch Devices and Swipe
This is an example HD Full-Width Slider that maintains its aspect ratio up to 4k. You need to wrap it in a container which is explained in the demo - best viewed on a 4k screen.
Attachment 129258
https://initiostar.co.uk/demo/Pan/index.htm
The technique stems from video, but works well with Xara's Scale-to-fit-Width (v16.3, v17.0 and v18.0).
Gary
2 Attachment(s)
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Initiostar
now understand though about the quirky new handles
In the bad ol' UI days, we had 9 nasty black squares that magically changed colour to balance against that of each square's background.
@Xara:
BEFORE
Attachment 129259
Now we have:
AFTER
Attachment 129260
that do no such thing and we have lost the Start Point of the shape (an Egg complaint). The top diagram tells me immediately there has been a Flip.
The dashes are intrusive and the rotate handle is nugatory. If so important, where are the Skew controls?
Why does a white flat or circle sitting directly on the straight box boundary, hidden with thick dashes, contribute?
When it is an image, I can accept the Rounding and the Rotate. The Rotate can easily replace the general shape blob, which doesn't even has the Reset Angle feature.
I am forever jumping up the the toolbar to toggle Edit Handle, Rotation Centre and even fighting to overcome Smart transform settings.
You have not improved the UI, you have destroyed its coherence.
Acorn
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Initiostar
This is an example HD Full-Width Slider that maintains its aspect ratio up to 4k. You need to wrap it in a container which is explained in the demo - best viewed on a 4k screen.
Attachment 129258
https://initiostar.co.uk/demo/Pan/index.htm
The technique stems from video, but works well with Xara's Scale-to-fit-Width (v16.3, v17.0 and v18.0).
Gary
Gary, it is most pleasing to view.
What is sad is that Xara misses the point that we have to write code to force a Presentation to cycle through its slides.
Xara has stopped slider development stone-dead and being locked into jQuery v1.11.1 forever is a security concern and frustrating for ongoing web delivery.
Gosh - two rants in the one Thread!
Acorn
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Acorn
Gary, it is most pleasing to view.
What is sad is that Xara misses the point that we have to write code to force a Presentation to cycle through its slides.
Xara has stopped slider development stone-dead and being locked into jQuery v1.11.1 forever is a security concern and frustrating for ongoing web delivery.
Gosh - two rants in the one Thread!
Acorn
Acorn, your second point, I think, is more a concern. We have jQuery 3.6 thereabouts now. In orders of magnitude, how difficult would it be for Xara to come into this century?
Gary
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Initiostar
Acorn, your second point, I think, is more a concern. We have jQuery 3.6 thereabouts now. In orders of magnitude, how difficult would it be for Xara to come into this century?
Gary
Well Gary, I have been asking since 2014: https://www.talkgraphics.com/showthr...-use-of-jQuery.
One possible approach would be to wrap Xara's old code and use this:
Code:
<script>
console.log("Xara has loaded " + $().jquery);
var jQ1dot11dot1 = jQuery.noConflict(true);
console.log("We have aliased it to jQ1dot11dot1 (" + jQ1dot11dot1().jquery + ")");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
console.log("The latest jQuery is now: " +$().jquery);
</script>
Elsewhere:
<script>
(function ($) {
jQ1dot11dot1(document).ready(function () {
console.log("Stale Xara jQuery files content ... will still run.");
});
}(jQ1dot11dot1));
</script>
Console:
Xara has loaded 1.11.1
We have aliased it to jQ1dot11dot1 (1.11.1)
The latest jQuery is now: 3.6.0
Stale Xara jQuery files content ... will still run.
Xara only have to do this if you have used the old Xara sliders that use legacy code/jQuery v1.11.1. Luckily if you avoid them and just use improved versions then almost everything I have tested will run, even ani.css for animations.
If you avoid these then all you need add to the Website Code (head) is: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
I am sure the use of jQuery Migrate would also work.
Acorn
1 Attachment(s)
Re: v18 Sliders - Touch Devices and Swipe
Acorn,
Quote:
If you avoid these then all you need add to the Website Code (head) is: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
I added this line to my demo site: https://initiostar.co.uk/demo/zNivo/ - I can see the line in the published code; did a Lighthouse test and had this message.
Attachment 129268
You will know what it means, but I'm not sure. I think I understood too that if I had used an old Xara jQuery-based widget, I would have to use the longer version of your code?
Question: why would I not add this line of code every time if I have avoided the ageing widgets? And for that matter, why would Xara not just fix it?
Gary
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Initiostar
Acorn,
I added this line to my demo site:
https://initiostar.co.uk/demo/zNivo/ - I can see the line in the published code; did a Lighthouse test and had this message.
Attachment 129268
You will know what it means, but I'm not sure. I think I understood too that if I had used an old Xara jQuery-based widget, I would have to use the longer version of your code?
Question: why would I not add this line of code every time if I have avoided the ageing widgets? And for that matter, why would Xara not just fix it?
Gary
Gary, sorry to disappoint.
- The Lighthouse detail is advising nothing relevant to your design as it has no entries in IndexedDB.
- Each of the sliders is still running jQuery v1.11.1 - you would have to bypass the IFRAME for simple-slider.htm and add the code in that file directly, whereupon it will crash the slider.
- The longer version is to demonstrate a suggestion of how to add in jQuery v3.6.0 and then how Xara might wrap a solution...
- Running the Nivo Slider with jQueryv3.6.0 gives this grief:
Code:
nivoslider_config.js:147
[COLOR=var(--error-text-color) !important]Uncaught TypeError: widget.find(...).width(...).height(...).nivoSlider is not a function at xaraSwidgets_nivosliderConstructor (nivoslider_config.js:147) at HTMLDivElement.<anonymous> (roe.js:1) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at xr_spapwr (roe.js:1) at xr_rx (roe.js:1) at xr_bl (roe.js:1) at xr_aeh (roe.js:1)
2
nivoslider_config.js:147
[COLOR=var(--error-text-color) !important]Uncaught TypeError: widget.find(...).width(...).height(...).nivoSlider is not a function at xaraSwidgets_nivosliderConstructor (nivoslider_config.js:147) at HTMLDivElement.<anonymous> (roe.js:1) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at xr_spapwr (roe.js:1) at xr_rx (roe.js:1)[/COLOR]
|
xaraSwidgets_nivosliderConstructor |
@ |
[COLOR=var(--color-link)]nivoslider_config.js:147[/COLOR] |
|
(anonymous) |
@ |
[COLOR=var(--color-link)]roe.js:1[/COLOR] |
|
each |
@ |
[COLOR=var(--color-link)]jquery.min.js:2[/COLOR] |
|
each |
@ |
[COLOR=var(--color-link)]jquery.min.js:2[/COLOR] |
|
xr_spapwr |
@ |
[COLOR=var(--color-link)]roe.js:1[/COLOR] |
|
xr_rx |
@ |
[COLOR=var(--color-link)]roe.js:1[/COLOR] |
[/COLOR]
- Xara would have to sort out 1.js, jquery.nivo.slider.pack.js & nivoslider_config.js; a difficult task as the developer has probably taken up knitting.
Acorn
Re: v18 Sliders - Touch Devices and Swipe
OK I understand Acorn,
All the sliders in my demo https://initiostar.co.uk/demo/zNivo/ are mine; the second two might look like Xara, but were re-engineered. Senior moment from me here; they don't use jQuery. However, I added your one line of code and they all work.
Gary
Re: v18 Sliders - Touch Devices and Swipe
Quote:
... a difficult task as the developer has probably taken up knitting.
And apart from Initiostar, Acorn & Siran haven't we all? ;)
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Egg Bramhill
And apart from Initiostar, Acorn & Siran haven't we all? ;)
@Egg - well your contribution on TG is immense (and continues).
The 'Supersite- Slider' as it became known last year (and its various iterations since), IMO, have made the Xara sliders obsolete for any new designs. The addition of 'swipe' in Pro X v18.0 for touch-based devices is welcome and works well, mobiles & tablets being examples.
The process of creating a supersite/ transitional website is simple and more for flexible to edit than any of the Xara slider widgets. It is straight-forward to replace most Xara widgets with a supersite/transitional website (which is then embedded into your main site); adding a mobile portrait variant is standard Xara with a little imagination.
This outstanding issue for me was to find a way to truly extend slider the fill width of the browser (the test being a 4K screen) - stretch fails because you lose the aspect ratio. whereas 'Responsive iframe' works https://initiostar.co.uk/demo/Pan/index.htm.
A nice-to-have would be a Xara transitional parallax effect that works with Scale-to-fit-Width.
Gary
Re: v18 Sliders - Touch Devices and Swipe
Quote:
Originally Posted by
Acorn
a difficult task as the developer has probably taken up knitting.
Quote:
Originally Posted by
Egg Bramhill
And apart from Initiostar, Acorn & Siran haven't we all? ;)
Egg, at least we know you can always start plaiting your beard.
Acorn
