Question

我想点击 ENLARGE 链接打开我的fancybox。

enter image description here

我现在所拥有的是一个ajax调用，所以我可以根据项目的ID填写我的图像：

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

在我的desciptionImageHelper.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打开）时，我的页面上的图片消失了。

我不知道该怎么办。我的代码乱了吗？我应该遵循另一项政策吗？

Answer 1

此行（在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();
});

Answer 2

我终于想出了一个隐藏.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>

但我必须解决的另一个问题是图像是通过帮助（.ashx）显示的。我通过将属性'type': 'image'放在fancybox上来解决这个问题！

已经有onclick事件时使用Fancybox jquery

2 个答案: