Video in Top-frame

[Initiostar]

Ok I understand, but many of those widgets that you guys are making, are lost in pages and pages here in Talk Graphics, for past years ...
Maybe there is some idea to collect them in one place or forum just for that kind of widgets ...
This sliders, I can't see the code for placeholder ?
Thank you man for your kindness.

Denis

Denis,

From my expeirence the value that TG provides is that it evolves and ideas develop. The original slider work had names such as Ultimate Supersite Slider and Supersite Slider; Egg produced a video too: https://www.talkgraphics.com/showthr...rs-within-Xara.

Here are the sliders embedded into a holding website: https://initiostar.co.uk/demo/zNivo/

In summary (in my case) each slider is a website within a website called using a standard iframe. The holding website is exported as a standard website whereas the slider website, is a transitional website with whatever transition you choose. The key to this working without any hassle, is to export your slider website to the SAME diectory as your main website. A transitional website creates ONLY ONE htm file - when you create the first page in your slider website, you must give it a unique filename (not index) - and ignore the Xara warning. When you export the slider website to the same directory as your main website you will see the fielname reside alongside the main website page filenames.

Here are some slider websites with different transitions and ideas - the designer can introduce whatever navigation they choose into the slider website.

Simple-Slider.xar Simple-Slideshow.xar Effects-Slideshow-Widget.xar Xara Swipe Slider-Plugin.xar

To include a slider website in your main website requires a proportionally sized placeholder with an iframe to locate the filename:

<iframe src="your-exported-file-name.htm" name="slide-name-reference" height="100%" width="100%" style="border:none;"></iframe>

The code that is placed in each slider website depends on whether you want to autoplay the slider, or have the visitor control start/stop toggle autoplay. The first section of code is not required for v18.0 or Pro + (it was necessary to overcome a bug in earlier versions).

Equally and optionally, you can disable the keyboard arrow keys or leave them in operation. Personally, I disable them. There is another version of the code that allows the designer to have different time intervals between the slides (though I don't use it).

<!--this code is placed in the Website HTML code (head)-->
<!--do not show display navigation in v17 -->
<style>#xr_palrt,#xr_pnava{display:none !important}</style>


<script>
// this code placed in the Website HTML code (body)
// disable keyboard navigation in v17 including the directional arrows (optional)
(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;};}})();
//toggle scroll to automate the slider - the time interval 600ms is variable
curScrollInterval=null;
function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval((function _(){xr_spapp((xr_curp+1)%xr_spapn);return _;})(),6000);}}
</script>


<script>
//this code placed in the Website HTML code (body)
//this one line of code automates the slider - the time interval 400ms is variable
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},4000);
// disable keyboard navigation in v17 including the directional arrows (optional)
(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>

The upside to this whole approach is its complete flexibility; unlike most sliders text-stays-as text. You can choose to set the slider website page and pasteboard colours to be the same as your main website which can give a seamless integration effect. From v18.0 and Pro+ swipe is supported and ALL these sliders work with it, which is particularly useful for touch-based devices.

Hopefully, this gets you started with some great sliders

Gary

[Dencuga]

One big THANK YOU Gary !
I have to study this well