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


作者:cuke3186 时间: 2021-02-05 09:38:52
cuke3186 2021-02-05 09:38:52
【摘要】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...

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:

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

 <script> new juicebox({ containerId : 'juicebox-container', galleryWidth: '100%', galleryHeight: '900', backgroundColor: 'rgba(255,255,255,1)', themeUrl:'themes/theme.css', configUrl:'photos.php', }); </script>
 <script> new juicebox({ containerId : 'juicebox-container', galleryWidth: '100%', galleryHeight: '900', backgroundColor: 'rgba(255,255,255,1)', themeUrl:'themes/theme.css', configUrl:'photos.php', }); </script>

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文件,因此可以动态收集图像。 您可以在本教程末尾找到完整的选项列表。


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}]]> 

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



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

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



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.


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]

选项清单 (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.)

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 用小点替换缩略图。 ( 仅限大屏幕模式 。)


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.

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).


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 “”



调试模式 如果设置为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/


上一篇:练习2 - 计算字符串距离



  • Win32汇编教程三 一个简单的对话框 --- 兼谈资源文件的使用

    --------------------------------------------------------------------------------Windows 的资源文件不管在Dos下编程还是在Windows下编程,我们总是要用到除了可执行文件外的很多其他数据,如声音数据,图形数据,文本等等,在Dos下编程,我们可以自己定义这些文件的格式,但这样一来就造成了很多资源共享的问题...

  • Win32汇编教程六 工具栏和状态栏的使用


  • 使用Rundll32.exe和Rundll.exe

    福州 Pasic 常用Windows9x的朋友一定对Rundll32.exe和Rundll.exe这两个文件不会陌生吧,不过,由于这两个程序的功能原先只限于在微软内部使用,因而真正知道如何使用它们的朋友想必不多。那么好,如果你还不清楚的话,那么就让我来告诉你吧。  首先,请你做个小实验(请事先保存好你正在运行的程序的结果,否则...

  • 系统钩子的使用

    Win32全局钩子在VC5中的实现  ·贺成士   Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完成普通应用程序难以实现的功能。钩子的种类很多,每种钩子可以截获并处理相应的消息,如键盘钩子可以截获键盘消息,外壳钩子可以截取、启动和关闭应用程序的消息等。...

  • 使用ADO操作SQL SERVER 通过'OLE DB 访问 ACCESS 数据库 ,实现数据交换

    使用的存储过程简介1、sp_addlinkedserver --- 为SQL SERVER 添加一个Link Server2、sp_addlinkedsrvlogin --- 为Link Server 添加一个 Login3、sp_droplinkedsrvlogin --- 删除Link Server的Login4、sp_dropserver  --- 删除Link Server详细请参考...

  • 使用MFC编写internet查询程序

    使用MFC编写internet查询程序 杜经农 在VC++ 5.0中,MFC的WinInet类包装了相关的用于internet 客户机程序编程的win32 API函数。这样,无需了解winsock或TCP/IP的细节就可以编制出internet客户机程序。本文中,我们将探讨如何使用WinInet类来编写一个internet查询程序,该程序起名为“探路者”。该程序能使用各种协议来查询网络,包括...

  • C++ articles:Guru of the Week #3:使用标准库

    作者:Hub Sutter译者:plpliuly /*此文是译者出于自娱翻译的GotW(Guru of the Week)系列文章第3篇,原文的版权是属于Hub Sutter(著名的C++专家,"Exceptional C++"的作者)。此文的翻 译没有征得原作者的同意,只供学习讨论。——译者*/ #3 使用标准库难度:3/10 使用标准库提供的算法比你自己手工写一个要方便的多。仍然以Got...

  • Win2000中Via主板也可以使用DMA了

    由于Win2000不支持Via主板的DMA功能,所以采用Via主板的系统的磁盘性能很低,一直无法启用已能 盘的DMA功能,只能工作在PIO模式。最近情况有了可喜的改变,只要安装了4.29版本以上的Via4in1的主板补丁 ,Win2000中就可以使用硬盘的DMA功能了,而且还可以区分DMA和UDMA,经过测试,磁盘性能明显提高。4.28版 本的Via4in1主板补丁虽然也支持DMA,但是启动...



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


使用Juicebox创建平面设计的相册介绍:华为云为您免费提供使用Juicebox创建平面设计的相册在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多使用Juicebox创建平面设计的相册的相关内容。| 移动地址: 使用Juicebox创建平面设计的相册 | 写博客