Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fading Slideshow with Clickable Buttons

    Hello. I am very new to Javascript. I have been learning from online tutorials and have a question. I am trying to create a page with an automatic fading slideshow (no arrows, just a continuous loop). I would also like to have clickable buttons in front of the slideshow that remain stationary while the show is transitioning behind them. I know there are a number of plugins I can use to create the slide show, but I'm unsure if I can add the buttons to any of them. Can you point me in the right direction to a tutorial that would offer code for something like this or have any suggestions as to how I can accomplish this? I have attached a sample of what I mean. Thank you.
    Attached Thumbnails Attached Thumbnails Fading Slideshow with Clickable Buttons-design2a.jpg  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    By this you mean you want the buttons to be *ON TOP* of the slideshow? Effectively, the slideshow is a background for the buttons?

    If so, this is 100% a CSS issue. No JavaScript involved.

    You just have to have two <div>s positioned one on top of the other. You use CSS's z-index to indicate which is on top (higher value of z-index). Then in the <div> that is on top, you position your buttons where you want them. In the <div> on the bottom you run the slide show. Presto. You are done.

    Note that the <div> on top should have a transparent background, but it should get that by default. If you want to be really safe:
    Code:
    <style type="text/css">
    div#slideshow {
         position: absolute;
         top: 150px; left: 0px;
         width: 100%; height: 800px;
         z-index: 1;
    }
    div#ontop {
         position: absolute;
         top: 150px; left: 0px;
         width: 100%; height: 800px;
         z-index: 10;
         background-color: transparent;
    }
    ,,,
    </style>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •