简易摄影画廊实现指南

在寻找一个基于从文件夹而非数据库中挑选图片的摄影画廊实现方案时,并没有找到合适的。也许应该更努力地寻找!无论如何,以下是对实现一个从文件夹中挑选图片的摄影画廊的简单方法的见解。

在Visual Studio 2017中实现了这个功能,作为一个MVCASP.Net 4.6.2应用程序。可以根据需要调整到选择的框架版本,并且可以提取到一个web-forms应用程序中。没有测试过这种情况,但通过一些小小的修改,它应该可以工作。

请注意,该应用程序使用了jquery和bootstrap,但没有使用其他复杂的库。

使用代码

让开始吧!首先,打开附带的项目并检查代码。在大多数情况下,代码相当简单,应该能够将工作的部分提取到自己的应用程序中——这是设计得尽可能简单。

工作原理

如果还没有一个应用程序来应用这个画廊,应该打开选择的Visual Studio并创建一个MVCweb应用程序。可以接受默认设置,因为这不会影响接下来的步骤。

首先,创建一个文件夹来存储图片。将其命名为"Photos"。在那个文件夹下面,创建了一个名为"Other"的子文件夹。可以在主文件夹下创建任意数量的子文件夹,尽管这可能会变得难以跟踪。记住,这是一个简单的解决方案,不是一个企业级的图片画廊解决方案!

"Photos"文件夹包含所有默认的图片;那些想立即展示的图片,而其他文件夹包含子集的图片或者需要深入挖掘才能找到的图片。

现在需要一个类来保存所有图片——将其命名为"Photos"(显然,缺乏想象力)。

public class Photos { public string Path { get; set; } public string Description { get; set; } public Photos(string path, string description) { Path = path; Description = description; } }

这里没有什么魔法;需要获取图片的位置路径和一些描述性文本。

接下来,需要一种方法将图片导入模型(类),这样就可以传递适当的图片集到视图。

一个合理的方法是创建一个继承自模型列表的类,如下所示:

public class PhotoModel : List { public PhotoModel(string folder) { DirectoryInfo di = new DirectoryInfo(folder); foreach (var file in di.EnumerateFiles("*.jpg", SearchOption.TopDirectoryOnly)) { var p = new Photos(string.Concat(folder, file.Name), Path.GetFileNameWithoutExtension(file.Name)); Add(p); } } }

在构造函数中,可以遍历给定的文件夹,并枚举该文件夹中的所有文件。

为了将所有内容传递到视图,需要在Controller对象中添加代码来实例化该视图:

public ActionResult Gallery(int id) { string folder = "~/photos/"; switch (id) { case 1: folder = "~/photos/other/"; break; case 0: folder = "~/photos/"; break; } return View(new PhotoModel(folder)); }

强调了这是简单的,因此在此处硬编码了照片文件夹的路径。可以根据需要提取这部分并使其可配置,或者认为更好的方式。无论如何,必须告诉想要它从哪个路径获取图片。

视觉方面

已经涵盖了所有的代码,让来看看视图。

首先,需要添加一个菜单选项来驱动页面——通过在Views/Shared/_Layout.cshtml中添加一行来实现。

<li>@Html.ActionLink("Gallery", "Gallery", "Home", new { id = 0 }, null)</li>

注意,通过告诉Controller想要显示默认画廊来预加载。如果不这样做,它将会出错。

现在在Views/Home下添加一个名为Gallery.cshtml的页面。这需要四件事:

  • 添加CSS和JavaScript
  • 一种切换文件夹的方法
  • 一种显示所有找到的图片的方法
  • 一种在弹出窗口中显示单个文件夹的方法

还需要包括一些CSS和JavaScript,这将对页面进行样式设置,并给显示弹出窗口的能力——文件名为gallery.css和gallery.js。

随意检查并更改CSS,里面没有什么魔法。JavaScript简单地显示了一个隐藏的div,将选定的图片放入一个新的图片控件,并使用该图片的alt文本作为弹出窗口上的描述性文本。

视图的主要部分是foreach循环,它将图片渲染到页面上,分配来自类的值。

foreach (var photo in Model) { // 渲染图片的HTML代码 }

在下面,描述模态弹出窗口的HTML片段:

<div id="divimage" class="modal"> <img class="modal-content" id="modalimg"> <div id="caption"> </div> </div>

要点

这对工作得很好——如果这不够复杂,或者需要从数据库加载图片,那么这个解决方案不适合。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485