2

ENLARGEリンクをクリックして、ファンシーボックスを開きます。

ここに画像の説明を入力してください

これまで私が持っていたのは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が開きます）、画像がページに表示されなくなります。

どうしたらいいのかわからない。私のコードは混乱していますか？別のポリシーに従う必要がありますか？

4

2 に答える 2

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

ID（ただし、fancyboxを要素のにバインドしようとしているため、1つの要素のみが許可されるため、ギャラリーにしたいコードは表示されません）

...次に、コードのどこかに追加します

$(document).ready(function(){
  $("#enlarge").fancybox();
});
于 2012-10-14T22:47:52.953 に答える
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>";
}

したがって、1つのリンクには、ポップアップ用のonclickイベントハンドラーがあり、もう1つのリンクには、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 に答える