Skip to main content
trevorh27446796
Participating Frequently
March 31, 2017
Question

Again another easy Button question

  • March 31, 2017
  • 2 replies
  • 221 views

Captivate 7 user again a nice easy question

I now have one button and every time it is clicked I want to show 10 images randomly

any ideas

    This topic has been closed for replies.

    2 replies

    Lilybiri
    Legend
    March 31, 2017

    Do you want HTML5 output or SWF output?

    trevorh27446796
    Participating Frequently
    April 3, 2017

    SWF format currently

    Lilybiri
    Legend
    April 3, 2017

    Do you want to try the solution proposed by TLCMediaDesign? I am not sure at all that it will work for SWF output.

    If you want to keep to Captivate, you would need JS anyway to generate a random number. Then use a conditional advanced action to show the image corresponding to that random number. Generating random numbers in Captivate is explained in this blog post:

    Playing with Numbers - part 1 - Captivate blog

    TLCMediaDesign
    Inspiring
    March 31, 2017

    You could do a nice presentation with effects using jQuery cycle. You would need to create an HTML page with the images and zip it all together.

    Insert as an HTML5 animation initially hidden, then show it with the button.

    This is a sample of a page that does what you want. Just name your image "one", "two" and so on.

    <!doctype html>

    <html>

    <head>

    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>

    <style>

    #pics {

    margin: 0 auto;

    width: 968px;

    height: 248px;

    }

    </style>

    <script>

    $(window).load(function()

    {

    $('#pics').cycle({

        fx      : 'fade',

        speed   : 1000,

    random  : true,

    timeout : 1000

    });

    });

    </script>

    </head>

    <body>

    <div id="pics">

    <img src="one.png" alt="" width="968" height="248">

    <img src="two.png" alt="" width="968" height="248">

    <img src="three.png" alt="" width="968" height="248">

    <img src="four.png" alt="" width="968" height="248">

    </div>

    </body>

    </html>