Question

I am trying to implement a lightweight JQuery slider into my site. I want to be able to display pictures like they’re sitting within a graphic of a wooden frame, where the wooden frame overlaps slightly onto the edges of the photos. The slider is working and I have tried my hand at getting my transparent .png image frame mask file to lie on top of my slider div, but I am not having any luck. Could you please offer some insight? I think it is a CSS problem.

HTML:

<div id="container">
    <div class="mask"></div>
    <div id="slider">
        <div>
            <img src="images/1.jpg" alt="image01">
        </div>
        <div>
            <img src="images/2.jpg" alt="image02">
        </div>
        <div>
            <img src="images/3.jpg" alt="image03">
        </div>
    </div>
</div>

CSS:

#container {
    position: relative;
    width: 700px;
    height: 325px;
}

.mask {
    background: url('images/mask.png') no-repeat 0 0;
    width: 700px;
    height: 325px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
}

#slider {
    position: relative;
    width: 700px;
    height: 325px;
}

#slider > div {
    position: absolute;
    top: 0;
    left: 0;
}

JQuery:

$(function() {
    $("#slider > div:gt(0)").hide();

    setInterval(function() {
        $('#slider > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slider');
    }, 4000);
});

Thanks for your help!

jsFiddle: http://jsfiddle.net/qpL3B/

Answer 1

I’d suggest you use a plugin like jquery slide.

http://jquery.malsup.com/cycle/

Here is an example:

http://jsfiddle.net/lucuma/NFnCC/

The code is pretty simple:

$('#slideshow').cycle({fx:'fade'})


<div id="sliders">
    <img src="http://s15.postimage.org/wg26u64jf/mask.png" />
  <div id="slideshow">
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
</div>

​