這個問題會更長,我很抱歉:)
我搜索了幾天的最佳解決方案,使圖像庫在asp mvc和jQuery。
主要問題是用戶點擊拇指時顯示圖像。
我想使整個瀏覽器視圖中心(寬度/高度100%)爲黑色和圖像。
我做了一些事情,它的工作原理。但是有幾個問題我沒有解決。
這裏我是怎麼做到的:
我有ImagesController和Index視圖,該視圖包含圖像大拇指。 ImageID我存儲了圖像標籤的名稱屬性。當拇指圖像用戶點擊我把這個jQuery函數:聰明的方式來使/改善圖像預覽
$('.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");
}
})
});
這個展會的看法是,顯示所選圖像的全屏瀏覽器視圖:
<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
按鈕,用戶點擊我打電話:
$(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);
現在,我有這種方法的問題是:
- 當顯示拇指圖像的用戶點擊,但網址保持:http://localhost:xxxx/Images
- 當單擊Next按鈕URL仍然是相同的。
- 這隻適用於當我在圖像/索引。如果我 從一些其他觀點
功能相同(從jQuery的調用顯示操作),如http://localhost:xxxx/Images/Show?imgId=47網址變更打開圖像,下一步按鈕仍然改變不了什麼,當我關閉顯示視圖我在瀏覽器中有空白頁面。
所以我在這裏做的顯然適用於用戶從索引頁面觀看圖像,並且用戶對url不感興趣。但我想改變這一點,但我卡在這裏。所以任何想法做什麼,修理或改變一切都是值得歡迎的。
感謝
爲什麼不使用jQuery插件,做到這一點? – c0deNinja 2012-03-19 17:25:43