How do you set up a new photo slideshow from a blank design

[dsh]

Hello all, I am new to your forum having just joined.

I have used other web design programs bur thought I would try Xara Web Designer Premium as a variation to my other designs.

I am trying to start a new photo slideshow under the header to go the full width of the page. I am aware of the templates that are available but I want something very simple like a fade in and fade out for about 8 images but with no dots/numbersor thumbnails to appear.

Can anyone please give me guidance as to how to do this, or alternatively edit a template so this can be done please.

Look forward to your replies.

Hope you are all safe and well. Kind regards Ross

[wizard509]

This sounds like something Acorn can answer.

[Chris M]

I would use the Supersite option (do they still call them Supersites?).
There are options in just about any of the steps, so I'll just step by step how I did the attached.

File > New > Web Page 960 px (XGA)
Utilities > Web Properties > Export (tab) > Transition Effect (drop down menu) > Zoom In & Fade
Utilities > Web Properties > Export (tab) > Sale To Fit Width: Maximum (radio button) > 1920

Select the top page (index) and import/drop background image. Set to fit the width of the page and adjust the page height to suit the image.
In Page & Layer Gallery, select the page and click New Page as many times as you need. You can name the pages, I didn't.
Select the image and Arrange > Repeating Object > Repeat On All Pages

Import/drag images and resize to fit height, then Arrange > Alignment > Page (radio button) > Horizontal Position (drop down menu) > Align Centrally - Repeat with all your images.

Import/drag forward/back icons and place on page
Select right icon and Utilities > Web Properties > Link To (drop down menu) > Next Page
Select left icon and Utilities > Web Properties > Link To (drop down menu) > Previous Page
Select each icon in turn and Arrange > Repeating Object > Repeat On All Pages

>>> DSH Example.xar <<<

[Boy]

I would use the Supersite option (do they still call them Supersites?).

I quickly looked it up in the manual. A Supersite is now called "Single page website" or "Scrolling website."

[Chris M]

I quickly looked it up in the manual. A Supersite is now called "Single page website" or "Scrolling website."

Single Page Website seems most appropriate to me. Let it be known, that from this day forth, I shall refer to that style as Single Page Website.

I'll probably forget by next week and call them Supersites.

[Initiostar]

I quickly looked it up in the manual. A Supersite is now called "Single page website" or "Scrolling website."

In latest Xara versions the various options are accessed from Web Properties/Export



There is a simple auto-crossfade slider at the bottom of the page here: https://initiostar.co.uk/demo/zNivo/. It requires one-line of code to auto-scroll (in the Website/ HTML(code) Body).

The this is the template Simple-Slideshow-Page-Templater.xar; just add your own pictures to see the effect. You could add additional controls, remove auto-scroll or have a toggle play/pause button.

Gary

[Chris M]

@dsh. I've read your question again and realised I initially misinterpreted the bit about being under the header. I now think you mean Header - Slideshow (that runs automatically) then content below.

I was running with a presentation type.

[gwpriester]

I have moved this discussion to the Xara Web Design Forum.

[Acorn]

Hello all, I am new to your forum having just joined.

I have used other web design programs bur thought I would try Xara Web Designer Premium as a variation to my other designs.
I am trying to start a new photo slideshow under the header to go the full width of the page. I am aware of the templates that are available but I want something very simple like a fade in and fade out for about 8 images but with no dots/numbersor thumbnails to appear.
Can anyone please give me guidance as to how to do this, or alternatively edit a template so this can be done please.
Look forward to your replies.

Hope you are all safe and well. Kind regards Ross

Ross, I have taken you at your word here in that you want a simple approach.

All this needs is a set of labels and some CSS styling.
There is no JavaScript so it should run on all currently common browsers.
Don't panic when it does not run in Preview in Xara's versions before 18; the Preview is a very old IE instance. It works if you Export or Publish.

You can have any shape or size of image.
I have created my design file with all the same size and stacked together and grouped.
You must:

• Use Utilities > Names to add the incrementing img# labels
• Match the CSS coding to the number of images in your slideshow

You may:

• Use Stretch to Width
• Add Line Widths
• Have your images grouped or ungrouped

You should:

• Label the images in order, matching the Page & Layer gallery structure
• If you don't, you can add a z-index value with a highest value for the lowest label, going high to low through the images

You cannot:

• Use in a Variant; you have to add different labels and adjust the CSS. Labels would become v1img1 through v1img8. CSS would have #img1, #v1img1 { ... }, etc.

Design file: CSS - FI-FO Image Animation.xar (2.5MB download).

Acorn

[wizard509]

OK I was wrong many members here can answer just not me.