Insert Slideshow

whitejamest
whitejamest

Hi folks, 

I'm trying to figure out how to use the "insert slideshow" function, and so far in all my searching I can't find any information. I see where I can click "insert slideshow" when editing a page, but I can't figure out how to add any images to it. There is just the "placeholder.png" listed. 

Can anyone advise on how to use this function? What I'd really like is for players to land on the homepage and see an automatically playing slideshow of images that set the mood for the campaign. 

Thanks for any advice! 

Comments

  • cgregory
    cgregory
    Posts: 780 edited September 2018

    Sounds like you are using the CkEditor, many of the buttons don’t actually work yet. Personally, i prefer the textile editor.  However, since you are an Ascendent  member you can build a slideshow using css and html.

    it isn’t very hard to do. I’ll post code for it after my game. Basically, you just need to plug in your picture’s urls and the timing for the pictures to be shown. The main page of my xcom campaign where the aliens appear over the sun is an example of a zoom fade it-fade out slide show animation.

    Btw your campaign looks good.
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • whitejamest
    whitejamest
    Posts: 3

    Thanks for the reply cgregory, your XCOM campaign page looks awesome. I'd love to do something 1/10 as cool as that. 

  • cgregory
    cgregory
    Posts: 780 edited September 2018

    Basically there are two parts to creating a slideshow. The HTML and the CSS.

    For the HTML it is fairly basic. Create a div to contain everything (I named mine slideshow even though I never did CSS on that div class, I wanted the option). The create an image class for each image in your slideshow, in my case aliens1, aliens2, etc.  You may need a couple of line breaks after in order to make sure your front page has space to display your slideshow. You can play around with the image top, width and height to figure out what works best for your images.

    <div class="slideshow">

    <img class="aliens1" style="position:absolute;  top:100px; left:50%; width:100px; height:124px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/637473/XEU_Sectoid.png?1473195394">;

    <img class="aliens2" style="position:absolute;  top:100px; left:50%; height:124px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/637773/thinman_02.png">;

    <img class="aliens3" style="position:absolute;  top:100px; left:50%; width:100px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/630636/image.png">;

    </div>

    </br>

    </br>

    </br>

    </br>

    The second part is the CSS and it contains a two parts.  The first part is the keyframe to fade the images in and out over a time frame that gets defined later.

    @keyframes blurFadeInOut{

      0%{    opacity: 0;

            text-shadow: 0px 0px 50px #5b85e4;

                    -ms-transform: scale(1.3);

            transform: scale(1.3);

        }

        20%,75%{

            opacity: 1;

            text-shadow: 0px 0px 1px #5b85e4;

            transform: scale(1);

        }

        100%{

            opacity: 0;

            text-shadow: 0px 0px 60px #5b85e4;

            transform: scale(0);

        }

    }

    The second part of the CSS is the timing for the individual images

    .aliens1 {

       opacity: 0;

       animation: blurFadeInOut 3s 1 ease-in forwards;

       animation-delay: 1s

    }

    .aliens2 {

        opacity: 0;

       animation: blurFadeInOut 3s 1 ease-in forwards;

       animation-delay: 5s

    }

    .aliens3 {

       opacity: 0;

       animation: blurFadeInOut 3s 1 ease-in forwards;

       animation-delay: 10s

    }

    opacity is the starting opacity you choose 0 to start the images hidden.

    animation is calling the animation keyframe that you defined earlier on (in my case blurFadeInOut) next is the duration of the animation (in this case 3 seconds), 1 is the number of times to display the animation, ease-in is basically a slow start to the animation. forwards is the fill mode.

    animation delay is how long before starting that specific animation. You can combine it with the animation duration to determine the timeline when each animation starts and finishes.

     

    You can read more on animations at w3schools

    https://www.w3schools.com/css/css3_animations.asp

     

     

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • whitejamest
    whitejamest
    Posts: 3

    Thanks very much cgregory for taking the time to post all that. I look forward to giving it a try! 

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions