Welcome to TalkGraphics.com
Results 1 to 10 of 44

Hybrid View

  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Creating your own image sliders within Xara

    Many of the questions asked on TG refer to image slider widgets & how can they be adjusted/resized and various options added or removed.

    This is a way to create your own, very versatile, bespoke sliders using only Xara and no widgets. For some reason this video won't display fullscreen within TG. I recommend clicking the YouTube icon & view fullscreen at 1080 HD



    This is the code that siran supplied that makes it all work. The code replaces the need for buttons to move to the next slide and instead does so after a set time period. It should be placed within the Website or Page Head meta-text. Change sDispTimes=[4]; to sDispTimes=[x]; to change the display time of each slider image.

    <script>
    sDispTimes=[4];
    function sswitch(){
    var n=xr_curp+1;
    if (n==xr_spapn)n=0;
    xr_spapp(n);
    setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
    }
    setTimeout(sswitch,sDispTimes[0]*1000);
    </script>
    <style>
    .zoomThis{
    animation: slideZoom linear 10s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -ms-animation: slideZoom linear 10s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    }

    @keyframes slideZoom{
    0% { transform: scale(1.00); }
    100% { transform: scale(1.50); }
    }

    @-ms-keyframes slideZoom {
    0% { -ms-transform: scale(1.00); }
    100% { -ms-transform: scale(1.50); }
    }
    </style>
    Attached are the two xar files used to create the simple slider. They must be exported and or published to the same folder to work.

    Also attached are the Super Slider xar files.

    Link to simple slider example.

    Link to super slider example.
    Attached Files Attached Files
    Last edited by Egg Bramhill; 02 October 2016 at 03:10 AM.
    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

  2. #2
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating your own image sliders within Xara

    Nice tutorial Egg!
    May I add a small information?
    The code line
    Code:
    sDispTimes=[4];
    can be extended to define display times for each individual slide/page. If you have three pages for example:
    Code:
    sDispTimes=[4, 4.5, 5];
    And you don't really need the <style> ... </style> block in the code if you don't make use of the zoom in effect.

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Creating your own image sliders within Xara

    I created an approach similar to Egg's/siran's over three years ago, which seems to have similar characteristics.
    Perhaps someone can critique mine? http://www.talkgraphics.com/showthre...929#post474929

    This was a later approach using a Presentation sub-site - http://www.talkgraphics.com/showthre...ent-Slideshows

    None of the X365 Web Animations were around at the time but they would fit in readily as the sub-pages are not just images, they are Xara pages with all capabilities that you can throw into a page.

    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

  4. #4
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating your own image sliders within Xara

    Hi Acorn,

    one of those is where the idea is taken from. I mentioned that when I first posted such a slideshow in this post.
    So there should not be a big difference I think.

  5. #5
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,486

    Default Re: Creating your own image sliders within Xara

    Well, I created a tutorial that was just like this HERE (Just kidding!) Nice work all of you.

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

    Default Re: Creating your own image sliders within Xara

    siran.
    And you don't really need the <style> ... </style> block in the code if you don't make use of the zoom in effect.
    Yes I understood that, it was just that half way through the tutorial with the zoom effect active and a cross-fade page transition on the slider images it looked rubbish, so I removed the 'htmlclass=zoomThis' name from the images.
    I've changed the page transition to 'flip vertically' so if anyone want's to know what it looks like with image zooming click HERE
    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
    Feb 2014
    Location
    Toronto, Canada
    Posts
    792

    Default Re: Creating your own image sliders within Xara

    Thanks Team "EggSiranAcorn", you guys are awesome and dangerously creative when working together. We have a great future here at Talk Graphics.

    Thank you for all that great support.

    Ciao

    Roly

 

 

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
  •