Simulate Slideshow Widget BACKGROUND Scheme using CSS3

[tomcadman]

I am trying to finish up some image slideshow coding using CSS3... specifically, the background behavior.

The TEST-XARA1 site is using a slideshow widget that expands the background across the browser. I want to replace the widget (using code in the placeholder) in order to have more control and forego the XARA server dependency.

Basically, I want to make this page background ... look like that page background without using the widget.


The PROBLEM: I have not been able to figure out how to expand the background via HTML/CSS3 inside a XARA placeholder. (Link to my CSS code) ... and Link to a test page containing placeholder code I use (minus the outer tags, of course) so that you can view the page source.

I have attempted to place /* background-size: cover; */ in various code positions with no avail.

Any help would be appreciated.

Thanks in advance,
-Tom

[Acorn]

Could you add html as the selector for the cover?

Acorn

[tomcadman]

Could you add html as the selector for the cover?

Acorn

Did you mean place /* background-size: cover; */ in the HTML box of the placeholder?

[Acorn]

Did you mean place /* background-size: cover; */ in the HTML box of the placeholder?

No, something like:

html, body {
background-image: url(...);
background-size: cover;

}

But I am only guessing.

Acorn

[tomcadman]

I am attempting to keep all the coding within the XARA program framework (i.e. placeholders), so there are no extra steps which involve altering the XARA generated code outside the program. It will be cleaner and easier to pass along to the next webmaster.

I am assuming this can be done, since the Xara Widget appears to be contained within the in-program placeholder.

I am hoping there is a simple solution to this.

Thanks for the input,

-Tom

[Acorn]

I have a Image Filename image hidden in my !Images layer, which I set to be a pop-up so it does not show but still publishes.

My two Placeholders have code to ensure the images is stretched to the browser width but keeps the height of the Placeholder.

CSS - Stretch to Width of Placeholder Height.xar

Basically, you wrap your <figure> tags in a<div> with ClassName fader-image

Acorn

[Acorn]

Tom, here is a working example: CSS - Cross-fade Carousel.xar

It has a few snags:

• The stretch is wrongly placed (down and left a bit).
• The crossover from Slide 12 to Slide 1 has incorrect timing.

It would have been nice to have had a reference to the original solution: https://frontendscript.com/css-backg...lideshow-fade/.
From seeing it, I had a better understanding of the structure.

Your addition of the captions is clever but destroys the HTML5 concept of the <figure> tag.
I reworked the caption detail to include the <figcaption> tag.

I disagreed with the original approach in hiding the background-image in the CSS.
I used in-line styles instead into the <figure> tag as a casual viewer then sees the content in one place, the Placeholder code (body).
The presentation is then safely sequestrated in the Page code (head).

I used the XDA v16+ use of Image Filenames to create a list of indexed images (gates, gates1 to gated11).
This feature is still buggy as any change to size or adding another, it is safest to select all images and re-apply the label for the Image Filename.
I will raise this with Xara.

All the images used are in a hidden !Images layer. The bang (!) ensures they are published even if hidden.
I made the layer a pop-up by using one image to link into the layer itself.
This ensures the layer is never opened.

If the number of images is more than the dozen here:

• Ensure the image collection all have the Image Filename set.
• The CSS nth-child is incremented with the animation-delay incremented by the require display time.
• The total time is adjusted accordingly.

I would appreciate a review of the approach from anyone and suggestions to finalise it towards removing the current niggles.

Acorn

[Boy]

Basically, I want to make this page background ... look like that page background without using the widget.

Nice website.

[Initiostar]

@ Acorn,

I had play with the XAR, but ran into trouble when I applied Scale-to-fit-Width; thereafter the placeholder would not extend to full browser width? I was thinking how would this work across variants - it wouldn't be the first time StfW has causes a conflict though.

Then I went back to the start of this thread. It does appear Xara's MX Slider can achieve the desired outcome, but the OP would prefer to remove the Xara server dependency on what is a proprietary online widget. Fair comment:

1. It is not too difficult though to find an alternative third-party slider (WOW being just one example). It works well with Xara; works across multiple variants and Scale-to-fit-Width e.g. https://initiostar.co.uk/demo/WOW/. The upside: swipe is supported which is useful for touch devices (tablet/ mobile); a great range of animations can be implemented in minutes and if one is inclined, you can edit the WOW code too. Maybe a bit clunky, but with lazy loading performance is good.

2. Should one want to avoid any third party widgets, then my first port of call would be can this be done with an embedded supersite. A supersite naturally sits within a placeholder on the page and affords the designer any number animation options. The only one niggle I've never found an answer to is how can I make this work at full browser width in tandem with Scale-to-fit-Width. A workaround, which has some real upside, is to convert the slider into a video and use a few lines of code to have it autoplay via Page HTML(body). Thereafter, you can have any number of overlays, including layered placeholders and other objects. It works across variants and with Scale-to-fit-Width: https://initiostar.co.uk/demo/VideoSlider/

Just an alternative thought.

Gary

[Acorn]

Gary, thanks for the thoughts.

I took it as a pure CSS challenge for the fun of it.
I used the Xara StfW as a convenience but could code that out as well.

I use WOWSlider as well but I strive for sleeker approaches.

Acorn