精选文章 使用Juicebox创建平面设计的相册

使用Juicebox创建平面设计的相册

作者:cuke3186 时间: 2020-08-06 02:00:20
cuke3186 2020-08-06 02:00:20
使用Juicebox创建平面设计的相册1
使用Juicebox创建平面设计的相册2

Creating a flat design photo gallery using Juicebox Today we will create another photo gallery using Juicebox. This is one of the numerous galleries, however, it has its own features and advantages. Here is an incomplete list of the main core features: universal playback and responsive layout (proven performance on any device), intuitive navigation (image navigation via mouse, touch and keyboard), lightweight, fast to load and easy to embed into any website. Moreover, it supports Fullscreen API, so the gallery can be switched to the fullscreen mode easily. Let’s look at the entire process of creating a gallery from scratch.

使用Juicebox创建平面设计图片库今天,我们将使用Juicebox创建另一个图片库。 这是众多画廊之一,但是它有自己的特色和优势。 以下是主要核心功能的不完整列表:通用播放和响应式布局(在任何设备上均经过验证的性能),直观导航(通过鼠标,触摸和键盘进行图像导航),轻巧,易于加载且易于嵌入到任何网站中。 此外,它支持全屏API,因此画廊可以轻松切换到全屏模式。 让我们看一下从头开始创建画廊的整个过程。

现场演示

HTML标记 (HTML markup)

As usual, in the beginning of every project, we need to define the html. Juicebox offers us a very easy way to create the gallery:

像往常一样,在每个项目的开始,我们需要定义html。 Juicebox为我们提供了一种非常简单的创建画廊的方法:


    
    
    
    

    
    
    
    

It could not be more simple. Immediately after this code we can initialize the gallery with the following code:

它再简单不过了。 在此代码之后,我们可以立即使用以下代码初始化图库:


    

    

Like many other gallery – most of the options we can specify directly in the gallery options. We indicated that the container of our gallery is ‘juicebox-container’, the width is 100%, height is 900px. We also indicated the background color and the main theme url. And, the last parameter is address to the config file. It can be a static XML file with a list of images for the gallery, however, this gallery allows us to use a php file, thus our images could be gathered dynamically. Full list of options you can find in the end of our tutorial.

像许多其他画廊一样,我们可以在画廊选项中直接指定大多数选项。 我们表示我们画廊的容器是“ juicebox-container”,宽度为100%,高度为900px。 我们还指出了背景色和主要主题网址。 并且,最后一个参数是配置文件的地址。 它可以是带有库图像列表的静态XML文件,但是,此库允许我们使用php文件,因此可以动态收集图像。 您可以在本教程末尾找到完整的选项列表。

PHP (PHP)

This is very convenient when, let’s say you have some ready-made website (or script) with members. And you just want to integrate this gallery with your script. Of course, we can not use static in this case, since we need to use different images (of galleries from various users of your site). Thus we can write a script like this:

假设您有一些成员现成的网站(或脚本),这非常方便。 而且您只想将此库与脚本集成在一起。 当然,在这种情况下我们不能使用静态,因为我们需要使用不同的图像(来自您站点的不同用户的画廊的图像)。 因此,我们可以编写如下脚本:

photos.php (photos.php)


$photos = '';
for ($i = 1; $i <= 6; $i++) {
    $photos .= <<
    <![CDATA[Image {$i}]]>
    

EOL;
}
header('Content-Type: text/xml; charset=UTF-8');
echo <<

  {$photos}

EOF;

$photos = '';
for ($i = 1; $i <= 6; $i++) {
    $photos .= <<
    <![CDATA[Image {$i}]]>
    

EOL;
}
header('Content-Type: text/xml; charset=UTF-8');
echo <<

  {$photos}

EOF;

As you can see, besides of used images, we may specify extra params for the gallery. I should note that this gallery is supplied in different versions: a free one (that we use in our demonstration) and paid (with additional advanced settings).

如您所见,除了使用的图像,我们还可以为图库指定额外的参数。 我应该注意,该库提供了不同的版本:免费(供我们在演示中使用)和付费(具有其他高级设置)。

图片 (Images)

As is seen from our php code, all the images are located in the ‘images’ folder, all thumbnails are in the ‘thumbs’ folder.

从我们的php代码可以看出,所有图像都位于“图像”文件夹中,所有缩略图都位于“缩略图”文件夹中。

CSS样式 (CSS styles)

One interesting feature of this gallery is the support of various themes. It means that you may prepare different themes, and switch between them. We use the default one theme that is supplied with the gallery. However, to make it in flat design, we overrided several styles:

该画廊的一个有趣功能是对各种主题的支持。 这意味着您可以准备不同的主题,并在它们之间切换。 我们使用图库随附的默认一个主题。 但是,为了使其成为平面设计,我们重写了几种样式:


.juicebox-container {
    margin: 0 auto 100px;
    width: 100%;
    max-width: 1024px;
    height: 900px;
}
.jb-bb-bar {
    margin-right: 0px !important;
    border-radius: 0px !important;
}
.jb-panel-top {
    padding: 0 !important;
}
.jb-area-large-mode-title {
    font-size: 1.5em !important;
    color: #000000 !important;
}

.juicebox-container {
    margin: 0 auto 100px;
    width: 100%;
    max-width: 1024px;
    height: 900px;
}
.jb-bb-bar {
    margin-right: 0px !important;
    border-radius: 0px !important;
}
.jb-panel-top {
    padding: 0 !important;
}
.jb-area-large-mode-title {
    font-size: 1.5em !important;
    color: #000000 !important;
}

现场演示

[sociallocker]

[社交储物柜]

下载资源

[/sociallocker]

[/ sociallocker]

选项清单 (List of options)

Options supported in free lite version:

免费精简版支持的选项:

NameDefault ValueDescription
galleryTitle “”Text to display as the gallery Title.
galleryWidth100%Pixel or percentage width of the gallery. Must be specified in the embed code.
galleryHeight100%Pixel or percentage height of the gallery. Must be specified in the embed code.
backgroundColor#222222Gallery background color as a CSS3 color value. Can be either a hexidecimal value “FF00FF” or a RGBA value: “rgba(10,50,100,0.7)”. (Large Screen Mode only.)
textColorrgba(255,255,255,1)Color of all gallery text. (Large Screen Mode only.)
thumbFrameColorrgba(255,255,255,.5)Color of the thumbnail frame when thumbnail is selected or rolled over. (Large Screen Mode only.)
showOpenButtonTRUEWhether to show the ‘Open Image’ button. Images are opened in a new tab to allow image downloading.
showExpandButtonTRUEWhether to show the ‘Expand’ button. Clicking this button expands the gallery to fill the browser window. Expand button only displays if the gallery is embedded at less than 100% of the browser window size.
showThumbsButtonTRUEWhether to show the ‘Toggle Thumbnails’ button in Large Screen Mode.
useThumbDotsFALSEReplace the thumbnail images with small dots. (Large Screen Mode only.)
useFullscreenExpandFALSE

Triggers fullscreen mode when clicking the ‘expand’ button for supported browsers (Firefox, Safari and Chrome).

useFlickrFALSEWhether to use Flickr as the source of the images and text. If set to TRUE and no user name or tags are specified, Juicebox will fetch Flickr’s current most interesting images.
flickrUserName“”The Flickr user name of the photos to display. If this parameter isn’t passed, then everybody’s public photos will be searched.
flickrTags“”A comma separated list of tags. Photos with one or more of the tags listed will be returned.
languageList Used to specify translated international language for gallery display text (mainly button tooltips).
名称 默认值 描述
galleryTitle “” 要显示为图库标题的文本。
galleryWidth 100% 画廊的像素或百分比宽度。 必须在嵌入代码中指定。
galleryHeight 100% 画廊的像素或百分比高度。 必须在嵌入代码中指定。
背景颜色 #222222 库背景颜色作为CSS3颜色值。 可以是十六进制值“ FF00FF”或RGBA值:“ rgba(10,50,100,0.7)”。 ( 仅限大屏幕模式 。)
textColor rgba(255,255,255,1) 所有画廊文字的颜色。 ( 仅限大屏幕模式 。)
thumbFrameColor rgba(255,255,255,.5) 选择或翻转缩略图时缩略图框的颜色。 ( 仅限大屏幕模式 。)
showOpenButton 真正 是否显示“打开图像”按钮。 在新选项卡中打开图像以允许下载图像。
showExpandButton 真正 是否显示“展开”按钮。 单击此按钮将展开图库以填充浏览器窗口。 仅当图库嵌入到浏览器窗口大小的不到100%时,才会显示“展开”按钮。
showThumbsButton 真正 在大屏幕模式下是否显示“切换缩略图”按钮。
useThumbDots 用小点替换缩略图。 ( 仅限大屏幕模式 。)
使用全屏展开

单击受支持的浏览器(Firefox,Safari和Chrome)的“展开”按钮时触发全屏模式。

useFlickr 是否使用Flickr作为图像和文本的来源。 如果设置为TRUE且未指定用户名或标签,则Juicebox将获取Flickr当前最有趣的图像。
flickrUserName “” 要显示的照片的Flickr用户名。 如果未传递此参数,则将搜索所有人的公开照片。
flickr标签 “” 以逗号分隔的标签列表。 具有列出的一个或多个标签的照片将被退回。
语言列表 用于为画廊显示文本(主要是按钮工具提示)指定翻译后的国际语言。

其他嵌入选项 (Additional embed options)

NameDefault ValueDescription
containerIdjuicebox-containerId of the HTML div to replace with the Juicebox gallery.
configUrlconfig.xmlRelative or absolute URL of the config XML file. Useful if you want to load gallery XML data from somewhere other than the default location.
themeUrlclassic/theme.css

Relative or absolute URL to the theme CSS file. Useful if you want to load a theme from a different location than the default.

If themeUrl is not specified, Juicebox will look for the theme CSS relative to the juicebox.js file (classic/theme.css).

baseUrl“”

Relative or absolute URL of the gallery folder.

If set, all relative URLs to gallery content (imageUrls, thumbUrls and configUrl) will be relative to this URL.

debugModeFALSEIf set to TRUE, allow setting config options via the URL query string. Must be set in the config XML file.
名称 默认值 描述
containerId 果汁盒容器 HTML div的ID替换为Juicebox画廊。
configUrl config.xml 配置XML文件的相对或绝对URL。 如果要从默认位置以外的其他位置加载库XML数据,则很有用。
themeUrl 经典/theme.css

主题CSS文件的相对或绝对URL。 如果要从默认位置以外的其他位置加载主题,则很有用。

如果未指定themeUrl,Juicebox将查找与juicebox.js文件(classic / theme.css)相关的主题CSS。

baseUrl “”

画廊文件夹的相对或绝对URL。

如果设置,则图库内容的所有相对URL(imageUrls,thumbUrls和configUrl)都将与此URL相对。

调试模式 如果设置为TRUE,则允许通过URL查询字符串设置配置选项。 必须在配置XML文件中设置。

结论 (Conclusion)

On this, our lesson came to an end – we have just finished creating our new photo gallery. I hope that you enjoyed the lesson. See you in the next lesson.

至此,我们的课程结束了–我们刚刚完成了新相册的创建。 希望您喜欢这个课程。 下节课见。

翻译自: https://www.script-tutorials.com/creating-flat-design-photo-gallery-using-juicebox/

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:使用Jcrop(jQuery)在运行时裁剪图像

下一篇:【Golang】Go的GOROOT,GOPATH,GOBIN和工程project目录结构

您可能感兴趣

  • 大型架构及配置技术ansible(一)之ansible基础,ad-hoc,批量配置管理,ansible七种武器,JSON简介,YAML简介

    一、ansible基础 6台虚拟机(2cpu,1.5G以上内存,10G以上硬盘,1块网卡) 主机名 IP地址 角色 ansible40 192.168.4.40/24 管理主机 web41 192.168.4.41/24 托管主机 web42 192.168.4.42/24 托管主机 db43 192.168.4.43/24 托管主机 db44 192.168.4.44/24 托管主机 ca...

  • 中国第五个直辖市,我来说两句

    中国第五个直辖市,我来说两句 最近网上有很多网民在讨论新的直辖市的问题,很多人鼓吹说深圳很有可能成为第五个直辖市,有人说武汉应该成为直辖市。去年回河南长葛岳父家探亲,发现本地人在说郑州可能成为直辖市。实际上,谁是最新的直辖市,是一个老生常谈的问题。不仅仅大城市,很多二三线城市的市民,都在网上表达希望自己所在的城市成为新的直辖市的愿望和幻想。 众所周知,想成为一个直辖市是有设立条件的。首先它要...

  • 前端实习生面试题分析(一)

    最近面试拿了很多公司的实习offer,只要是面试的都通过了。 接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。 估计要写好多,每天写几道题,而且有些经验性的东西也不容易写出来 这篇写的都是类似一些概念性的理论东西。 1.JS防抖和节流 先说为什么要做防抖和节流,针对一些会频繁触发的事件,像scroll、re...

  • 四连涨!海尔智家这波私有化还有多大想象空间?

    文|易牟 来源 | 螳螂财经(ID:TanglangFin) 四连涨!受海尔智家(600690.SH)私有化海尔电器(01169.HK)消息影响,海尔智家连续两个交易日涨停后,又接连两日上攻,股价盘中最高达22.54元,创下今年新高。 截至8月5日收盘,海尔智家主力资金净流入3.68亿元,连续5日净流入12.96亿元,后续上涨势头强劲。 毫无疑问,在投资者的眼中,不管是短期还是中长期,海尔智...

  • 功能fine秒mine!苹果“偷走”了安卓系统,但它表现得更好

    全文共1670字,预计学习时长5分钟 图源:unsplash 不久前的开发者大会上,苹果发布了iOS 14,展示了一些将在今年晚些时候出现在iPhone上的重要功能,比如允许用户将应用程序中的内容导入主屏幕的小部件,以及画中画视频功能。 安卓迷们发现了一些很明显的事情:许多在年度开发者大会上发布的功能已经在安卓上使用了很多年了。没错,小部件从一开始就是安卓系统的一部分,它可以让用户在主屏幕上...

  • windows环境安装MySQL

    windows环境安装MySQL 本篇主要介绍如何在windows中,安装社区版MySQL(ZIP包形式)。 说明: 貌似从8.0版本以后,MySQL的安装包主要是ZIP形式,且只适用64位的windows; 8.0版本以前的提供ZIP Archive、MSI Installer两种安装包; 使用ZIP包安装,需要手动去配置,包也大些;使用MSI包安装,提供安装向导,包相对小些。 步骤1: ...

  • 爱了,3174页实战pdf集锦:Redis+多线程+Dubbo+JVM+kafka+MySQL

    写在前面 作为一名Java开发者,在现在这个信息化时代很快的时代,很少会有人停下脚步去思考以及去总结,忽略了很重要的一个步骤,没有反思和总结,只会用原来固有的想法去做事情,所以还是需要隔一段时间去总结。LZ今天总结了自己在平时会用到的一些: 01—Redis实战 在Redis诞生数年之后的今天,这个项目已经发生了显著的变化:我们现在拥有了一个更为健壮的系统,并且随着Redis 2.6的发布,...

  • 【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=93255 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 本章教程为大家讲解利用STM32429的FMC总线扩展出32路高速IO,且使用简单,实际项目中也比较有实用价值。 目录 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 38.1 初...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。