Question

我在网站上使用PrettyPhoto。单击图像时会显示内嵌内容。

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

要显示的内联内容是：

<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 -->

我想在模式窗口中单击缩略图（.thumbs li a）时，它会更改上面的图像（#imgAmpliada img）。我试过这个代码，但没有尝试：

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

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

拜托，有人可以解释一下为什么它不起作用吗？谢谢！

Answer 1

图像src应该是一个url，但是你将它设置为看起来像某个表达式。

prettyPhoto[pp_gal]

我不确定Pretty Photo插件是否应该对此做些什么，但如果你的脚本中定义了一些有效的变量，也许你可以使用eval？

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

Answer 2

如果ul.thumbs已经放在页面上，您可以使用：

$(".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;
});

或者如果动态放置div，则div尚未绑定。请改用实时版本：

$(".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;
});

Answer 3

我刚解决了同样的问题（在内联出现的PP中注册jQuery事件）。问题是PP正在克隆您的div代码。因此，所有的JS代码都可以完美地运行，但是在原始的div中，而不是PP中的新代码...

解决方案非常简单：只需要获取PP代码元素的id（我个人使用#pp_full_res但任何id都有效）并使用jQuery后代选择器将事件绑定到正确的元素。在你的情况下，这将是：

$("#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;
});

jQuery：click（）函数不适用于PrettyPhoto

3 个答案: