Xara Slideshow Widget - Won't allow Full width Stretch!

Dear All, any ideas how I get round this. I wish to create a slideshow that fits to screen (stretched)

Here is an example of what I would like to do: https://www.stwater.co.uk/


BTW, Xara, a little disappointed and underwhelmed with your latest update. What about tables? Video backgrounds? Widgets that work? Decent Xara forms?

Thanks, Teeser.

Teeser, Siran & Acorn have provided great solutions within this thread

http://www.talkgraphics.com/showthre...width-Slidshow

Hi Egg, thanks for that.
The widgets used in the earlier thread were:
Nivo Slide Widget
and the Fade Slideshow.
Neither are as customisable as the newer XARA Slideshow Widget.
I'd really like to be able to make a slideshow produced with this widget full width. The later widget has rather horrible numbers and a small grey rectangles that are almost impossible to get rid of.

Any ideas? Many thanks.

Perhaps Siran or Acorn can comment on this as they are the bee's - knee's re this matter :)

Never used the Xara Slideshow Widget, it would take a while to check.
Did you try Acorn's customizations of the Nivo slider provided in this thread?

First try worked with the Xara Slideshow.
Do the following:
- Create your slideshow.
- Add the name "htmlclass=xw_stretch" to the placeholder (without the doublequotes)
- Add the following code to your page or website HTML Code (head)

Code:

---

<style>
.xw_stretch_stick {position: fixed !important;}
.xw_stretch, .xw_stretch_stick {left:0 !important; -ms-transform-origin:0 0; transform-origin:0 0;}
</style>
<script>
function xw_stretch(){
 var d=parseInt(window.getComputedStyle(xr_xr).width);
 var w=parseInt(window.getComputedStyle(document.body).width);
 for (var m=0;m<=1;m++){
  [].forEach.call(document.getElementsByClassName("xw_stretch"+((m)?"":"_stick")),function(e){
  var s=e.style;
  if (m) s.marginLeft=((d>w?0:d-w)/2)+"px";
  s.msTransform=s.transform="scale("+((d>w?d:w)/parseInt(s.width))+")";
  });
 }
}
window.addEventListener("resize", xw_stretch);
window.addEventListener("load", function(){xw_stretch();setTimeout(xw_stretch,100);});
</script>

---

Please report if there are issues.

Works fine for me Siran. Thanks for the input.

Thanks Siran, works great.

Ciao

Roly

Siran

Wow, thanks sooo much for that!

Hi Siran,
I was searching the website and found your answer but I'm not sure of a couple of things.

When you say "create slideshow" should I be using a XARA widget or can I simply use "wowslider" as a slide show maker?

You mention to add the name "htmlclass=xw_stretch" to the placeholder. I'm not sure where you mean about that. Do you mean in the "body" section or is there another place?

I'm using Xara Web Designer Premium 12.

Thanks

I believe Siran was meaning to use a Xara widget. I don't know if it will work with wowslider.

Right click over the widget, select names, give it the name htmlclass=xw_stretch, Add & Close.

As far as I know the WOWSlider itself supports full width and full screen display, so you won't need to use the described method.
On the other hand it would be nice to know if it would work, so please drop a note if you try.

Bringing back up this old thread. I am looking to make a full width slideshow header, but not just a narrow strip, one that would take up the whole page when it is opened but then you can scroll down to the content. A long, single page site. This solution is great except that the rest of the content is in different positions depending on the size of the browser. Is there a way to make this slideshow behave like that?