0

UPDATE: I figured it out thank goodness... So the key was to make the position: absolute and take out the bottom: 400px on the last thing on my CSS.

I'm trying to make a slide show of images that fade in and out when the circular buttons are clicked. There are 4 pictures and will be 4 circular buttons, so if I click the 3rd button the 3rd pic will fade in. However, my code isn't doing it properly. I reckon I'm using index() improperly? The pictures aren't appearing. They just fade in halfway through and then fade back out and then all the pictures disappear altogether. I think it's because of my position:relative on the ".pic"s. Help please!

Here's my HTML:

<body>
<div class="wrapper">
    <div class="image_frame">
        <div src="" class="first"></div>
            <img src="images/galaxy.jpg" class="gala pic">

            <img src="images/aurora.jpg" class="auro pic">


    </div>

    <div class="buttonholder">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
</html>

Here's my CSS:

html, body {
    background: black;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 800px;
    margin: 0 auto;
    padding: 0;
}

.image_frame {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

img {
    width: 700px;
    height: 400px;
    padding-top: 10px;
    float: left;
}


.gala {
    display: block;
    position: relative;
}

.buttonholder {
    display: block;
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

ul li {
    list-style: none;
    height: 3px;
    width: 3px;
    float: left;
    background: #efefef;
    padding: 10px;
    margin: 0 5px;
    border-radius: 100px 100px 100px 100px;
    cursor: pointer;
    text-indent: -9999px;
}

.button_normal {
    background: #efefef;
}

.selected {
    background: grey;
}


.pic {
    position: relative;
    bottom: 400px;
}

And here's my JS

$('ul li').click(function(){
    $('img').fadeOut(300);
    var listPos = $('ul').index(this);
    $('img').eq(listPos).fadeIn(300);
});
bigpotato
  • 26,262
  • 56
  • 178
  • 334

1 Answers1

0

To minimally change your code replace your code

var listPos = $('ul').index(this);

with this:

var listPos = $('ul li').index(this);

or, better:

var listPos = $(this).index();

To answer the second part of your question you might want to refer to this answer: How to overlay images, or this Image over Image CSS

Community
  • 1
  • 1
Vlad
  • 2,475
  • 21
  • 32