2

我想点击放大链接打开我的fancybox。

在此处输入图像描述

到目前为止，我拥有的是一个 ajax 调用，因此我可以根据项目的 id 填充我的图像：

...
xmlhttp.open("GET", "desciptionImageHelper.aspx?id=" + id, true);
...

在我的 deciptionImageHelper.aspx 上，我有一个查询，我可以在其中获取项目的所有图像：

while (reader.Read())
{
    litData.Text += "<a id='fancybox" + reader.GetInt32(0).ToString() + "' class='fancybox' rel='gallery1' onclick=\"javascript:imagePopup('" + reader.GetInt32(0).ToString() + "','" + reader.GetString(1) + "','" + reader.GetString(2) + "','" + reader.GetString(3) + "');\" ><img src=\"../helper/MediaImgHandler.ashx?imgid=" + reader.GetInt32(0).ToString() + "\"/></a>";
}

这while变成：

<a id='fancybox4' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('4','Alululu Scetch','Photograph','Photoshop');" ><img src="../helper/MediaImgHandler.ashx?imgid=4"/></a>
<a id='fancybox13' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('13','Allalalala','Magazine article','PDF');" ><img src="../helper/MediaImgHandler.ashx?imgid=13"/></a>
<a id='fancybox22' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('22','PHOTOOO','Photograph','PDF');" ><img src="../helper/MediaImgHandler.ashx?imgid=22"/></a>
<a id='fancybox23' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('23','New Media','Journal article','Digital 3D Model');" ><img src="../helper/MediaImgHandler.ashx?imgid=23"/></a>
<a id='fancybox31' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('31','New media added on Aluminium','Film (cinema)','Digital Video');" ><img src="../helper/MediaImgHandler.ashx?imgid=31"/></a>
<a id='fancybox32' class='fancybox' rel='gallery1' title='asdsad' onclick="javascript:imagePopup('32','hahahaahha','Design development drawings','Digital Video');" ><img src="../helper/MediaImgHandler.ashx?imgid=32"/></a>

左键单击图像，我得到了您在图片中看到的这个框。

代码是：

function imagePopup(id, title, media_type, format) {
        var popup = document.getElementById("imagePopup")
        popup.innerHTML = title + "<br /><span style='color:grey;margin-left:3px;'>" +
         media_type + " | " + format + "</span><br />" +
         "<a class='blueColor' onclick=\"javascript:getSummary(" + id + ",'m');" +
         "document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'none';displayMedia('" + title + "');$('#imagePopup').fadeOut('slow');\">SEE DETAILS</a><br />" +
         "<a id='enlarge' onclick=\"javascript:$('#fancybox" + id + "').attr('rel', 'gallery').fancybox();\" class='blueColor' >ENLARGE</a>";

        $('#imagePopup').css({ 'top': mouseY, 'left': mouseX }).fadeIn('slow');

    }

但它不能用作画廊，而且当我查看图片（fancybox 打开）时，它会在我的页面上消失。

我不知道该怎么办。我的代码是不是一团糟？我应该遵循其他政策吗？

4

2 回答 2

0

我终于想出了一个想法，用 .fancybox 类隐藏链接并在点击 ENLARGE 时触发它。

while (reader.Read())
{
       litData.Text += "<a onclick=\"javascript:imagePopup('" + reader.GetInt32(0).ToString() + "','" + reader.GetString(1) + "','" + reader.GetString(2) + "','" + reader.GetString(3) + "');\" ><img src=\"../helper/MediaImgHandler.ashx?imgid=" + reader.GetInt32(0).ToString() + "\"/></a>";
       litData.Text += "<a style='display:none' id='fancybox" + reader.GetInt32(0).ToString() + "' class='fancybox' rel='gallery1' title='asdsad' href=\"../helper/MediaImgHandler.ashx?imgid=" + reader.GetInt32(0).ToString() + "\" ></a>";
}

因此，在一个链接上，我有一个用于弹出窗口的 onclick 事件处理程序，而对于另一个链接，我有我的 href="../.ashx"。

 <a id='enlarge' onclick=\"javascript:$('#fancybox" + id + "').trigger('click');\" class='blueColor' >ENLARGE</a>

但我必须解决的另一个问题是图像是通过 helper(.ashx) 显示的。我通过将属性'type': 'image'放在fancybox上解决了这个问题！

于 2012-10-15T21:24:03.173 回答
0

这一行（在你的imagePopup()函数内）：

"<a id='enlarge' onclick=\"javascript:$('#fancybox" + id + "').attr('rel', 'gallery').fancybox();\" class='blueColor' >ENLARGE</a>";

可以很简单

"<a id='enlarge' rel='gallery' class='blueColor' >ENLARGE</a>";

（虽然我没有看到你希望它成为画廊的代码，因为你试图将 fancybox 绑定到ID一个元素，所以只允许一个元素）

...然后只需在您的代码中添加某处

$(document).ready(function(){
  $("#enlarge").fancybox();
});
于 2012-10-14T22:47:52.953 回答