How to write text below the images in slide show? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I want to write text below of every images in the slide show (Every image contains unique text and that should change according to the image)

var isStopped = false;

function slideSwitch() {
    if (!isStopped) {
        var $active = $('#slideshow IMG.active');

        if ($active.length == 0) $active = $('#slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({
            opacity: 0.0
        })
            .addClass('active')
            .animate({
            opacity: 1.0
        }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }
}

$(function () {
    setInterval(function () {
        slideSwitch();
    }, 1500);

    $("#slideshow").hover(function () {
        isStopped = true;
    }, function () {
        isStopped = false;
    });
});

Fiddle

Answer 1

You can add a unified div for image caption, that contain the image's alt text.

Demo

<div class="caption"></div>

and add the following to your javascript:

$('div.caption').html("<caption>"+$active.attr('alt')+"</caption>");

Answer 2

One possible solution is that you get the value from image alt tag and display it.

add the following line in your slideSwitch function

$('selectorID/Class').text($active.attr('alt'));

Demo