Ember Light Gallery是一个用于Ember.js应用程序的基于Light Gallery的轻量级照片库插件。本教程将详细介绍如何使用npm包ember-light-gallery创建自己的Ember.js图库。
安装
要在您的应用程序中使用npm包ember-light-gallery，请在终端中运行以下命令：
ember install ember-light-gallery
配置
为了使用ember-light-gallery，在您的应用程序中将它作为一个组件的形式引入：
import LightGallery from 'ember-light-gallery/components/light-gallery';
export default Ember.Component.extend({
/* your component code */
});使用
在你的应用程序中使用ember-light-gallery时，你需要两个东西：一个包含图像的数组和一个带有照片库的div。
图像数组
首先，您需要创建一个包含图像URL和任何自定义HTML的数组。每个对象都必须有 src键和可选的 thumb键(缩略图URL)和任何其他自定义内容，例如标题和描述。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------- -
-
---- ------------------------------------
------ ------------------------------------------
------ --- ----- ---
------------ -- ------ ---- ----- - ------
--
-
---- ------------------------------------
------ ------------------------------------------
------ --- ----- ---
------------ -------- ---- ----- - ------
-
-
---HTML模板
接下来，您需要放置带有照片库的div。您的div应该包含一个双括号元素，其中包含一个您创建的任何名称的photos数组。您还可以包含任何其他HTML，例如照片库的标题和描述。
-- -------------------- ---- -------
---- -------------------------
------ ----- ------------
---- ------------------ -------------- -------- ------------- ---------
------- ------ -- ---------
---- ---------------- ------------------------ --------------------------------------
---- --------------------- ----------------------
------------------------
------
---------
------
------CSS样式
最后，您需要将一些CSS样式添加到您的应用程序中，以确保您的照片库可见并以正确的方式呈现。
-- -------------------- ---- ------- ----------------- - ---------- ------ ------- - ----- - ----------- --------- - -------- ----- - ----------- ----------------------- - -------- ------ - ----------------------- --------------- - -------- ----- -
JavaScript代码
你需要添加一个控制打开照片库的JavaScript函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------------------------------------
------ ------- ------------------------
-------- -
------------------- -
--- -------------------------------------------------- -
---------------
-------- -------- -------------
--------------- -
--------- ------
-------------- -----
--------- ------
------------ -----
-
-----------
-------- -----
---------- -------
---------- -
---
-
-
---运行
现在你的应用程序已经准备好你的照片库，它应该可以正确呈现并工作了。
总结
恭喜您已经成功地设置了Ember Light Gallery并创建了自己的相册。虽然这个教程并不深入所有可能的设置和选项，但您可以阅读Ember Light Gallery github上的文档以获得更多详细信息，以及查看Light Gallery自己的文档以了解更多可选设置和扩展。
您可以通过类似于本教程中所示的简单步骤来在自己的应用程序中使用ember-light-gallery，这是构建令人惊叹的照片库的关键。
示例代码
以下是完整的示例代码。
app/controllers/application.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------- -
-
---- ------------------------------------
------ ------------------------------------------
------ --- ----- ---
------------ -- ------ ---- ----- - ------
--
-
---- ------------------------------------
------ ------------------------------------------
------ --- ----- ---
------------ -------- ---- ----- - ------
-
--
-------- -
------------------- -
--- -------------------------------------------------- -
---------------
-------- -------- -------------
--------------- -
--------- ------
-------------- -----
--------- ------
------------ -----
-
-----------
-------- -----
---------- -------
---------- -
---
-
-
---app/templates/application.hbs
-- -------------------- ---- -------
---- -------------------------
------ ----- ------------
---- ------------------ -------------- -------- ------------- ---------
------- ------ -- ---------
---- ---------------- ------------------------ --------------------------------------
---- --------------------- ----------------------
------------------------
------
---------
------
------app/styles/app.css
-- -------------------- ---- ------- ----------------- - ---------- ------ ------- - ----- - ----------- --------- - -------- ----- - ----------- ----------------------- - -------- ------ - ----------------------- --------------- - -------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681d81e8991b448e43fc