jQuery: click() function doesn't work with PrettyPhoto

I am using PrettyPhoto in a website. It shows an inline content when you click an image.

<a href="#verObra" rel="prettyPhoto">Work name.</a>

The inline content to show is:

<div id="verObra1" class="verObra">
    <div class="galObra">
        <div id="imgAmpliada">
            <img src="images/showObra.jpg" alt="" />
        </div><!-- /#Ampliada -->

        <ul class="thumbs">
            <li><a href="#" rel="prettyPhoto[pp_gal]"><img src="images/thumb.jpg" alt=""/></a>
            <li><a href="#" rel="prettyPhoto[pp_gal]"><img src="images/thumb.jpg" alt=""/></a>
        </ul>
    </div><!-- /.galObra -->
         <div class="descObra">
             <h3>Titulo de la obra</h3>
             <p>The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p>
         </div><!-- /.descObra -->
</div><!-- /#VerObra1 -->

I want that when you click in a thumbnail (.thumbs li a) in the modal window, it changes the above image (#imgAmpliada img). I've tried with this code, but nothing:

$(function() {
    $(".thumbs li a").click(function() {
        var image = $(this).attr("rel");
        $('#imgAmpliada').hide();
        $('#imgAmpliada').fadeIn('slow');
        $('#imgAmp开发者_C百科liada').html('<img src="' + image + '"/>');
        return false;
    });
});

$("a[rel^='prettyPhoto']").prettyPhoto({show_title: false, default_width: 800});

Please, could someone explain me why it is not working? Thanks!

The image src is supposed to be a url, but you are setting it to what appears to be some expression.

prettyPhoto[pp_gal]

I'm not sure if the Pretty Photo plugin is supposed to do something with that, but if its some valid variable defined in your script, maybe you can use eval?

var image = eval( $(this).attr("rel") );

If the ul.thumbs is already placed on the page you can use:

$(".thumbs li a").click(function() {
    var imagepath = $('img', this).attr('src');
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder
    var filename = imagepath.replace(/^.*\\/, '')
    $('#imgAmpliada').hide();
    $('#imgAmpliada img').attr('src', filename);
    $('#imgAmpliada').fadeIn('slow');
    return false;
});

Or if the div is placed dynamically the div is not yet bind. Use the live version instead:

$(".thumbs li a").live('click', function() {
    var imagepath = $('img', this).attr('src');
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder
    var filename = imagepath.replace(/^.*\\/, '')
    $('#imgAmpliada').hide();
    $('#imgAmpliada img').attr('src', filename);
    $('#imgAmpliada').fadeIn('slow');
    return false;
});

I just solved the same issue (registering jQuery events inside an inline occurence of PP). The issue is that PP is cloning your div code. So all your JS code works perfectly but in your original div, not in the new one inside PP...

The solution is pretty easy : just take an id of an element of the PP code (I personally used #pp_full_res but any id works) and use jQuery descendant selector to bind the event to the right elements. In your case that would be something like :

$("#pp_full_res .thumbs li a").live('click', function() {
    var imagepath = $('img', this).attr('src');
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder
    var filename = imagepath.replace(/^.*\\/, '')
    $('#imgAmpliada').hide();
    $('#imgAmpliada img').attr('src', filename);
    $('#imgAmpliada').fadeIn('slow');
    return false;
});