WebMatrix和LightBox似乎沒有拉動正確圖片

我是新來的編碼和玩WebMatrix中的麪包模板。我實施了LightBox，它似乎在工作，但是，它似乎並沒有拉出正確的圖像。在我的頁面上，我在屏幕上顯示縮略圖。當你點擊，我試圖打開'非縮略圖'大小的圖片給你可以看到更多的細節。但是，它仍然看起來像縮略圖大小。我有一個文件目錄結構，用於我的〜\ Images \ Products圖片這是大圖片駐留的地方。然後我有〜\ Images \ Products \小圖片的縮略圖。這裏是我的代碼，我正在顯示LightBox。WebMatrix和LightBox似乎沒有拉動正確圖片

<a href="~/Images/Products/@p.ImageName" data-lightbox="Images" title="@p.Name"> 
    <img class="product-image" src="~/Images/Products/@p.ImageName" /> 
</a>

在此先感謝您的幫助

來源

2014-03-24 user3453337

的麪包店模板正確的代碼，我建議你在被你刪除以前的問題是

@foreach (var p in products) { 
    <li class="product"> 
    <a href="~/Images/Products/@p.ImageName" data-lightbox="Images" title="@p.Name"> 
     <img class="product-image" src="~/Images/Products/Thumbnails/@p.ImageName" /> 
    </a> 
    </li> 
}

它工作正常的我。

將來不要用答案清除你的問題，而是添加一條評論。

編輯

試試這個：從Lightbox 2 site燈箱V2.6

在WebMatrix中3

下載從麪包店模板
複製收藏-2.6創建一個新的站點。 min.js從您的Lightbox下載的js文件夾下載到您的新網站的Scripts文件夾中
拷貝lightbox .css從您的Lightbox的css文件夾下載到您的新網站的Content文件夾中
在您的新網站的根目錄中創建一個新的img文件夾並將其複製到它的close.png，loading.gif，prev.png和從您的收藏夾的文件夾img next.png下載
修改如下_SiteLayout.cshtml的新網站的頭部

<head> 
    <meta charset="utf-8" /> 
    <title>Fourth Coffee - @Page.Title</title> 
    <link href="~/Content/Site.css" rel="stylesheet" /> 
    <link href="~/Content/lightbox.css" rel="stylesheet" /> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
    <script src="~/Scripts/jquery-1.8.2.min.js"></script> 
    <script src="~/Scripts/lightbox-2.6.min.js"></script> 
    @RenderSection("Scripts", required: false) 
</head>

更換Default.cs與

@{ 
    Page.Title = "Home"; 

    var db = Database.Open("bakery"); 
    var products = db.Query("SELECT * FROM PRODUCTS").ToList(); 
} 

<h1>Welcome to Fourth Coffee!</h1> 

<div id="productsWrapper"> 
    <ul id="products" data-role="listview" data-inset="true"> 
     @foreach (var p in products) { 
      <li class="product"> 
       <a href="~/Images/Products/@p.ImageName" data-lightbox="Images" title="@p.Name"> 
        <img class="product-image" src="~/Images/Products/Thumbnails/@p.ImageName" alt="Image of @p.Name" /> 
       </a> 
      </li> 
     } 
    </ul> 
</div>

現在這個新網站的HTML內容，如果你運行你的新網站，你應該看到這樣的事情：

enter image description here

來源

2014-03-24 18:46:23 GmG

謝謝，我想，原來感謝您的建議。我喜歡LightBox如何通過您的修補程序瀏覽我的圖片。但是，它並沒有拉動全尺寸圖像，它只是以縮略圖大小彈出。我列出的代碼是您的代碼，我曾嘗試使用路徑中的縮略圖，然後將其刪除。兩者都有相同的結果。 – user3453337

對不起，關於刪除原來的線程。只是不希望我的新問題在所有細節上都迷失方向。 – user3453337

WebMatrix和LightBox似乎沒有拉動正確圖片

回答

相關問題