Full width Slidshow ?

[siran]

Arrrrg, sorry Acorn! I completely misunderstood the second part of post 4. So there has been absolutely no reason to apologize. I now see what the problem is and will try to fix it.

[siran]

Hope to have fixed it now.
Please see result online: <HERE>
Please report if there are still issues with the code.

[nobbyy]

Hi all

I have been looking for a way to stretch slidedeshows to full width and this works great, but the problem that I have is that it scales vertically as well as horizontally so that the image goes over the top of any text or objects that are underneath it if I use a wide screen.

I guess that this is because objects in Xara are in absolute positions?

Any thoughts on a workaround please?

[siran]

Nobbyy, I am quite sure that what you need can be done. But it most probably is not a problem with the HTML Xara creates but with how I understood the requirement.
I will be quite occupied the remaining days of this week and at least the next week, but I really would like to assist with the necessary code changes.
Could you describe in detail how you would like the widget to stretch? At the moment I guess that you would like the bottom part to be clipped. Or do you want it to just stretch horizontally?

[nobbyy]

Hi Siran

Many thanks for your swift response and offer of help.

I am not sure whether what I would like to do can be done either! LOL

What I would like is a full (or nearly) full width slideshow that scales with the page width, but does not increase in height. A bit like this one http://enlightiks.com/ which was mentioned in a similar thread.

I find that the aspect ratio of nearly every Xara slideshow is very tall so to get a wide slideshow takes up nearly half the page - I also wish that Xara slideshows did not include numbers, text or radio buttons as the current vogue is for much cleaner pages.

Hope all of this makes sense!?!?

[roly]

Hi nobbyy, look at the attachment and if this is what you are looking for, do the following;

From the online content catalog go to image resources and import the Xara slideshow widget (1st one)

If this is your first time using this widget you will have to register with Xara to get it.

Once imported put in your pictures, ideally very high resolution pictures .

Then in the design tab, uncheck every box, this will remove numbers, arrows, etc. You can play with all the other buttons to get the features you want.

Then save.

Now on your Xara screen enlarge the with of the widget to 2000px line then preview, if picture is too high on screen, move the widget so that some of the picture is above the zero page line. You can adjust as needed.

Let us know how it went

Ciao

Roly

[nobbyy]

Hi Roly - many thanks for your response and suggestion.

Although this does not 'stretch' its a really good pragmatic solution and looks great!

Thank you again.

[paternalheels42]

You can stretch almost anything using some CSS and JavaScript.
See example xar file. ( visible here )
There is some code and CSS at the page HTML code (head) and the widget has the name htmlclass=xw_stretch applied, that's all.

Thanks, it worked.

[siran]

Nobbyy, not sure if you are still interested in a stretching and clipping slideshow. Anyway, here is how I did it.
The slideshow itself is based on work of Acorn (see this thread) and created in a separate document.
If you want to use links on elements in the slideshow to open in the main window (what a visitor would probably expect) then you have to set the 'Open link' attribute in the link properties to 'Parent frame(_parent)'.
On the main document you will find a customized version of the stretching code (at the page head) that limits the height of the stretched content to that of the used placeholder.
Other than in the previous examples the placeholder doesn't have a name applied, the class name (which is used by the code in the page header) is set at an inner DIV in the placeholder body code:

<div class="xw_stretch" style="width: 2000px; overflow: hidden;">
<iframe src="slideshow.htm" frameborder="0" width="2000" height="300"></iframe>
</div>

You can see two width values both set to 2000 and a hight value set to 300 in this example. These values have to match the dimensions of your slideshow document page.
And off course the src value has to match the name of the exported slideshow sub site.
You can see the result online here.

[gwpriester]

Great solution siran!