CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-cycle
user2258356
user2258356

Reputation: 1

Div on top of jquery cycle plugin

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!

Upvotes: 0

Views: 595

Answers (1)

lucuma
lucuma

Reputation: 18339

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%;
}

Upvotes: 1

Related Questions