1
この質問はもう少し長くなり、ごめんなさい：
asp mvcとJQueryで画像ギャラリーを作成するには、数日間最善の解決策を探します。
主な問題は、ユーザーが親指をクリックしたときに画像を表示することです。
ブラウザ全体を黒く見せ、中央（幅/高さ100％）の画像にしたいです。
私は何かを作ったし、それは動作します。しかし、私が修正していないいくつかの問題があります。
ここで私はそれをやった：
私はImagesControllerとインデックスのビューを持って、そのビューには画像の親指が含まれています。 ImageIDイメージタグのname属性に格納します。親指の画像上のユーザーのクリックが、私はこのjQueryの関数を呼び出すとき：スマートな方法で画像のプレビューを作成/改善する
<div id="bigWrap" style="background: #000; position: fixed; top: 0; left: 0; width: 100%;
height: 100%;">
<div id="leftPage" style="width: 100%; height: 100%; background: #000; float: left;
text-align: center; position: relative;">
<img id="imgDis" src="@Url.Content("~/" + Model.Path)" alt="@Model.MediaId"
style=" max-width: 90%;
max-height: 90%; " />
<div style="position: absolute; top: 1%; right: 0px;">
<input id="closeImage" type="image" src="btnClose.png"
onclick="$('#bigWrap').remove(); $('body').css('overflow', 'auto');" />
</div>
<div style="position: absolute; top: 45%; right: 0px;">
@using (Html.BeginForm("Next", "Images", FormMethod.Post, new { id = "nextImage" }))
{
@Html.HiddenFor(a => a.MediaId);
@Html.HiddenFor(a => a.Path);
<input id="btnNext" type="image" src="btnNext.png" />
}
</div>
</div>
</div>
がnextユーザーがボタンをクリックして、私は呼ん：
$('.imageThumb').live('click', function (e) {
e.preventDefault();
$.ajax({ type: "POST",
url: '@Url.Content("~/Images/Show")',
data: "imgId=" + $(this)[0].name,
success: function (d) {
$(document.body).append(d);
$(document.body).css("overflow", "hidden");
}
})
});
この表示ビューでは、画像選択した表示フルスクリーンブラウザビューで
$(function() {
$('#nextImage').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: "m_id=" + $('#imgDis').attr('alt'),
beforeSend: function (xhr) {
$('#bigWrap').empty();
},
success: function (result) {
$('#bigWrap').prepend(result);
}
});
return false;
});
});
次のActionMethodは、新しいモデル（画像）と同じShowビューを返します。
[HttpPost]
public ActionResult Next(int m_id)
...
return View("Show", model);
は今、私はこのアプローチを持っている問題は次のとおりです。
親指の画像上のユーザーのクリックが表示されますが、URLがまま
- ：http://localhost:xxxx/Images
- 次のボタンのURLをクリックするがまだ同じです。
- これは、画像/インデックスのときのみ機能します。私はhttp://localhost:xxxx/Images/Show?imgId=47のようなURLの変更（jqueryのコール・ショーアクションから）同じ機能を持つ他のビュー
から画像を開く 場合は、次のボタンは、まだ何も変わらないと私はビューを表示閉じるとき、私はブラウザに空のページを得ました。
私がここで作ったのは、ユーザーがインデックスページの画像を見て、ユーザーがURLに興味がない場合にはっきりと動作しました。しかし、私はこれを変更したいが、私はここで立ち往生している。だから何をすべきか、何を修正するか、何を変えるかは大歓迎です。
おかげ
あなたは、私はあなたが何をしたいのかを正確にやっているさまざまなプラグインの束については、以下のリンクを見て取る... jQueryプラグインを使用することをお勧めしますゼロから始めるといいです場合
はなぜこれを行うjQueryプラグインを使用していませんか？ – c0deNinja