Many of the questions asked on TG refer to image slider widgets & how can they be adjusted/resized and various options added or removed.
This is a way to create your own, very versatile, bespoke sliders using only Xara and no widgets. For some reason this video won't display fullscreen within TG. I recommend clicking the YouTube icon & view fullscreen at 1080 HD ;)
This is the code that siran supplied that makes it all work. The code replaces the need for buttons to move to the next slide and instead does so after a set time period. It should be placed within the Website or Page Head meta-text. Change sDispTimes=[4]; to sDispTimes=[x]; to change the display time of each slider image.
Quote:
<script>
sDispTimes=[4];
function sswitch(){
var n=xr_curp+1;
if (n==xr_spapn)n=0;
xr_spapp(n);
setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>
<style>
.zoomThis{
animation: slideZoom linear 10s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-ms-animation: slideZoom linear 10s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
None of the X365 Web Animations were around at the time but they would fit in readily as the sub-pages are not just images, they are Xara pages with all capabilities that you can throw into a page.
Acorn
02 October 2016, 12:12 PM
siran
Re: Creating your own image sliders within Xara
Hi Acorn,
one of those is where the idea is taken from. I mentioned that when I first posted such a slideshow in this post.
So there should not be a big difference I think.
02 October 2016, 12:37 PM
gwpriester
Re: Creating your own image sliders within Xara
Well, I created a tutorial that was just like this HERE (Just kidding!) Nice work all of you.
02 October 2016, 01:43 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
siran.
Quote:
And you don't really need the <style> ... </style> block in the code if you don't make use of the zoom in effect.
Yes I understood that, it was just that half way through the tutorial with the zoom effect active and a cross-fade page transition on the slider images it looked rubbish, so I removed the 'htmlclass=zoomThis' name from the images.
I've changed the page transition to 'flip vertically' so if anyone want's to know what it looks like with image zooming click HERE
02 October 2016, 05:53 PM
roly
Re: Creating your own image sliders within Xara
Thanks Team "EggSiranAcorn", you guys are awesome and dangerously creative when working together. We have a great future here at Talk Graphics.
Thank you for all that great support.
Ciao
Roly
02 October 2016, 06:51 PM
Acorn
Re: Creating your own image sliders within Xara
Quote:
Originally Posted by roly
Thanks Team "EggSiranAcorn", you guys are awesome and dangerously creative when working together. We have a great future here at Talk Graphics.
Thank you for all that great support.
Ciao
Roly
Roly, it is purely the interrogative nature of TG that inspire us to delivering better.
Just grateful there is a fourth in the group, as yet, whose name starts with an R.
Acorn
03 October 2016, 10:25 AM
hoja
Re: Creating your own image sliders within Xara
These are indeed some very nice collaboration results!
The results I saw so far have a website banner quality and are set to auto-run. If you guys need another intellectual challenge
and have time to spare maybe consider also a different version of Slider? A nice quasi-native alternative to Xara's Image Slider
Widget sure was welcome, as the inbuilt version has various drawbacks:
Xara's version assigns generic names to exported files, which SEO wise is not a good thing at all.
One has no advanced control about the Slider styling (arrows) and Caption placement. Ideally one could just draw elements inside Xara
and write down text, name these entries and they take their function in the exported file (and in all variants).
Several very attractive transition effects, such as Ken Burns Effect aren't available in the Xara version.
Xara's slider doesn't allow for local file hosting, which for some users is a NoGo.
One needs to be online and to log in to edit existing slideshows
One will not be able to edit existing Xara widget based sideshows if one decides not to renew the 365 license.
Here one really loses functionality, not just access to library content.
03 October 2016, 01:20 PM
Acorn
Re: Creating your own image sliders within Xara
Quote:
Originally Posted by hoja
These are indeed some very nice collaboration results!
The results I saw so far have a website banner quality and are set to auto-run. If you guys need another intellectual challenge
and have time to spare maybe consider also a different version of Slider? A nice quasi-native alternative to Xara's Image Slider
Widget sure was welcome, as the inbuilt version has various drawbacks:
Xara's version assigns generic names to exported files, which SEO wise is not a good thing at all.
One has no advanced control about the Slider styling (arrows) and Caption placement. Ideally one could just draw elements inside Xara
and write down text, name these entries and they take their function in the exported file (and in all variants).
Several very attractive transition effects, such as Ken Burns Effect aren't available in the Xara version.
Xara's slider doesn't allow for local file hosting, which for some users is a NoGo.
One needs to be online and to log in to edit existing slideshows
One will not be able to edit existing Xara widget based sideshows if one decides not to renew the 365 license.
Here one really loses functionality, not just access to library content.
hoja, just to check against bullets one and four. If I have 100 quality files, all beautifully named, then you don't want to have to add them to your Xara design but access then for a hosted drive under the main URL of the site, e.g., <site>.index.htm and a folder <site>/Posh Pics/ ?
Including click objects to drive events, within Xara, necessarily implies any presented image should include hyperlinks and web animations. If this is so, I think it would exclude local file hosting. This means designing two generic widgets.