Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Simple Carousel using jQuery

    In a separate Thread, I (foolishly) suggested that I could implement a carousel using the same approach: https://www.talkgraphics.com/showthr...ages-is-loaded

    I have used the same graphics and their positions so do not panic that things are popping up all over.

    To create your own carousel:

    1. Collect a set of images, objects or graphics and centre them all together on your page.
    2. Give them all the Name htmlclass=illy.
    3. Add the simple Carousel Widget to your page as the topmost object.
    4. Done.


    To customise for yourself:
    1. The Widget has a Name UsesJQuery - don't remove this.
    2. Add a backdrop box or shape - don't Name it.
    3. The order of your objects is changed in the Page and Layer gallery.
    4. The fade in and out times and the show time can be altered in the Widget Body code:


    Code:
    <script>
    $(document).ready(function(){
    
    (function fade(idx) {
      var $illy = $('.illy');
      $illy.hide();
      $illy.eq(idx).fadeIn(1000).delay(8000).fadeOut(1000, function () {
        fade(idx + 1 < $illy.length ? idx + 1 : 0);
      });
    }(0));
    
    });
    </script>
    Acorn
    Last edited by Acorn; 24 July 2017 at 04:58 PM. Reason: TG is mucking around with attachment up loads again - I will add later.
    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
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Simple Carousel using jQuery

    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

  3. #3
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Simple Carousel using jQuery

    Thanks for that, Acorn. Might come in handy one day!

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

    Default Re: Simple Carousel using jQuery

    Excellent. Delay is way too long though. 2500-3000 works better IMHO. Works great with photos.

    Is there a way to have the photos overlap so one is fading in while the other is fading out?

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

    Default Re: Simple Carousel using jQuery

    Nice code, thanks for sharing.

  6. #6

    Default Re: Simple Carousel using jQuery

    Another great contribution acorn.
    I am wondering if these should all be compiled somehow or reposted in the plugins area for easier perusal?

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

    Default Re: Simple Carousel using jQuery

    Excellent fun carousel Acorn. Thank you for sharing
    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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Simple Carousel using jQuery

    Quote Originally Posted by sculptex View Post
    Another great contribution acorn.
    I am wondering if these should all be compiled somehow or reposted in the plugins area for easier perusal?
    I don't know of any "plugins area" !?

    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

    Default Re: Simple Carousel using jQuery


  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Simple Carousel using jQuery

    Quote Originally Posted by sculptex View Post
    Got you now. I took this area to be for Photoshop Plugins...

    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
  •