Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Lightbulb CSS Responsive Wrap Slideshow using CSS Variables

    Using only CSS in this Slideshow, you get automatic Thumbnails, a hover pop-up, a click to picture action and of course the slideshow itself.

    To build your own:
    • You add your large pictures into a !Slides layer.
    • You given them all the same Image Filename of 'slide' - Xara increments them for you.
    • Copy and Paste the Slideshow Setup & Slideshow Placeholders into you design.
    • Tweak the Slideshow Setup settings; usually just the width and height.
    • Resize the Slideshow.
    • Finally copy the CSS of the example Web properties > Page > HTML body (code) into your design in the same area.


    In the example file, the pictures are 1280px wide @192dpi so fairly high resolution.

    CSS Responsive Wrap Slideshow using CSS Variables - modded from Stu Nicholls.xar

    It is one of the few sliders I have worked on that do not slow down the browser or computer. Lighthouse Performance is a wonderful 100%.
    I normally despair at overloaded index pages that take forever to run a slideshow that usually adds nothing to the presentation.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  2. #2
    Join Date
    Mar 2009
    Posts
    4,294

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Looking very good, Acorn. Responsive, no delays.

  3. #3
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    I can download the xar but it wont open in XDP+ Acorn ???
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Quote Originally Posted by Egg Bramhill View Post
    I can download the xar but it wont open in XDP+ Acorn ???
    Egg, I have just downloaded it from my TG link above.
    It opens and previews fine.

    I assume you've just had XPro+v22.3?
    Did you Run as Admin after a cold boot?

    Here is a demo: https://shared.xara.com/uM6ngFJKEi

    Acorn
    Last edited by Acorn; 27 October 2022 at 04:01 PM.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Okay Acorn,

    I D/L'ed it and it still wouldn't open. Using v22.3 which I loaded to test the import data into tables. Running as Admin.

    However after a reboot it opens fine now.

    Looks sweet, I'll give it a trial tonight.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Hello Acorn, just been looking at this in more depth and I can't get the play/pause to work in any browser.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Quote Originally Posted by Egg Bramhill View Post
    Hello Acorn, just been looking at this in more depth and I can't get the play/pause to work in any browser.
    Egg, sorry to hear.

    I have tried https://shared.xara.com/uM6ngFJKEi in all mine and all work save IE (expected) and ToR (no main image but it pauses).

    The whole reason for a CSS-only implementation was to avoid browsers choking on JavaScript so it is annoying.

    Are you adjusting the CSS as that could cause the failure too.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: CSS Responsive Wrap Slideshow using CSS Variables

    Okay, I did adjust the xar. I enlarged the large Placeholder for displaying the 'Slideshow' to fit the whole page and brought to front. Then on preview this covered all the page content. However there was two slideshow controls, one of which I noticed, the other I missed.

    The one I was trying to pause was in fact the mobile variant pause button, which probably did work but was behind the large Placeholder for displaying the 'Slideshow' so remained unseen. On retest I did notice the large Placeholder for displaying the 'Slideshow' pause/play button top left that worked perfectly. My bad! Of course something that wouldn't be present on a two variant page
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	7 
Size:	875.3 KB 
ID:	132942  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •