Div on top of jquery cycle plugin

0
votes

I am using the jquery cycle plugin and I want to add a section over the slides show where people can log in. This an example how I would like it to look.

mycampus.astate.edu

I understand how the cycle plugin works, I just can't figure out how to put things on top of it. I would really appreciate any assistance provided.

Thanks!

1
jqueryjquery-pluginsjquery-cycle
Just set a higher z-index in the CSS for your page: developer.mozilla.org/en-US/docs/CSS/z-index - Blazemonger
@user2258356 In general you should mark the correct answer by clicking the checkmark next to the one that helps you. This ensures that future users are also helped and is how Stack Overflow works. - lucuma

1 Answers

1
votes

You can easily achieve this using a few of the options for the slideshow:

First, let's add the login box, in my example it has id login and we will also tell the plugin to select the slides based on the selector '> div.cycle-slide' so that the login div isn't considered a slide. Lastly, we just need to make sure and set the z-index of the login box to be above the slides.

Example: http://jsfiddle.net/lucuma/87FUR/3/

HTML:

 <div class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="2000" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade">
    <div id="login">Your Login here</div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/" />

    </div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/ff0000" /> 

    </div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/" />

    </div>
</div>

CSS:

div.cycle-slideshow {
    width: 550px;
    height: 550px;
}
#login {
    position: absolute;
    width: 200px;
    height: 400px;
    background-color:blue;
    top: 0;
    z-index: 99999;
    opacity: .5;
}
img {
    display:block;
    max-width:100%;
}