Welcome to TalkGraphics.com
Page 1 of 5 123 ... LastLast
Results 1 to 10 of 44
  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    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

    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

  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
    18,448

    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,650

    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
    22,090

    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

    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

  7. #7
    Join Date
    Feb 2014
    Location
    Toronto, Canada
    Posts
    795

    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

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

    Default Re: Creating your own image sliders within Xara

    Quote Originally Posted by roly View Post
    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
    Roly, it is purely the interrogative nature of TG that inspire us to delivering better.

    Just grateful there is a fourth in the group, as yet, whose name starts with an R.

    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

  9. #9
    Join Date
    Aug 2015
    Location
    DE
    Posts
    141

    Default Re: Creating your own image sliders within Xara

    These are indeed some very nice collaboration results!
    The results I saw so far have a website banner quality and are set to auto-run. If you guys need another intellectual challenge
    and have time to spare maybe consider also a different version of Slider? A nice quasi-native alternative to Xara's Image Slider
    Widget sure was welcome, as the inbuilt version has various drawbacks:

    • Xara's version assigns generic names to exported files, which SEO wise is not a good thing at all.
    • One has no advanced control about the Slider styling (arrows) and Caption placement. Ideally one could just draw elements inside Xara
      and write down text, name these entries and they take their function in the exported file (and in all variants).
    • Several very attractive transition effects, such as Ken Burns Effect aren't available in the Xara version.
    • Xara's slider doesn't allow for local file hosting, which for some users is a NoGo.
    • One needs to be online and to log in to edit existing slideshows
    • One will not be able to edit existing Xara widget based sideshows if one decides not to renew the 365 license.
      Here one really loses functionality, not just access to library content.

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

    Default Re: Creating your own image sliders within Xara

    Quote Originally Posted by hoja View Post
    These are indeed some very nice collaboration results!
    The results I saw so far have a website banner quality and are set to auto-run. If you guys need another intellectual challenge
    and have time to spare maybe consider also a different version of Slider? A nice quasi-native alternative to Xara's Image Slider
    Widget sure was welcome, as the inbuilt version has various drawbacks:

    • Xara's version assigns generic names to exported files, which SEO wise is not a good thing at all.
    • One has no advanced control about the Slider styling (arrows) and Caption placement. Ideally one could just draw elements inside Xara
      and write down text, name these entries and they take their function in the exported file (and in all variants).
    • Several very attractive transition effects, such as Ken Burns Effect aren't available in the Xara version.
    • Xara's slider doesn't allow for local file hosting, which for some users is a NoGo.
    • One needs to be online and to log in to edit existing slideshows
    • One will not be able to edit existing Xara widget based sideshows if one decides not to renew the 365 license.
      Here one really loses functionality, not just access to library content.
    hoja, just to check against bullets one and four. If I have 100 quality files, all beautifully named, then you don't want to have to add them to your Xara design but access then for a hosted drive under the main URL of the site, e.g., <site>.index.htm and a folder <site>/Posh Pics/ ?

    Including click objects to drive events, within Xara, necessarily implies any presented image should include hyperlinks and web animations. If this is so, I think it would exclude local file hosting. This means designing two generic widgets.

    Acorn - the SEA Board
    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

 

 

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
  •