-
1 Attachment(s)
The Ultimate Xara Slideshow
Well, it might become that.
Here is a simple piece of jQuery code - it only took a fortnight to make it simple.
:pointAttachment 126968
It is a mixture of Presentation and Slideshow.
The key point is you can build up a slide with a variety of standard Xara shapes, give each a special Name of htmlclass="Slide.." and a Reveal Animation.
Add the Placeholder (Yellow box, Red Star) to the Page and you are cooking.
Things to sort out:
- The start-up is a bit of a fudge as I have not hijacked any Xara code so it has to run its course.
- It works in Variants but has a judder until the Xara code has re-established.
- Hyperlinking works but not in the Xara code phase.
- The slide deck is tedious to shuffle around at present.
- The show time is set to 10 seconds.
- I need to set up an array for a Playlist order and duration.
- I used jQuery as any Reveal Animation loads in jQuery by default so recoding in JavaScript is probably unnecessary.
- I have no Pause or Jump code set up yet.
- The Jump might overcome the Xara code hiccough.
- I have no easing transition from slide to slide.
i hope this is useful and offers food for thought.
I would love to see it being used more sanely.
Acorn
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Something a little tamer.
:pointAttachment 126969
The images are clickable.
Acorn
-
Re: The Ultimate Xara Slideshow
Fantastic Acorn, added to my Goodies folder.
-
Re: The Ultimate Xara Slideshow
On the second, rabbit, xar file I get an humungous wait whilst Xara states "Converting Document for Export" sticking at 40%. It eventially opens and works fine.
Any one else experiencing this?
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Egg Bramhill
Any one else experiencing this?
Yes, here too, at 50%. I thought this was perhaps due to the fact that I'm using XDP 15 and not 17...
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Egg Bramhill
On the second, rabbit, xar file I get an humungous wait whilst Xara states "Converting Document for Export" sticking at 40%. It eventially opens and works fine.
Any one else experiencing this?
I do, it is becaise I rotated the two sliders (on purpose) as I wanted to see what the build time was going to be.
There are 12 large images and all have a feather and eight have a rotation. The XDA has to create all these, which is why I use CSS translate: rotate() and avoid blurring.
With, mine stalls at 71% for 15 seconds. Without, 93% for 2 seconds.
Acorn
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Great idea Acorn! I am busy building a product launch demo supersite using your code for the second page (which launches from the index page).
With the reveal speed and delay times, there are plenty of creative options here. I am using the vertical cube transition between pages and I think there should be some great effects.
Attachment 126970
Is there a way with a supersite to have an optional script that will auto-loop through the page transitions? I could then create a promo video of the whole animation.
Gary
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Initiostar
Great idea Acorn! I am busy building a product launch demo supersite using your code for the second page (which launches from the index page).
With the reveal speed and delay times, there are plenty of creative options here. I am using the vertical cube transition between pages and I think there should be some great effects.
Attachment 126970
Is there a way with a supersite to have an optional script that will auto-loop through the page transitions? I could then create a promo video of the whole animation.
Gary
Gary, it ought to be simple enough, never had a look though.
It would be a case of finding the right trigger code to hook into and showing and hiding DIVs.
What sort of timing delay is needed between pages?
Had a quick look and it is going to be far simpler than expected.
It would be a case of naming the pages index, slide-2, then incrementing thereafter.
All the code need do is count to the number of ClassNames for $('[class*="xr_page"]') and then iterate round first to last simply setting window.location.href = baseUrl + count; & resetting count back to 0 to get an infinite loop.
To get an idea create a simple 7 page with /index.htm, /index.htm#xl_xr_page_slide-2, /index.htm#xl_xr_page_slide-3, ... and view in a proper browser so you can simply change the last digit by hand.
:pointAttachment 126972
Do note, no code is in this demo, it is there to show the approach.
Acorn
-
Re: The Ultimate Xara Slideshow
Thanks for sharing Acorn. They really look great. Didn't try the third one yet, and didn't have the time to have a look into the code.
-
Re: The Ultimate Xara Slideshow
Here's my attempt. Tried it with one animated svg and it works great.
LINK
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Egg Bramhill
Here's my attempt. Tried it with one animated svg and it works great.
LINK
Egg, thank you for including you go, especially with the SVGs.
With a few tweaks, I can imagine having a slideshow in a slide of a second slideshow as well.
Acorn
-
Re: The Ultimate Xara Slideshow
Very well done, @Acorn. The first one (jQuery – Messing with Slides) is particularly nice. Like @siran, your knowledge of JS opens up a lot of possibilities. Some of the effects you used are quite cool, by the way.
I noticed (at least as it comes in to WDP) that you left the Web Image Type to “Let Xara… choose”, rather than forcing PNG (Slide5) as your instructions suggest. Is that because you were confident that it would choose PNG (which it did)?
I played around a little with the design and found that (at least) to some degree, you can make the slideshow full width. (This requires removing any web animations, as they are apparently not compatible with full width in Xara. The decorative pieces that don’t occupy the full screen also go a bit screwy… so they would have to be adjusted.) That would be a great way of avoiding the Xara Slide Show that requires an external http request. (And sometimes, it is slow to show up on the page).
(If you have thought about it,) I was wondering as well if using the slide show across variants would require distinct instances, or if it would function using the same layers (obviously, with adjusted elements) and the same script?
And a last question (thanks for your patience… I try to understand all the aspects of these things): Was there a reason that you chose to put the JavaScript in the head of the placeholder rather than the body?
Again, congratulations on a great effort.
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
gcellison
Very well done, @Acorn. The first one (jQuery – Messing with Slides) is particularly nice. Like @siran, your knowledge of JS opens up a lot of possibilities. Some of the effects you used are quite cool, by the way.
I noticed (at least as it comes in to WDP) that you left the Web Image Type to “Let Xara… choose”, rather than forcing PNG (Slide5) as your instructions suggest. Is that because you were confident that it would choose PNG (which it did)?
I played around a little with the design and found that (at least) to some degree, you can make the slideshow full width. (This requires removing any web animations, as they are apparently not compatible with full width in Xara. The decorative pieces that don’t occupy the full screen also go a bit screwy… so they would have to be adjusted.) That would be a great way of avoiding the Xara Slide Show that requires an external http request. (And sometimes, it is slow to show up on the page).
(If you have thought about it,) I was wondering as well if using the slide show across variants would require distinct instances, or if it would function using the same layers (obviously, with adjusted elements) and the same script?
And a last question (thanks for your patience… I try to understand all the aspects of these things): Was there a reason that you chose to put the JavaScript in the head of the placeholder rather than the body?
Again, congratulations on a great effort.
Slide5 PNG omission was probably an oversight! When you have transparencies, you need PNG. If you don't you get unintended consequences that can be entertaining but baffling. My generic answer is experiment.
I did try full width but thought that keeping it simple to start would be best and then I just had to sit back for feature requests. I will have another look-see.
The code should be in the Head of the page; I did try it in the Body but saw no difference. Normally i would not use a Widget and place it directly in the Website Head, avoiding a Placeholder. The Placeholder is just an easy way to make it visible and portable.
Acorn
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Acorn
Gary, it ought to be simple enough, never had a look though.
It would be a case of finding the right trigger code to hook into and showing and hiding DIVs.
What sort of timing delay is needed between pages?
Had a quick look and it is going to be far simpler than expected.
It would be a case of naming the pages index, slide-2, then incrementing thereafter.
All the code need do is count to the number of ClassNames for $('[class*="xr_page"]') and then iterate round first to last simply setting window.location.href = baseUrl + count; & resetting count back to 0 to get an infinite loop.
To get an idea create a simple 7 page with /index.htm, /index.htm#xl_xr_page_slide-2, /index.htm#xl_xr_page_slide-3, ... and view in a proper browser so you can simply change the last digit by hand.
:point
Attachment 126972 - This version has no code included (
BEFORE).
Do note, no code is in this demo, it is there to show the approach.
Acorn
@Gary / @siran, it turns out the page turner is one line of code (almost): "<script> setInterval( function() { xr_nextp(); }, 30000); </script>" for a 30-second delay.
Sadly Xara's Next Page link does not cycle back to the start and so stalls on the last page.
Here is my work-in-progress:
Code:
<script>
var indexPageHash = "#xl_xr_page_index";
var currentHashedPage;
setInterval( function() {
currentHashedPage = window.location.hash;
xr_nextp();
if ( currentHashedPage == window.location.hash ) { window.location.hash = indexPageHash; }
}, 3000);
</script>
Note I set the interval to 3 seconds in this example as there is no point is twiddling while testing. Change to the number of milliseconds you need.
My revised test file is:
:pointAttachment 126975 with code (AFTER).
I am wary of it as if you watch the browser address line it shuffles back and forward. It might be just how the browser handles the Xara code but is doesn't act that way in the BEFORE version.
Other than that it seems bombproof. Do test.
Acorn
-
Re: The Ultimate Xara Slideshow
Acorn, I made a self running presentation some time ago. The code to make it cycle was a bit tricky. I will make a test if it still works in V17 and report.
-
Re: The Ultimate Xara Slideshow
Acorn, just checked your example. I think it shouldn't matter very much the address line behaves strange. Guess it happens because the call to xr_nextp doesn't immediately update the hash value of the address, so your if statement always returns true and you always set it to the starting page. After the animation Xara then corrects the hash value. Should we care?
If you want to avoid it you could use a different approach. Just use:
Code:
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
My old cycling presentation also still works in V17 (although I had to fix a little bug). But as mentioned it is a presentation and not a supersite. If you are interested to see it just ask.
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
@ Acorn, I am having a senior moment here! I was trying to create a short animation, nothing clever, and for some reason (which will be my error) I can not make it scroll through all the layers. I think all objects have an animation, they all appear to be named. It works for 3 layers, freezes for a while and returns.
The thought process is that if you have a simple diagram, you can create a workflow that shows how that diagram builds. I thought the issue might have been using time delays for the animation, but in this case, I've made a mistake somewhere, but just can't see it. I did reduce the time to 5 seconds (I think!)
Thanks in advance!
Gary
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Initiostar
@ Acorn, I am having a senior moment here! I was trying to create a short animation, nothing clever, and for some reason (which will be my error) I can not make it scroll through all the layers. I think all objects have an animation, they all appear to be named. It works for 3 layers, freezes for a while and returns.
The thought process is that if you have a simple diagram, you can create a workflow that shows how that diagram builds. I thought the issue might have been using time delays for the animation, but in this case, I've made a mistake somewhere, but just can't see it. I did reduce the time to 5 seconds (I think!)
Thanks in advance!
Gary
Gary, !Slide > Pink Rectangle is still Instant.
There problem still exists so I changed all transitions to Slide in for right just to check and everything works so it has to be one of the transition settings somewhere.
Acorn
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
siran
Acorn, just checked your example. I think it shouldn't matter very much the address line behaves strange. Guess it happens because the call to xr_nextp doesn't immediately update the hash value of the address, so your if statement always returns true and you always set it to the starting page. After the animation Xara then corrects the hash value. Should we care?
If you want to avoid it you could use a different approach. Just use:
Code:
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
My old cycling presentation also still works in V17 (although I had to fix a little bug). But as mentioned it is a presentation and not a supersite. If you are interested to see it just ask.
siran, I didn't expect it to harm much as it is all one page's hashes; I initially worried it would affect the History (it doesn't) then I was concerned it was a timing issue or bubbling.
All I did was lift the function call from a Next Page link and ran with that. You could explain how you tracked down your functions, methods and variables. I'm always willing to learn.
I was worried that v17.0 has the Presentation controls bug so I tested on v16 and it still worked.
I too did a recycler for Presentation sites ages ago so seeing your code might inspire me to bring it up to spec.
Acorn
-
Re: The Ultimate Xara Slideshow
There is not much to explain. I just had a look what xr_nextp does.
It reads variable xr_curp adds 1 and checks if the result is lower than variable xr_spapn. If so it then calls function xr_spapp passing the result.
That very much looks like variable xr_spapn holds the number of pages of the supersite and xr_curp is the current page and counting seems to start from 0. Function xr_spapp just seems to go directly to a given page.
That's it. Take the current page (xr_curp) add 1, set to 0 if max (xr_spapn) is reached (that is what the modulo operator % does) and pass that to xr_spapp.
As mentioned the presentation code is a little more complex. The problem is, that Xara remembers which step was active for each page. I'll just paste the code and if you like we can discuss on it later.
Code:
<script>
setInterval(function(){
if(typeof this.d==="undefined"){
this.d=[[60,10],[50,15],[40,20],[30,25],[20,30]];
this.c=this.d[0][0];
}
if (this.c>0) this.c--; else {
var p=xr_curp, s=xr_spappsls(p).indexOf("0");
if (s<0) { s=0; if (++p>=xr_spapn) p=0; } else s++;
this.c=this.d[p%this.d.length][Math.min(s,this.d[p%this.d.length].length-1)];
if (s) xr_donext(); else xr_spapps(p,0,xr_spappsls(p).replace(/1/g,"0"));
}
},100);// poll ten times per second
</script>
And to hide the navigation panel some CSS
Code:
<style>#xr_palrt,#xr_pnava{display:none !important}</style>
-
Re: The Ultimate Xara Slideshow
And a small free goodie hack. Add the following just before the last line ( </script> ) to disable keyboard navigation:
Code:
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
You can omit the comment ( first line, starting with // ) off course.
-
Re: The Ultimate Xara Slideshow
@ Siran & @ Acorn
Ref. Animated Supersite
Great thoughts and code snippets: With your thoughts and code, I can create a scrolling supersite that can use ANY of the available transitions and adjust timing. I can now also disable the navigation popup and its associated keyboard arrow actions: I added some comments for my benefit, one of which is not to hit the webpage preview button because it locks up.
HTML Code:
<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>
In design terms, from a main website, I can use a link to a supersite (with the same consistent styling and published under the same domain name), have a return link, or replicate the main site NavBar. I can also have the supersite in a placeholder on the main site, but now with integral scrolling.
What would be an added bonus is Pause and Play buttons that would operate on Click/Touch buttons. The scrolling supersite can then have a video feel to it too.
Scrolling Animated Pop-ups
I can create any number of animated pop-ups and get them to behalf as a manual slider (the necessary workaround is to do all the animation on the MouseOff layer first, copy and past to the pop-up layer, else Xara objects and says its not possible!). That's animation within the pop-up itself and animation of the way the pop-up rolls in.
Thanks to Acorn, I understand how to link to the generated reference for a pop-up via "xr_cpu(n)". Extraordinarily useful when you want a dual function such as "close pop-up, go to page top or anywhere else for that matter".
Thinking out of the box on animated pop-ups scrolling, can I simply create a function that would do the same as has been achieved for pages in a supersite, but achieves scrolling through the layers? Rationale is that my manual slider for animated pop-ups can use standard Xara functionality for next, pervious, start and end. already has two phases of animation, it just needs to scroll through with user defined timing, ideally with the same play and pause buttons?
That's my Friday morning done! time for lockdown takeaway cappuccino!
Some great thinking from you both, many thanks,
Gary
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Initiostar
@ Siran & @ Acorn
Ref. Animated Supersite
Great thoughts and code snippets: With your thoughts and code, I can create a scrolling supersite that can use ANY of the available transitions and adjust timing. I can now also disable the navigation popup and its associated keyboard arrow actions: I added some comments for my benefit, one of which is not to hit the webpage preview button because it locks up.
HTML Code:
<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>
In design terms, from a main website, I can use a link to a supersite (with the same consistent styling and published under the same domain name), have a return link, or replicate the main site NavBar. I can also have the supersite in a placeholder on the main site, but now with integral scrolling.
What would be an added bonus is Pause and Play buttons that would operate on Click/Touch buttons. The scrolling supersite can then have a video feel to it too.
Scrolling Animated Pop-ups
I can create any number of animated pop-ups and get them to behalf as a manual slider (the necessary workaround is to do all the animation on the MouseOff layer first, copy and past to the pop-up layer, else Xara objects and says its not possible!). That's animation within the pop-up itself and animation of the way the pop-up rolls in.
Thanks to Acorn, I understand how to link to the generated reference for a pop-up via "xr_cpu(n)". Extraordinarily useful when you want a dual function such as "close pop-up, go to page top or anywhere else for that matter".
Thinking out of the box on animated pop-ups scrolling, can I simply create a function that would do the same as has been achieved for pages in a supersite, but achieves scrolling through the layers? Rationale is that my manual slider for animated pop-ups can use standard Xara functionality for next, pervious, start and end. already has two phases of animation, it just needs to scroll through with user defined timing, ideally with the same play and pause buttons?
That's my Friday morning done! time for lockdown takeaway cappuccino!
Some great thinking from you both, many thanks,
Gary
Gary, I guess I was second-guessing your next ask:
:pointAttachment 126979
I cheated with it being a Restart as I mangled up my Resume code somewhere...
For a single page Preview, I just hit the Esc key and chastise myself!
I have stuck with my code approach so as not to confuse others mid-stream and possibly mangle siran's one-liner in the process.
It is more a case of, it can be done, here you go, others clean up afterwards.
Acorn
Update:
Altered to siran's coding;
Code:
<script>
var presentation = setInterval(runPres, 3000);
function runPres() { xr_spapp((xr_curp+1)%xr_spapn); }
function stopPres() { clearInterval(presentation); }
</script>
-
Re: The Ultimate Xara Slideshow
Gary, interesting what we have achieved with three little bits of code, leveraging Xara designs ever upwards.
Thank you for your support.
Acorn
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
"Added bonus": play controls.
:pointAttachment 126982
Acorn
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Acorn
Gary, interesting what we have achieved with three little bits of code, leveraging Xara designs ever upwards.
Thank you for your support.
Acorn
I parked our scrolling animated supersite success and returned to your original idea, but I'd still like to create play and pause buttons at some time.
On the animated slider, I used your code in a demo alongside my animated manual slider, together with some other popup ideas (thanks to Xara additional notes on popups https://help.xara.com/article/26-und...d-web-features and your help with xr-xpu(n))
I uploaded some examples to my server; the popup list works well whereby you can randomly move up and down a list and the correct popup slides in (closing any that are open on the way).
Here's my take https://initiostar.co.uk/demo/popup/.
The bit I'd like to persuade you and Siran to help with, is how get the manual popup 'scrolling with a pause and play button', because those controls can sit alongside standard links for start, next, previous and end.
Very productive all around and many thanks to you both,
Gary
-
Re: The Ultimate Xara Slideshow
Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.=D>
-
1 Attachment(s)
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Gypsyjoe
Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.=D>
Attached is the earlier animated supersite using the vertical box transition, but you can switch to any of the transitions. The code is placed in the website Head and Page 1 shows you this. Acorn has a later version too; just scroll back to his latest post.
Copy the code using a text editor for the supersite or simply use this template. You need to thank Siran and Acorn for this masterpiece.
Code:
<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>
You can place Acorn's code in the Page Head, or simply copy the widget and place it on your own page. The code is in the yellow placeholder and makes it easy to use; just copy and paste on the page. Scroll back through the thread, it's very well explained by Acorn.
Have fun
Gary
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Gypsyjoe
Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.=D>
First off, we have been juggling with quite a few balls at once.
For v1.4 I took siran's one-liner and added the means to pause and restart. i put this in its own Layer (Code) but it could have stayed on the MouseOff layer.
The different page transitions are pure Xara. Each page can have its own effect set though Web Properties > Page > Page transition > Transition effect & time.
I created the coloured Navigation Controls from a Text Line of Font Awesome symbols.
In the Text tool, it was then a case of adding the following Links:
- Restart:: index.htm
- Go Back (one page):: javascript: xr_prevp(); --will only go back to the first page
- Pause & Play:: javascript: togglePause(); -- this is some code in the Yellow/Red Placeholder Head Code. I didn't bother with a Pause/Play toggle in the end so the Pause Layer is redundant.
- Go Next (one page):: javascript: xr_nextp(); --will only go as far as the last page
To find prevp & nextp functions I added shapes with Links to Previous & Next Page, Previewed and checked the code being called on the browser status line. siran opened up the Xara JavaScript, found these and worked out what they were based on. We have different ways of working but they do seem to complement each other.
Acorn
-
Re: The Ultimate Xara Slideshow
To all of you who have actively participated, thank you. You are all great and very generous with your advice. This has been one of the most interesting threads I have seen, even if it’s way over my head, I enjoyed it tremendously.
Take care, be well and stay healthy.
Roly
-
Re: The Ultimate Xara Slideshow
@Acorn
Following last weeks great success on the scrolling supersite, I took one of the sliders I had created using the WOW slider and replicated it with a little more animation. Here we are: https://initiostar.co.uk/demo/zeberd..._xr_page_index.
It was less effort than using WOW and the outcome (for what I wanted to achieve) will be easier to maintain.
One (hopefully) minor snag is it will not open in an iFrame. I think this might be because the scrolling code is in the HTML Website Head, just not sure what the correct string is to overcome the issue, or the best way around it. Any thoughts?
Thanks
Gary
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Initiostar
@Acorn
Following last weeks great success on the scrolling supersite, I took one of the sliders I had created using the WOW slider and replicated it with a little more animation. Here we are:
https://initiostar.co.uk/demo/zeberd..._xr_page_index.
It was less effort than using WOW and the outcome (for what I wanted to achieve) will be easier to maintain.
One (hopefully) minor snag is it will not open in an iFrame. I think this might be because the scrolling code is in the HTML Website Head, just not sure what the correct string is to overcome the issue, or the best way around it. Any thoughts?
Thanks
Gary
Gary, I tried adding your excellent slider into an IFRAME of my making. It hit the following problem:
I therefore assume you are getting similar.
I would have thought that if both slider and site were published into the same folder, it would work.
You would have to name the first slider page as, e.g., "parsonage", not index. so you end up with the images in folder parsonage_index_files/. Everything is then fully in the same domain and you could reference the slider source as a relative address (parsonage.htm).
It might be all you need do is ensure the slider src is actually a relative URL so try that first. (main_site)/ for website & (main_site)/demo/zeberdee/ for slider so use src="demo/zeberdee/".
Acorn
-
Re: The Ultimate Xara Slideshow
So i created an automated slideshow using a Page Transition Supersite.
I named the first page "fred" so I then website Previewed it and checked that if had actually created fred.htm and assets under fred_htm_files/.
I created a Conventional site (one page), index with an IFRAME Placeholder with src="fred.htm" and (in the same Xara session) I Previewed the main page/website under http://localhost:8000/virt1bb6a93b/index.htm; it successfully accessed the slideshow.
Basically, it needs to run published.
There are hacks to ensure it will also run from the file:// protocol but I chased this down and found it interesting but not worth the effort (for now0.
I then Stretched it. The backgrounds stretched but the slider pages (being fixed width) didn't!
So, with great thought, I changed the slider's Web Export Options to Scale to Fit Width (max 3000px).
Bingo!
Acorn
P.S. The red bits just need fred to be the same name throughout.
-
Re: The Ultimate Xara Slideshow
-
2 Attachment(s)
Re: The Ultimate Xara Slideshow
@Acorn and with many thanks to you and Siran, I arrived at the same place! Then I thought let's have the slider set against a video backdrop: https://initiostar.co.uk/demo/zebmaster/
Not sure I understood your comment:
Quote:
There are hacks to ensure it will also run from the file:// protocol but I chased this down and found it interesting but not worth the effort (for now)
I published the supersite on the main page with:
HTML Code:
<iframe src="https://initiostar.co.uk/demo/zebmaster/slider.htm" name="slider_1" width="960" height="400" style="border:none" </iframe>
These are the directory paths:
Attachment 127005 Attachment 127006
The supersite appears to scrolls its pages index-a,b,c regardless of what you name the second, third, forth supersite pages. This had me thinking about why, if you hit preview page with the scrolling code in the head HTML (supersite) it freezes, but that's for another day.
I also published an amended version to Zeberdee (must spell it correctly next time) with a back home button, but with 'index' as the file name. This has always worked, but gives an option to stylise a conventional page with the supersite including menu etc.
@Egg thank you for the positives - the reason the scrolling capability is interesting, for me at least, is not only can it create a great slider but the output can be screen-captured as video, which itself can then be used as a video source component, or as a stand-alone video with the usual play and pause functions.
It's been an interesting thread and thanks to Acorn for kicking-it-off. You start to realise what can be achieved with a little imagination and help from TGers.
Gary
-
Re: The Ultimate Xara Slideshow
Gary, I was researching a solution to the cross-browser issue that was not needed.
You stated the IFRAME was blank and also you wanted the the slider to stretch.
I checked and all seemed to work.
Have we achieved Ultimate Slider status?
Acorn
-
Re: The Ultimate Xara Slideshow
Acorn, many thanks, all works very well. The restaurant I created my slider for are very happy =D>
Gary
-
Re: The Ultimate Xara Slideshow
Though it worthwhile to share one of the outcomes from the work done on the ultimate slider. There are two examples on this restaurant website https://theparsonage.co.uk/
Both sliders were converted to video to make them easily portable across different platforms.
Gary
-
Re: The Ultimate Xara Slideshow
Quote:
Originally Posted by
Initiostar
Though it worthwhile to share one of the outcomes from the work done on the ultimate slider. There are two examples on this restaurant website
https://theparsonage.co.uk/
Both sliders were converted to video to make them easily portable across different platforms.
Gary
Gary, I like the fact the video colours are seamless with the website design - an interesting solution.
Acorn
-
Re: The Ultimate Xara Slideshow
Hi guys
how can I get this nice fading transition when I use Xara animation of images?
https://www.w3schools.com/w3css/tryi...lideshow_ading
I tried and tried and my animation looks kinna not nice. Even when I play with frame duration....transition is still shitty...
Is there a way to implement this without java?