Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Info Simple auto-playing Slideshow or Testimonial Viewer

    I have developed the project in https://css-tricks.com/snippets/jque...ing-slideshow/ for Xara utility.

    The shapes in the slider can be almost anything, any size and can be positioned anywhere on the page, including different layers, to suit your design.
    A bold statement and there will be limitations, I am sure, yet to be unravelled.

    What you need is the HTML code (head) contents applied into your design; the code is in the code Layer and will appear when you hover over the coloured "spiral" design.
    For each slide, add a Name of htmlclass="slider-content".
    All done.

    Start simply.
    Add the HTML code (head0 to a new design page.
    Pick a collection of images and stack them on top of each other and Name them all at once.
    I actually used a Name of htmlclass="slider-content boxed" to frame the images.
    "boxed" simply add a background, border and a shadow and is also used to present the code content mentioned above.

    I set up my demonstration design to actually show testimonials first off.

    In my instructions Layer, I have:
    • Stacked four text blocks and added Names of htmlclass="slider-content boxed" and "htmltextblock".
    • Added and grouped a Text inside Shape with a Name of htmlclass="slider-content".
    • Stack a further two text blocks to show positioning does not matter.


    Finally, if you hide the instructions Layer and unhide the images Layers, you will see an image slider in operation.
    One image is a Text Inside shape, just to show what can be done for captions.

    Demonstration design file: jQuery - Image collection (plus UsesJQuery).xar. Run it to see more hints.

    You can change the CSS as you wish.
    You can hide shapes and they will not appear in the slider.
    You can change the Layers around or move shapes up or down in their stack to re-order.
    Only alter the timings in the jQuery section that I have marked as bold red.

    There is no Next/Previous capability, or Pause.
    You can probably add hyperlinks to a slide.

    Pop-ups only ever open one of the images.
    I have not worked on adding Variants.

    I did say simple.

    Acorn
    Attached Files Attached Files
    Last edited by Acorn; 20 August 2018 at 02:46 PM. Reason: Corrected missing file component - use jQuery - Image collection (plus UsesJQuery).xar
    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

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

    Default Re: Simple auto-playing Slideshow or Testimonial Viewer

    Hi Acorn, I'm a visual guy as you know. Any chance of supplying a demo as at present I'm mystified. Egg.
    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

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

    Info Re: Simple auto-playing Slideshow or Testimonial Viewer

    Quote Originally Posted by Egg Bramhill View Post
    Hi Acorn, I'm a visual guy as you know. Any chance of supplying a demo as at present I'm mystified. Egg.
    Sorry Egg, I've supplied a file that, when run, cycles through some text blocks. Move them around the page, place them on separate layers. Clone one and change its layout or text. All will cycle. Remove the Name from any and it is just a normal text block.

    Yes, I could have just presented a set of images and say replace these with your own and no one would consider the potential.

    Here's one for you: Eggstravaganza.xar

    Acorn

    P.S. For some reason a shape I had primed with the UsesJQuery Name didn't copy through.

    Here is my original file, duly revised: jQuery - Image collection (plus UsesJQuery).xar.
    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
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Simple auto-playing Slideshow or Testimonial Viewer

    Thank you very much for that Acorn, works sweet as a pea! Saved away in my long list of you & Sirans work in my "Goody Sites" folder
    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

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

    Default Re: Simple auto-playing Slideshow or Testimonial Viewer

    Just so you know your efforts are appreciated and used Acorn.

    http://parkeston.com/sealink/
    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

 

 

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
  •