Welcome to TalkGraphics.com
Results 1 to 8 of 8

Thread: Slideshows

  1. #1
    Join Date
    May 2022
    Posts
    17

    Default Slideshows

    Can I use a mixture of portrait and landscape when creating a slideshow and any recommendations to best one of the ones that come with xara web designer +
    Have used wowslider in the past.
    Thanks

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Slideshows

    Hi SPD, I rarely use pre-made slideshows. One of the better ones is that created by Siran recently posted about in this thread.

    I prefer to create the slideshows independantly and have them load as a sub-website into a placeholder.

    I attach a .xar I recently used using Sirans method. It has square, portrait & landscape images but done via a cheat by creating them all square with backgrounds matching the page background but after further consideration this was unnecessary as it's the page that rotates, not just the image.
    Attached Files Attached Files
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: Slideshows

    I am with Egg here in that there are simply better alternatives for creating slideshows and sliders. Where the design calls for some level of automation and transition, then at least for me, it makes sense to create a sub-website and embed that into the main website using a standard iframe. Easier to maintain and update.

    Here are two examples; a presentation embedded into a main website and a transition website embedded into the main website. Both can have different transitions as well, so there a many options to play with. Credit goes to Siran and Acorn for the code that makes these work.

    https://initiostar.co.uk/demo/photo-slider/
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  4. #4
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Slideshows

    I almost forgot this option:

    Acorn gave me a simple script that creates a simple fade from slide to slide www.eyetricks-3d-stereograms.com The script can be altered.

    The images are simply stacked, one atop the other on the page and display in the order they are stacked.

    Each photo has the same name: htmlclass="photo"

    And this script goes in the Page > Head window

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89h gyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Global site tag (gtag.js) - Google Ads: 1069362885 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-1069362885"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'AW-1069362885');
    </script>

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Slideshows

    @Gary, sorry but the code you supplied is mostly nothing to do with any slider but instead is for Google's tracking mission!

    Your slider did use anime.js and that is invoked by the very first <script> call only.
    The rest is in the Page Body:
    Code:
    <script>
          var images =      [].slice.call(document.querySelectorAll('.photo')).slice(1, 100);
          var showtime = 1500;
          var carousel = {
          targets: images,
          opacity: [0, 1],
          delay: anime.stagger(4 * showtime),
          easing: 'linear',
          duration: 2 * showtime,
          endDelay: showtime,
          loop: true,
          }
          anime(carousel);
          </script>
    That aside, anime.js is probably overkill (as would the use of jQuery).
    My preference is a pure CSS approach as JavaScript can be blocked by the viewer and the carousel never renders.

    CSS - Simple Carousel.xar requires a little explanation.
    It is tuned for 9 shapes - any size and orientation (images, Groups, Text blocks, blobs). You simply give them all a ClassName of htmlclass="slide".
    If you have fewer, you change --scount in Page Body. You also have to delete all .slide:nth-of-type() lines with any number bigger than your current --scount value.
    If you have more, you change --scount in Page Body. You also have to add new .slide:nth-of-type() lines with numbers that increment the previous line until you reach your current --scount value.

    Here, I have 9 slides that I wanted to show for 5.555 seconds each, a total of 50 seconds.
    This is somewhat artificial but it make the percentage calculates in the @keyframes block: each 2% is one second in this 50-second carousel.
    We have each slide is delayed to appear 5.555 seconds after the previous.
    It is initial invisible and off the the left its own width.
    Over the next second, it is revealed and moves to its spot and stays there for 5 seconds.
    It then takes a second to fade out and move a little to the right.

    You can change the fade and shifts or include your own transformations.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Slideshows

    This is why I am not doing website design any more.

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Slideshows

    Very interesting effect Acorn. Here's one just messing with your ideas:

    LINK
    Attached Files Attached Files
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Slideshows

    Quote Originally Posted by Egg Bramhill View Post
    Very interesting effect Acorn. Here's one just messing with your ideas:
    LINK
    Egg, I like the small letter displacement, it makes it quite funky.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

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
  •