Creating your own image sliders within Xara

[Egg Bramhill]

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.

<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%;
}

@keyframes slideZoom{
0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}

@-ms-keyframes slideZoom {
0% { -ms-transform: scale(1.00); }
100% { -ms-transform: scale(1.50); }
}
</style>

Attached are the two xar files used to create the simple slider. They must be exported and or published to the same folder to work.

Also attached are the Super Slider xar files.

Link to simple slider example.

Link to super slider example.

[siran]

Nice tutorial Egg!
May I add a small information?
The code line

sDispTimes=[4];

can be extended to define display times for each individual slide/page. If you have three pages for example:

sDispTimes=[4, 4.5, 5];

And you don't really need the <style> ... </style> block in the code if you don't make use of the zoom in effect.

[Acorn]

I created an approach similar to Egg's/siran's over three years ago, which seems to have similar characteristics.
Perhaps someone can critique mine? http://www.talkgraphics.com/showthre...929#post474929

This was a later approach using a Presentation sub-site - http://www.talkgraphics.com/showthre...ent-Slideshows

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

[siran]

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.

[gwpriester]

Well, I created a tutorial that was just like this HERE (Just kidding!) Nice work all of you.

[Egg Bramhill]

siran.

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

[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

[Acorn]

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

[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.

[Acorn]

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.

Acorn - the SEA Board