0

说明情况。

在 php 页面中，有一个动态生成的菜单，其中包含任意数量的项目/链接，如下所示：

<ul class="main-portf">
<li><a href="#" class="tabs" rel="1" title="item1" >item1</a></li>
<li><a href="#" class="tabs" rel="10" title="item2" >item2</a></li>
<li><a href="#" class="tabs" rel="10" title="item3" >item3</a></li>
<li><a href="#" class="tabs" rel="10" title="item4" >item4</a></li>
</ul>

上述菜单中的每个链接都显示了不同的项目库。每个画廊最多可以有 8 个项目（目前）。例如，单击第一个链接 (rel=1)，它将显示以下图库：

<div class="thumbspart" id="tabs-1">
<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

...

</div>

所有画廊都预先加载在页面中，并且没有任何内容填充 AJAX 调用。

所有画廊都在其容器内，id="tab-x"，其中 x 等于菜单链接的 rel 值。

每个图库项目都有 3“行”数据：图像缩略图、图像标题、图像描述/文本。

两个链接（在拇指和标题中）打开一个带有大图像和一些其他信息的模式。模态脚本（类似于灯箱）要求每个链接中都存在一个 rel 属性。基于该 rel 属性，它对所有画廊项目进行分组和计数。

该网站的所有者要求对拇指图像进行悬停效果。因此，当用户将鼠标悬停在图像上时，图像会有点褪色，并且会在其顶部出现一个新的小图像。单击新图像应打开模式。

问题

我的问题是新的悬停图像覆盖了带有附加链接的原始图像。所以我想添加一个新链接以及悬停图像，其中包含模式脚本工作所需的所有属性。

我的最终 js 看起来像这样：

$(".thumb").mouseenter(function () 
{
    var myurl = $(this).find("a").attr("href");
    var myrel = $(this).find("a").attr("rel");
    var mytitle = $(this).find("a").attr("title");


    var testVat = $(this).parent().parent().attr("id");
    var myVar = testVat.split("-");
    var myID = parseInt(myVar[1]);

    $(this).prepend('<a href="'+myurl+'" class="pozhov" rel="'+myrel+'" title="'+mytitle+'"></a>');
    $(this).find("a.testremove").attr('rel', 'rel-'+myrel); // rename rel to avoid conflict with wrong counter
    showGal(myID);
    $('.pozhov').fadeIn(0);

})
.mouseleave (function () 
{
        var myrel = $(this).find("a.testremove").attr("rel");
        var myVar = myrel.split("-");           
        $(this).find("a.testremove").attr('rel', myVar[1]); // restore rel name to original one             


    $('.pozhov').fadeOut(0).delay(0).queue(function()
    { 
        $(this).remove();           
    });
});

简而言之，当用户将鼠标悬停在图像内时：

  • 从现有网址获取我的数据
  • 创建一个新链接以包含与原始链接具有相似属性/属性的悬停图像
  • 将旧的 rel 属性重命名为其他内容，以避免与模式脚本冲突

当用户将鼠标悬停在图像之外时：

  • 恢复原始 rel 属性的旧名称
  • 删除虚假链接

这应该有效。但事实并非如此。图像上的模态将无法打开或显示错误的计数器或仅工作一次（第一次关闭后不会执行）。图片标题上的链接模式完美运行。

我用于此页面的更多 js 代码（以防它有所不同）为您服务：

// tabs galleries

$(".tabs").click(function () 
{   
    $(".tabs").removeClass("active");

    var myID = $(this).attr("rel");
    $(this).addClass("active");

    //hide all "tabs-xx" divs
    $("div[id^='tabs-']").hide();

    // show the one we want
    $("#tabs-"+myID).fadeIn(1000);
    showGal(myID);

return false;
}); 



// function to fire modal script after show/hide    
function showGal(i)
    {
        $("a[rel^='prettyPhoto[gal"+i+"large]']").prettyPhoto({
            // modal options
        });

        $("a[rel^='prettyPhoto[gal"+i+"small]']").prettyPhoto({
            // modal options
        }); 
    }

如果您想知道核心脚本：

  • jQuery 核心 1.7.2
  • 模态 prettyPhoto 脚本（灯箱克隆）
4

0 回答 0