JS Animated. 如何使用同位素布局滤波器

本教程展示了如何使用同位素 Layout filter in 网站模板.

1. 图库有滤镜. 您可以将图像分配到适当的位置 类别过滤器. Open html 具有库页的文件 editor. 我们已经找到了画廊过滤器的代码. 每个过滤器都有类型. 您需要将此类型分配给图库图像. 让我们来改变过滤器的标题:

   

2. 让我们改变图库图像. 找到以下代码:

   

3. 在那里我们可以看到通往 lightbox image (data-lightbox="image" 数据字段)和路径 thumbnail image. Attribute 数据过滤器= " 1型” 定义与过滤器相关的图像 "type-1". 你可以上传你的图片并更改路径到image:

   

4. 保存更改并将修改后的文件上传到服务器. 刷新页面. 标题被更改了. 画廊图片也改变了:

   

5. 让我们再添加一个滤镜并将图像分配给它. 打开带有过滤器的部分. 复制现有过滤器的代码，粘贴它，更改标题. 更改数据-同位素-过滤器字段的类型. We have set type-4:

   

6. 复制现有图库图像的代码. Paste code. 将数据过滤器中的值更改为 type-4 (我们已经在前面的步骤中指定了这种类型). 将路径更改为image和 thumbnail image. 保存更改并将修改后的文件上传到 hosting:

   

7. Refresh page. 你可能需要调整css代码以适应不同的布局(桌面, 移动和平板电脑)，以便对齐项目. 使用Firebug检查项目 plugin 在火狐浏览器或Chrome浏览器的检查器. 找到合适的css代码. 在我们的例子中，填充应该调整:

   

8. 将这些更改应用到css文件. 打开适当的代码行. 请注意，您可能需要根据不同的布局调整样式. 我们要调整桌面的样式 layout:

   

9. 保存更改并将修改后的文件上传到 hosting. Refresh page. 滤镜标题对齐，我们将图像添加到一个新项目:

   

请随时查看下面的详细视频教程: