Question

我是WebMatrix中编辑和使用Bakery模板的新手。我已经实现了LightBox，它似乎正在工作，但是，它似乎并没有拉出正确的图像。在我的页面上，我在屏幕上显示缩略图。当您点击时，我正在尝试打开非缩略图＆＃39;大小的图片给你可以看到更多的细节。但是，它仍然看起来像缩略图大小。我有〜\ Images \ Products图片的文件目录结构这是大图像所在的位置。然后我有〜\ Images \ Products \缩略图用于小图像。这是我显示LightBox的代码。

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

提前感谢您的帮助

Answer 1

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

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

使用

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

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

enter image description here

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

1 个答案: