WebMatrix 和 LightBox 似乎没有拉出正确的图像答案

【问题标题】：WebMatrix and LightBox don't appear to be pulling correct ImageWebMatrix 和 LightBox 似乎没有拉出正确的图像
【发布时间】：2014-03-26 18:13:25
【问题描述】：

我不熟悉编码和使用 WebMatrix 中的 Bakery 模板。我已经实现了 LightBox，它似乎可以正常工作，但是，它似乎并没有拉出正确的图像。在我的页面上，我在屏幕上显示了缩略图。当您单击时，我正在尝试打开“非缩略图”大小的图片，您可以看到更多细节。但是，它看起来仍然像缩略图大小。我的 ~\Images\Products 图片有一个文件目录结构，这是大图像所在的位置。然后我有 ~\Images\Products\Thumbnails 小图像。这是我显示灯箱的代码。

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

提前感谢您的帮助

【问题讨论】：

标签： thumbnails webmatrix lightbox2

【解决方案1】：

我在上一个问题中建议您删除的面包店模板的正确代码是

@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 Lightbox v2.6下载
在 Webmatrix 3 中从 Bakery 模板创建一个新站点
将 Lightbox-2.6.min.js 从 Lightbox 下载文件的 js 文件夹中复制到新网站的 Scripts 文件夹中
将 Lightbox.css 从 Lightbox 下载的 css 文件夹复制到新网站的 Content 文件夹中
在新站点的根目录中创建一个新的 img 文件夹，然后从 Lightbox 下载的 img 文件夹中将 close.png、loading.gif、prev.png 和 next.png 复制到其中
如下修改新站点_SiteLayout.cshtml的head部分

<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.cshtml 内容替换为

@{
    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>

现在，如果您运行新网站，您应该会看到如下内容：

【讨论】：

谢谢，我试过了。谢谢你的建议。我喜欢 LightBox 如何通过您的修复浏览我的图像。但是，它不会拉入全尺寸图像，它只会以缩略图大小弹出。我列出的代码是您的代码，我曾尝试使用路径中的缩略图，然后将其删除。两者的结果相同。
抱歉，关于删除原帖。只是不想让我的新问题迷失在所有细节中。