Click function image caption Jquery not working

Question

I'm trying to use this piece of code to reveal image captions of multiple images using a single link on a page. I've updated the code from a mouseenter function to a click function and added a new caption toggle that should reveal any captions associated with each image.

JS

$(function () {
    $(".thumb").click(function () { //replaced to click 
        var $t = $(this);
        var $d = $("<div>");
        $d.addClass("desc").text($t.attr("alt")).css({
            width: $t.width(),
            height: $t.height() - 20,
            top: $t.position().top
        });
        $(this).find('.caption').toggleClasss('hidden '); //added caption toggle
        $t.after($d).fadeTo("fast", 0.3);
        $d.click(function () { //replaced to click 
            $(this).fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        });
    });
});

HTML

<img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQidl6KX2jRWNeCA6jT_TjWG7NlI3aRiB_AcDsA9Y5owS2cr9G6" alt="Nice painting">
<a class="caption" href="#">Click Me!</a>

CSS

.thumb {
    cursor: pointer;
}
.desc {
    cursor: pointer;
    position: absolute;
    color: #000;
    text-shadow: 0 0 5px 2px #fff;
    z-index: 1;
    text-align: center;
    padding: 10px 0;
}
.hidden {
    display:none;
}

Here's the code in action. http://jsfiddle.net/hJMXa/

I'm pretty new to Jquery and I've sort of exhausted all the options that I could think of. Any suggestions??

Where is your desc div in your jsFiddle? I agree with Devish, your fiddle does nothing. Its useless at this moment. — Shivam, Jul 31 '13 at 03:21

score 2 · Answer 1 · answered Jul 31 '13 at 03:22

2

The jsFiddle does nothing. First of all, if you're trying to get this to work on multiple images, why do you only have a single image? Second, there are no DIV elements on that page and you have all the scripts assigned using the $d variable which = <DIV>. Third - use delegation:

$('body').on('click', 'img', function () { //replaced to click 
    $(this).fadeOut("fast", 0, function () {
        $(this).remove();
    }).siblings("img.thumb").fadeTo("fast", 1.0);
});

Good luck Mate.

answered Jul 31 '13 at 03:22

DevlshOne

8,357
1
29
37

DevlshOne, I completely do not disagree with you. Thanks for pointing out those mistakes. I'm still doing my best to understand java script. I will take your advice and run with it for now. – Sat Jul 31 '13 at 04:18

Shivam · Accepted Answer · 2013-07-31T15:51:08.940

Here is what I imagine your trying to achieve:

var img = $('img'),
    div = $(img.data('target')),
    caption = img.attr('caption'),
    someLink = $('a');

someLink.one('click', function() {
    div.append(caption).hide().slideDown();
    $(this).remove();
    return false;
});

~~old jsFiddle~~

UPDATE

captionToggle.init({
    container: '.img_caption_container',
    loader: 'div.loader',
    link: 'a.link',
    slideDownFx: 'slideDown',
    slideUpFx: 'slideUp',
    showText: 'Hide Caption!',
    hideText: 'Show Caption!'
});

var captionToggle = {

    init: function(config) {

        $.each($(config.container), function() {
            var $this = $(this),
                $caption = $this.children('img').eq(0).attr('caption'),
                $loader = $this.children(config.loader).hide(),
                $link = $this.children(config.link);

            $link.on('click', function() {
                if ( $loader.text().length == 0 ) $loader.append($caption);

                if ( $(this).text() == 'Show Caption!' ) {
                    $loader[config.slideDownFx]();
                    $(this).text(config.showText);
                } else {
                    $(this).text(config.hideText);
                    $loader[config.slideUpFx]();
                }

                return false;
            });
        });
    }
}

JSFIDDLE

Shivam. I appreciate you input, but it's not quite what I had in mind. I want the link to stay visible at all times while the image caption fades in and out in accordance with clicking that link. Thoughts and how I should go about this? — Sat, Jul 31 '13 at 04:20
Shivam. That's pretty close to what I had in mind. Is there a way to get the caption to appear on top of the image itself while fading the image slightly? — Sat, Jul 31 '13 at 17:24
If you want the caption to appear on top of the image, you can easily just move the `
` above the image. Fading effects, im sure you can handle that. — Shivam, Jul 31 '13 at 19:09

Click function image caption Jquery not working

2 Answers2