2012-03-16 62 views
1

這個問題會更長,我很抱歉:)
我搜索了幾天的最佳解決方案,使圖像庫在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); 

現在,我有這種方法的問題是:

  1. 當顯示拇指圖像的用戶點擊,但網址保持:http://localhost:xxxx/Images
  2. 當單擊Next按鈕URL仍然是相同的。
  3. 這隻適用於當我在圖像/索引。如果我 從一些其他觀點

功能相同(從jQuery的調用顯示操作),如http://localhost:xxxx/Images/Show?imgId=47網址變更打開圖像,下一步按鈕仍然改變不了什麼,當我關閉顯示視圖我在瀏覽器中有空白頁面。

所以我在這裏做的顯然適用於用戶從索引頁面觀看圖像,並且用戶對url不感興趣。但我想改變這一點,但我卡在這裏。所以任何想法做什麼,修理或改變一切都是值得歡迎的。

感謝

+0

爲什麼不使用jQuery插件,做到這一點? – c0deNinja 2012-03-19 17:25:43

回答

2

我同意。你爲什麼要再次發明輪子?那裏有很多很好的插件。我最喜歡的當然是Fancybox。它有一個很好的UI ...檢查these demos。我敢說,這是最下載的燈箱/模式框在那裏。

也有不同的方案很好的例子,像loading images from AJAXchange the background color

+0

如果我想使用FancyBox有什麼方法可以自定義它,例如在圖像的右側添加div並在該div中加載註釋? – 1110 2012-03-26 12:55:05

+0

像這樣http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html – JFK 2012-03-26 20:01:02

+0

是:)完全像那樣 – 1110 2012-03-26 21:04:33

0

如果你是好與從頭開始,我會建議使用jQuery插件......看看以下的鏈接,一羣不同的插件是在做你想做的事:

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

+0

我第一次被認爲使用燈箱(因爲我看到許多其他大網站使用它),但我沒有成功找到任何好的資源來學習如何定製它看起來像flickr用戶界面例如。這就是爲什麼我開始從頭開始構建。 – 1110 2012-03-19 19:40:47

0

考慮到上述問題:

1,2 - 當然的URL不會改變,因爲你正在使用AJAX,如果您通過AJAX獲得某些內容,則瀏覽器的網址不會自動更改,您必須在成功的Ajax調用後更改它。

3 - 您應該提供更多關於您如何完全調用Show動作的信息。看起來你正在得到你描述的結果,因爲你正在向你的show動作發出一個新的http get請求(並且正如所期望的那樣,瀏覽器只能得到show動作的結果),所以難怪在關閉圖像後你會看到空頁面,因爲頁面上沒有其他東西

即使你能夠克服這些問題。正如其他人所建議的,我覺得你應該真的考慮使用現有的解決方案(不管是jQuery插件還是nuget包)。

+0

實際上,只要您只更改網址的散列片段,您就可以在不重新加載的情況下更改網址。 mypage.com/gallery.aspx可以更改爲mypage.com/gallery.aspx#/photo/3617/beach_vacation/,這在AJAX重度應用程序中非常常見,並且FB和G +如何運行其照片系統。它允許您不僅更改ajax加載頁面的url,還會導致大多數瀏覽器爲這些頁面存儲一個歷史記錄對象,從而通過更改觸發加載的JS代碼的哈希標記使瀏覽器中的前進/後退導航正常工作正確的ajax內容。 – Brian 2012-03-26 14:29:31

+0

你完全正確,謝謝你的更正。 – Hari 2012-03-26 14:38:29