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.
Acorn - the SEA Board
03 October 2016, 04:42 PM
hoja
Re: Creating your own image sliders within Xara
Quote:
Originally Posted by Acorn
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
Hi Acorn,
these files obviously need to get uploaded somewhere and someway, but it was preferable if we could determine the Server ourselves.
Realistically one will rather not have 100 files in a single slideshow, attaching them one by one could get tedious :o).
Third party sliders such as WOWslider call external libraries for fancy effects, but images keep in the hand of user. I will likely use
WOWslider for my next projects, (so please don't do this for me) but if that auto-image cycler you already have with little effort could get
extended to a user-controlled Slider with some nice transition effects, this sure was interesting.
28 April 2018, 12:36 AM
garycwood84
Re: Creating your own image sliders within Xara
Thanks for this, Egg. I've set it up in Xara but find that when I test the results, it works in Firefox but fails in Chrome. Any ideas what might cause that and if I can fix it?
28 April 2018, 12:50 AM
garycwood84
Re: Creating your own image sliders within Xara
Ah, ignore that question, Egg. I re-exported the pages and everything is working fine (I don't know what's changed, but at least it works!).
However, another question. I want to put some arrows onto the slider so that the user can move to the next "page". I've done this successfully, but the problem is that as the image scrolls out (I'm using the wipe left transition), the arrow buttons do, too. Is there a way that I can keep them static and only have the "content" of the slider page move?
28 April 2018, 07:33 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
Quote:
Is there a way that I can keep them static and only have the "content" of the slider page move?
Not easily Gary. The code created by Siran is just to wait x seconds then load the next page of a supersite with transitions. There is no pause on mouse over effect or any way I know of to have a button in the main site to control the pages loaded into a placeholder.
02 May 2018, 10:04 AM
siran
2 Attachment(s)
Re: Creating your own image sliders within Xara
Maybe this example is what you have in mind. Just something recycled from another thread, so please excuse the text only supersite.
Please also note that this example won't work when started directly from hard disk in anything but FireFox. But it works when published or when both files are exported to the same directory and then the main site is viewed in preview.
It works almost the same as the above example by egg, but all the code is at the main site.
The placeholder body code contains an iframe with an ID, this ID needs to be updated in the button codes and in the website head code section if changed.
Don't hesitate to ask if something needs explanation.
02 May 2018, 02:06 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
Works a treat Siran, thanks :)
13 May 2018, 12:40 AM
garycwood84
Re: Creating your own image sliders within Xara
Many thanks for this, Siran. Really helpful.
Is there any way I can make this responsive? If I build variants into the slider Xara file, will they work depending on the size of the iFrame inserted into the parent site on which it appears?
13 May 2018, 12:49 AM
garycwood84
Re: Creating your own image sliders within Xara
Actually, I've just tested this and answered my own question: it's not responsive. If I add variants to the main-with-auto file, I can set the size of the iFrame to be narrower in different variants. But the content it contains doesn't change with, even if I add variants to it that match the iFrame sizes I've used. Is there any way I can get around this, Siran?
14 May 2018, 12:42 PM
siran
2 Attachment(s)
Re: Creating your own image sliders within Xara
As the slider document is created as a supersite it is easy to have it auto stretching (see "Scale To Fit Screen" in the Web export options). Just checked it.
Unfortunately there seems to be a bug in firefox (even in older versions) that requires to add a small fix (see code at the website head in the textslides_4 document).
Additionally the sample code in the website head of the main-with-auto-2 document has changed to allow timer values to be entered in seconds including fractional digits.
Not sure if that is what you asked for. If not, please explain in a little more detail.
16 May 2018, 01:08 AM
garycwood84
Re: Creating your own image sliders within Xara
Thanks for this, Siran. It works well, but there's one snag: it resizes proportionally, so as the width gets narrower, so too does the height. To see why that's an issue, let me tell you how I'm using this in my site.
I want the slider to be the full width of my page. So, at my biggest page variant, that's 1200, and then I have 940, 700, 480 and 320. If the slider scales proportionally, by the time it gets down to the 320 variant, the text is so small, you can't read it.
What I'd ideally like is to be able to set up textslides_4 with variants, so that there's a version of the slider for each of my main site variants. That way, I can change the width of the page, but not the height, and reposition the content within it to make it readable.
Does that make sense? Is it do-able?
16 May 2018, 07:28 AM
siran
1 Attachment(s)
Re: Creating your own image sliders within Xara
Yes, just go ahead. Supersites with scale to fit option still allow to have variants.
Edit: But in that case you would not need the scale to fit option anymore I guess.
16 May 2018, 11:31 AM
garycwood84
Re: Creating your own image sliders within Xara
If only I'd known it was that easy! :-) Thanks, siran.
One final question: I want to include links on my slider. Problem is, I want them to open in the parent window, not the iframe. Any ideas how I can do that?
16 May 2018, 11:44 AM
siran
1 Attachment(s)
Re: Creating your own image sliders within Xara
In the link properties select "Parent frame" for the "Open link" option.
16 May 2018, 05:25 PM
garycwood84
Re: Creating your own image sliders within Xara
Thanks again, Siran. All working perfectly now. I've hit one final snag, though: I want two sliders on the same page. What do I need to change about the second slider, and what additional code do I need to add to the header to make this work?
17 May 2018, 01:04 AM
garycwood84
Re: Creating your own image sliders within Xara
I think you taught me something, siran! I played around with the code and realised that I could rename the iframes, and then just list them all in the code to make them scroll automatically! It's all working perfectly now, just as I wanted it to! :-)
Thank you very much for all your help.
17 May 2018, 05:28 AM
siran
Re: Creating your own image sliders within Xara
Happy to hear that. :)
27 May 2018, 01:04 AM
garycwood84
Re: Creating your own image sliders within Xara
siran - I'm afraid I'm back with another question/problem!
I have set up my sliders, and they are all working fine on everything except iOS devices. On iOS devices, the correct variant of the slider is not chosen: just the first variant is used across all screen sizes. For example, in my slider content file, I've got 3 variants: 960, 700 and 480. On my main site, there are then three iframes, of corresponding sizes. On my PC, Mac and Android phone, the correct variant of the slider appears in the iframe. On iPad, however, the 960 variant appears in all the iframes, regardless of screen size.
I thought I was almost ready to publish! :-( Any ideas how I can get over this final hurdle, please?
27 May 2018, 04:08 AM
siran
Re: Creating your own image sliders within Xara
I don't have an iOS device to check on and try to find a workaround. Maybe Egg can help?
I'm afraid you will need to create a separate slider with a matching page size for each IFRAME if nothing else helps.
27 May 2018, 09:39 AM
garycwood84
Re: Creating your own image sliders within Xara
Thanks, Siran. Fingers crossed Egg can suggest a solution.
A bit more information, from further testing, which may be helpful: the slider HTML file itself does correctly resize when I access it on iOS, to choose the correct version for my browser size. The problem, then, is that it doesn't work when it's in an iframe. It's as though the HTML file in the iframe is insensitive to the browser size.
Not sure I understand all of it, but given your knowledge of coding, I wondered if you could possibly take a quick look and see if you think it's on the right track, please?
27 May 2018, 01:25 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
Gary, have you a url so I can see this on an ios machine?
27 May 2018, 03:35 PM
garycwood84
Re: Creating your own image sliders within Xara
Quote:
Originally Posted by Egg Bramhill
Gary, have you a url so I can see this on an ios machine?
Thanks, Egg. Here's an example you can look at: www.wood-net.co.uk/xwd/tgexample. Resizing the window on desktop or viewing on Android will show you the expected behaviour. On iOS, you'll see that only the 940px version of the slider appears, regardless of the screen size (at least that's the behaviour I see on my iPad).
I hope you can help! :-)
27 May 2018, 06:57 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
I can't see an issue Gary. I don't usually use Safari as my browser on my iPhone & iPad preferring Chrome.
However I opened you example file in safari & can't see an issue.
My iPhone shows the 320 (portrait) & 480 (landscape) sliders correctly.
My iPad shows the 960 (portrait & landscape) sliders correctly.
Go figure? Are you using the latest version of Safari?
27 May 2018, 07:04 PM
garycwood84
Re: Creating your own image sliders within Xara
Thanks, Egg. I've tried both Chrome and Safari and both fail on my iPad. Having said that, I'm using a pretty old iPad (4th gen), so I wonder if you're using iOS 11, and whether that's the difference?
27 May 2018, 07:18 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
My iPad (can't find the version number) & iPhone 5 are updated to ios 10.3.3, which i believe is the latest version. Try updating
27 May 2018, 07:22 PM
garycwood84
Re: Creating your own image sliders within Xara
I have that version, too...
27 May 2018, 08:01 PM
garycwood84
Re: Creating your own image sliders within Xara
Egg - please could you try accessing this version from your iPad and tell me if you see the same thing as before? www.wood-net.co.uk/xwd/tgexample2
The difference here is that instead of publishing the the slider with variants, I've published each variant as a separate supersite, so each one contains only one variant. Then, I've changed the iframe source for each of the variants in my main site so that it loads the correct one for that variant. Now, when I view this on iPad it works as expected (and when the iPad is portrait I see the 700px version I was expecting with the version of the site I shared with you earlier...).
27 May 2018, 08:08 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
Hi Gary, I see the 700 slider in portrait & the 940 slider in landscape. Seems fine to me ;)
Seems like overkill to me however.
27 May 2018, 08:45 PM
garycwood84
Re: Creating your own image sliders within Xara
So what I don't understand is why do you not see the 700px version in the original site that uses variants on the slider? Users of anything other than iOS do...
27 May 2018, 08:54 PM
Egg Bramhill
Re: Creating your own image sliders within Xara
Quote:
Originally Posted by garycwood84
So what I don't understand is why do you not see the 700px version in the original site that uses variants on the slider? Users of anything other than iOS do...
I suspect it's down to the resolution of your phone Gary. As new devices are manufactured with ever increasing resolutions it's becoming ever more difficult to dictate how your site is presented on each and every device. This is why I stated that I thought your 4 or 5 variants was overkill.