Displaying a title and description on a jquery slideshow


Tags: javascript,php,jquery,html,css

Problem :

I have a preliminary jquery slideshow that I am trying to overlay a title and description on (starting with the title). The slideshow works by changing the margin-left by the width of the images. Right now all of the titles are on top of each other instead of one for each image. I'm planning on implementing next and previous buttons to this as well so instead of clicking the image I'll have next and previous functions.

EDIT: Okay apparently I wasn't clear on my question. All of the titles are stacked on top of each other right now, how do I get the titles to be on the correct images.

PHP/HTML

$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
    $pic_array[$count] = $row['pic_url'];
    $titles[$count] = $row['title'];
    $descriptions[$count] = $row['description'];
    $count++;
}
echo "<div id='slider'>
        <ul class='slides'>";
for ($x=0; $x < count($pic_array); $x++) {
    echo " <li class='slide'><img src= " . $dir . $pic_array[$x] . " /></li>";
    echo " <li class='title'>$titles[$x]</li>";
}
echo "   </ul>  
      </div>";

CSS

#slider {
    width: 450px;
    height: 250px;
    overflow:hidden;
    position:relative;
}
#slider .slides {
    display: block;
    width:10000px;
    height: 250px;
    margin:0;
    padding:0;

}
#slider .slide {

    float: left;
    list-style-type: none;
    width: 450px;
    height: 250px;
}
img {
    width: 450px;
    height: 250px;
}
.title {
    position:absolute;
    right:0;
    bottom:0px;
    padding: 1rem;
    left:0;
    color:white;
    background-color: rgba( 0, 0, 0, 0.25);
}

Javascript

$(function() {
    var width = 450;
    var slide_number = 0;

    var $slider = $('#slider');
    var $slides = $slider.find('.slides');
    var $slide = $slides.find('.slide');

    $slider.click(function () {
        $slides.animate({'margin-left': '-=' + width}, 0, function () {
            slide_number++;
            if (slide_number == $slide.length ) {
                slide_number = 0;
                $slides.css('margin-left', 0);
            }
        });
    });

});


Solution :

i cannot made regular comment on your topic so i'll write here.

try not to give .title class position absolute. that whay they all are on top of eachother.

your using overflow hidden so all your component need to be 450 width.

make both title and image <div>s into one <li>. maybe its solve your width problem.

good luck.


    CSS Howto..

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    How to configure simple_form to show validation status

    How to add new line in a Bootstrap button using CSS

    CSS - How do I float one element to the right inside the other div?

    How to Center Rotated text with CSS

    How to override w3.css for table border

    How can I ensure that no other text is on the same line as my heading tag?

    Why css3 slideshow does not work

    CSS help, how to target this link inside of div

    how to add css to selected row in treegrid GXT 3

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    How to center image while also aligning text to the right of image?

    html - how to make images stay on certain part of background

    How to create a template that will show only in IE6 using javascript?

    How to center an image in an img tag using CSS background position

    How to change lines in an angularJS+Bootstrap?

    How would I control the position of a drop down select menu?

    Timeline divs not showing in Safari 5

    jQuery .css, how to translate it into Javascript

    How to refer to a child class CSS

    How can I adjust my thumbnail which exceeds its designated area?

    How can I make all table cell sizes the same width in css?

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to develop Javascript and CSS and use minified versions when releasing?

    hide form with css3 and show default div.

    How to add CSS if element has more than one child?

    How to have multiple CSS color transitions on a single text line?

    How to hardware accelerate a box-shadow animation in CSS?

    CSS - How to align drop-down sub menu to the parent's right?

    How to use css in asp.net