Galleria How to Ebook free download
Instant Galleria
How-toRecipes to make you an expert user of the
Galleria JavaScript framework Nathan Van GheemBIRMINGHAM - MUMBAI
Instant Galleria How-to
Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: February 2013 Production Reference: 1080213 Published by Packt Publishing Ltd.
Livery Place
35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-84969-660-9 www.packtpub.com
Credits
Author Nathan Van Gheem
Reviewer Victor Berchet
Acquisition Editor Usha Iyer
Commissioning Editor Ameya Sawant
Technical Editor Kirti Pujari
Project Coordinator Esha Thakker
Proofreader Lawrence A. Herman
Production Coordinator Conidon Miranda
Cover Work Conidon Miranda
Cover Image Conidon Miranda About the Author Nathan Van Gheem
primarily works on Python web solutions. He also has extensive experience with JavaScript and integrating JavaScript solutions in web applications. He is involved with the Plone Python CMS open source community where he is the UI team leader and is on the Security team.
I would like to thank my family for the sacrifice of time they put up with
Wildcard Corp for giving me an opportunity to work on interesting projects, and Kim Nguyen for encouraging and enabling me to challenge myself with open source software.
About the Reviewer
was introduced to web development in 2007 by playing with Google Maps,
Victor Berchet
JavaScript API, and PHP, after having spent 10 years in the domain of embedded software development. He became a freelance Web Engineer in 2010 by founding Suumit, his own company. Most of the projects Victor works on involve either JavaScript mapping or the Symfony2 PHP framework. He is pretty much engaged in open source software and is one of the top contributors of Symfony2.
Support files, eBooks, discount offers and more
You might want to visit or support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub and as a print files available? You can upgrade to the eBook ver book customer, you are entitled to a discount on the eBook copy. Get in touch with us at or more details. At ou can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM Do you need instant solutions to your IT questions? PacktLib is Packt’s online digital book library. Here, you can access, read and search across Packt’s entire library of books.
Why Subscribe? f Fully searchable across every book published by Packt f Copy and paste, print and bookmark content f On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at , you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents
Preface
Galleria is a JavaScript framework for building beautiful image galleries for the web. It comes packed with responsive web design support and swipe for mobile devices. With its flexible theming system, you'll be able to customize it to your needs or you can use one of the many available themes. It is open sourced under the MIT license and comes packed with a free classic theme. Galleria has a large user base with many web application add-ons already provided on various platforms. It's an obvious choice for creating beautifully customized galleries on your website. If you want to integrate Galleria to create your own beautiful image galleries for the web, Galleria How-to is the book you need.
Using concise recipes, Galleria How-to will take you from creating and configuring your first gallery to creating themes and plugins, using the Galleria API and integrating with web applications.
What this book covers Setting up the development environment (Simple) details how to set up a development environment to start developing with Galleria.
Your first gallery (Simple) introduces creating a simple gallery. Configuring Galleria (Simple) details how to configure Galleria with JavaScript and HTML attributes.
Installing themes (Simple) discusses how to install and use different themes. Creating your own theme (Medium) details the process of creating custom themes with JavaScript and CSS.
Creating mobile friendly themes (Simple) introduces how to create mobile friendly themes using responsive web design.
Preface Installing plugins (Simple) details how to install and use plugins. Using the Flickr plugin (Medium) goes more in depth with using plugins by configuring and customizing the use of the flickr plugin. Creating a plugin (Advanced) discusses in-depth how to create a plugin from scratch. Using the API (Medium) details taking full control of Galleria's API to customize its behavior.
Alternative image data structures (Simple) explains how to use different data structures and
mechanism to instruct Galleria on what images to use.Optimizing Galleria (Simple) introduces how to improve your gallery and website performance.
Adding images dynamically (Medium) explains how to use JavaScript to incrementally add images to galleries. Triggering Galleria (Advanced) details triggering Galleria from events outside of the gallery. Recording image views with Google Analytics (Medium) details how to track hits on images in galleries to improve analytics. Handling errors gracefully (Medium) explains how to handle gracefully potential problems that could arise with Galleria.Creating tests for customizations (Advanced) discusses creating tests on customizations for
quality assurance.Web application integration (Advanced) details how to integrate Galleria with web applications
using a simple example in Python.What you need for this book
To follow the recipes in this book, you will need a computer suitable for developing JavaScript, HTML, and CSS. You may use Windows, Mac OS X, or Linux. You will need a modern web browser with debugging tools such as Mozilla Firefox or Google Chrome, and a text editor.
We will cover setting up a development environment, including downloading of the Galleria source code, in the first recipe of this book, Setting up the development environment.
Who this book is for This book assumes the reader is comfortable reading and editing JavaScript, HTML, and CSS.
With a basic understanding of JavaScript, most of the book is very applicable. An in-depth understanding of HTML and CSS is required throughout the book.
2
Preface Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text are shown as follows: "We can include other contexts through the use of the directive." include
A block of code is set as follows: $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); });
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: Galleria.configure({ autoplay: true });
Any command-line input or output is written as follows: # cp /usr/src/asterisk-addons/configs/cdr_mysql.conf.sample /etc/asterisk/cdr_mysql.conf New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen." Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
3
Preface Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to , and feedback@packtpub.com mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on . www.packtpub.com/authors
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for all Packt books you have purchased from your . If you purchased this book elsewhere, you can and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting , http://www.packtpub.com/support selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from
. http://www.packtpub.com/support
4
Preface Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at if you are having a problem with any questions@packtpub.com aspect of the book, and we will do our best to address it.
5
Galleria How-to
Welcome to Galleria How-to. This How-to will guide you to become an expert at utilizing the Galleria gallery framework to make beautiful and functional galleries for websites that scale to mobile platforms.
Setting up the development environment (Simple)
This section will cover how to get prepared to start developing with Galleria. We'll install and run Galleria with the classic theme, create the folder structure, and set up the development environment.
Getting ready
Before we start developing with Galleria, you'll need a text editor to use throughout this book since we'll be modifying HTML, JavaScript, and CSS.
How to do it...
1. First, you'll need to download the Galleria source code. In a web browser, visit and download the latest Galleria source code. http://galleria.io/download At the time this book was written, Galleria was at Version 1.2.8.
3. We'll then add a new folder in the previous extracted source and name it . This is where we'll do all our Galleria development for the rest of development the book.
Galleria How-to
4. Inside the directory, we'll then create an folder. Please development images insert test images in this folder to use with the development galleries we'll create.
5. Once done, the contents of the Galleria source should look like the following screenshot:
6. Next, let's test whether the downloaded Galleria source code is working properly or not. Galleria comes with a free default theme called "classic". Navigate to themes/ classic/classic-demo.html and open the file in a modern web browser
(Google Chrome, Firefox, or Microsoft Internet Explorer version 8 or later), which should result in the following gallery:
Galleria How-to Galleria components Here, we'll cover that part of Galleria that provides the gallery functionality. f : This is the gallery script that loads images and facilitates the gallery
galleria.js functionality.
f : A theme consists of a combination of JavaScript, HTML, and
theme javascript CSS to provide a unique load and feel.
f : These plugins are used to extend and override the way
plugins galleria.js works. For instance, there is a flickr plugin to get images from flickr and not from the HTML DOM as that is used frequently.
If you don't have a text editor...
There are many great open source text editors that you can use to edit HTML, JavaScript, and CSS. For Windows, Notepad++ is a great text editor. It can be found at http://
. For Mac OS X, TextWrangler is a very good free text editor notepad-plus-plus.org/ that can be found at . http://www.barebones.com/products/TextWrangler/
You are also free to use the default text editors that come with your operating system but they're usually not as easy to use for development.
Extracting the source code
The Galleria source code download will come in a zipped archive format that is extractable on most modern operating systems. If you have trouble extracting the source code for Windows, use 7zip, available at . Mac OS X should be able to extract all http://www.7-zip.org/ archive types you come across.
Your first gallery (Simple)
In this recipe, we're going to go through the basics of creating a Galleria gallery. HTML structure and Galleria JavaScript are topics that will be covered in this recipe.
Getting ready
Assemble together a group of images that you'll use while working with Galleria and place them into your Galleria development image source directory ( galleria/development/ ). images
Galleria How-to How to do it...
1. Create a folder. myfirstgallery.html development file inside the 2. Start off with the usual HTML5 doctype structure.
3. Inside the head section include the JavaScript dependencies, jquery.js and galleria.js
. In both the cases, we'll use the following minified versions: <!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery.min.js"> </script> <script src="../galleria-1.2.8.min.js"></script> /* end of Javascript file includes */ Make sure the relative path used to reference is correct for the galleria.js folder structure being used.
Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub. com/support and register to have the files e-mailed directly to you.
4. Next, we'll need to provide the following code to initialize the gallery: /* end of Javascript file includes */ <script> $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); }); </script> </head> /* end of head tag */
Galleria How-to Here,
id="galleria" attribute and value refers to what we were using with the
Finally, the
data-title attribute is where we can give our image a title that the theme will use
The
style="height: 500px;" attribute and value gives a height to the gallery, which is required for Galleria to function
The
Galleria.run method to instruct Galleria where to look for the images
The
$(document).ready is a jQuery construct used to run the code inside the anonymous function after the document is ready. This is important because we need to load the gallery after all the images are loaded in the DOM.
6. Inside the body tag, we'll provide the following HTML code to reference the images for our gallery: <body> <div id="galleria" style="height: 500px;"> <a href="images/image1-1600px.jpg"> <img data-title="Image 1" data-description="Image 1 description" src="images/image1-200px.jpg" /> </a> <!-- Additional images in same HTML format can be provided below --> </div> </body>
5. Next, we'll add references to the images we want to provide in the gallery. The standard way to do this, demonstrated here, is to provide them through an HTML structure. The basic structure is to provide the full size image as the href attribute of an anchor tag. The thumbnail image is defined via an img tag. If you have not generated thumbnails, just use your full size image for the thumbnail.
#galleria refers to a tag with the ID of "galleria" that we'll define later.
Galleria.run function is used to wire a gallery up via a CSS selector. In this case,
Finally, the
Galleria.loadTheme function loads the theme file. It takes only one parameter, the path of the JavaScript file.
The
data-description attribute, similar to the title attribute, gives the image a description to be shown in the gallery
Galleria How-to How it works...
Galleria searches the tag with the id div "galleria" to find images to load the gallery.
Galleria then calls the theme JavaScript initialization code to generate additional HTML and JavaScript events that set up the gallery further. Essentially, provides the basic galleria.js gallery components and the theme uses these components to further customize the look and feel of the gallery.
Defining a height
It is important to define a height for all Galleria galleries. If no height is defined in CSS or a style tag, the gallery will fail to load.
Data attributes
In this example, we use data attributes, which are attributes that start with "data-", to define and title alt the title and description of the image. We could have just as easily specified attributes that would also populate the title and description values. Either way works the same.
Configuring Galleria (Simple)
In this recipe, we'll learn how to get more out of Galleria by knowing how to turn the knobs that will customize the gallery in different ways.
Getting ready
In this example, please utilize the code we wrote in the first How to do it... section, or work with the themes/classic/classic-demo.html file. Both will allow us to manipulate configuration options.
How to do it...
method. This method accepts Galleria.configure
To configure Galleria, we'll use the a JavaScript object of keys and values.
Galleria.configure({ autoplay: true });
In this example, we're invoking Galleria to automatically start the gallery when the page is loaded with the option. autoplay
Galleria How-to How it works...
The JavaScript object passed into the method overrides or extends Galleria.configure the default Galleria configuration. This configuration is then passed on to the theme loaded and plugins that are installed.
There's more...
We can also combine the Galleria.run method call with configuration options. Using the example we've been working with, the method call would look as follows:
Galleria.run Galleria.run('#galleria', {autoplay: true});
Useful configuration options Here, we'll cover the most useful Galleria configuration options.
f : This option automatically starts the gallery on page load. Its default
autoplay value is set to false.
f : This option controls whether a carousel is created. Its default value
carousel is set to true.
f : This option controls the animation speed of changes in the
carouselSpeed carousel in milliseconds. Its default value is set to 200.
f : This option manually sets the gallery height. This is useful if no height is
height set in CSS. Its default value is set to 0.
f : This option manually sets the gallery width. This is useful if no width is set
width in CSS and constraining the gallery width is required. Its default value is set to 0.
f : This option customizes the transition used for changing images.
transition It defaults to "fade" for most themes but is "slide" for the classic theme.
f : This option customizes the duration of the transition. Its
transitionSpeed default value is set to 400 milliseconds.
f : This option provides the number of images to preload in the gallery.
preload It defaults to 2.
f : This option tells Galleria to resize when the window size changes.
responsive This will only work along with media queries that define how the gallery should look with different window sizes. Its default value is set to false.
f
show : This option customizes which image should be displayed first. It defaults to 0 (first image).
f : This option shows the caption information. It defaults to true.
showInfo
Galleria How-to f
Complete listing of options
<script src="../themes/classic/galleria.classic.min.js"> </script>
2. The second way to load the theme JavaScript file is simply to include the JavaScript file via the script tag as follows:
The first is to use the Galleria API to load the theme JavaScript file: Galleria.loadTheme('../themes/classic/galleria.classic.min.js'); The only parameter the loadTheme function takes is a string that is the relative path to the theme JavaScript file.
There are two ways by which we can load theme files into Galleria: 1.
How to do it...
Getting ready The theme we'll be working with is the classic theme that comes with the Galleria source code.
Installing different themes will allow us to give Galleria a different look and feel, and in this recipe we will explore how we can use themes and install them.
Installing themes (Simple)
Visit http://galleria.io/docs/options/ for a complete listing of Galleria options.
All of these options are also defined in the Galleria source code and on Galleria's website documentation.
thumbnails : This option customizes how the thumbnails are generated.
"numbers" : This value places empty span tags with numbers instead of images
"empty" : This value places empty span tags with the class of "img"
false : This value does not show the thumbnail browser
true : This value shows thumbnail images
The following are the possible values for this option:
The theme JavaScript file needs to be loaded before the Galleria.run function in order to start Galleria with the theme loaded.
Galleria How-to How it works...
The theme file will automatically load dependent CSS files required for the theme. It will additionally run initialization code for theme specific look and feel.
There's more...
It's possible to dynamically change Galleria themes by loading other themes with the function.
Galleria.loadTheme
Downloading Galleria themes
Galleria only comes with one free theme, the Classic theme, which comes with the Galleria source code. Other themes can be found at http://galleria.io/.
As of the writing of this book, there are no other useful sources for themes for Galleria. Sparse references to themes can be found in some github projects and also in some CMS Galleria integration packages. However, it's not easy to know how to use these themes without some customization, so we won't cover them in this book.
Creating your own theme (Medium)
Creating your own theme will allow you to customize Galleria in a very simple format. Here we will also introduce the structure for creating a basic theme.
Getting ready
In order to keep all the theme related files together, create a new folder inside the development folder named . Within the new folder, create another folder named . themes themes basic
After this is done, our folder structure should be identical to the following screenshot:
Galleria How-to
Lastly, create empty , , and galleria.basic.js galleria.basic.css galleria. folder that was just created. Then, copy the basic-example.html basic files inside the contents of the myfirstgallery.html galleria.basic- file and insert the text into the example.html file. These are the files that we will be customizing in this recipe.
How to do it...
js file:
(function($) { Galleria.addTheme({ name: 'basic', author: 'Galleria How-to', css: 'galleria.basic.css', defaults: { transition: 'slide' }, init: function(options) { } }); }(jQuery)); The function registers the theme with the provided settings to Galleria. addTheme
The option is automatically loaded here also. The .css css file specified with the anonymous function is empty right now but this is where we would put the init custom JavaScript functionality.
2. Next, we'll go on to styling our gallery. At its basic level, this involves placing tags into the DOM so that they can be positioned on the page.
The major components of the gallery that need to be styled are:
#galleria-loader
.galleria-info
.galleria-stage
.galleria-thumbnails-container
.galleria-counter
.galleria-image-nav Now, let's go through the contents of the CSS file that provides very basic styles for our gallery.
#galleria{ height: 550px; }
Galleria How-to
The preceding code sets the height of the gallery. This is required by the gallery to load and scale all the elements for the gallery correctly.
#galleria-loader{height:1px!important} The preceding code provides the definition of the gallery loader container that is required for Galleria to load properly.
.galleria-stage { position: absolute; top: 0; bottom: 60px; left: 10px; right: 10px; width: 500px; float: right; max-height: 550px;} is the container for the images, loader, counter, and gallery
.galleria-stage navigation buttons. .galleria-thumbnails-container { top: 0; position: absolute; left: 10px; right: 10px; z-index: 2; width: 500px; } is the container for the thumbnail carousel. .galleria-thumbnails-container Here, we're placing it on top of the gallery. .galleria-thumbnails .galleria-image { height: 40px; width: 60px; margin: 0 5px 0 0; border: 1px solid #000; float: left; cursor: pointer; } With this rule we're styling the images in the thumbnail carousel. We make sure to float left here so that the images are displayed one after another.
.galleria-info{ position: absolute; top: 48px; opacity: 0.7; background-color: #F1F1F1; z-index: 4; left: 10px; width: 500px; } With this rule, we target the tag that places the title and description of the images as they're browsed. In this theme, we're placing it just below the thumbnail carousel.
.galleria-counter { position: absolute; bottom: 30px; left: 10px; } is used to display which image the user is currently viewing
.galleria-counter out of the total number of images in the gallery. .galleria-image-nav { position: absolute; top: 50%; margin-top: -62px; width: 500px; height: 62px; left: 0; }
Galleria How-to
places the navigation buttons on the gallery so that we can .galleria-image-nav manually move forward and backward in the gallery. In this case, we're just trying to place the buttons in the middle of the gallery.
.galleria-image-nav-left, .galleria-image-nav-right { opacity: .5; cursor: pointer; width: 35px; height: 124px; position: absolute; left: 0; z-index: 2; background-color: gray; } .galleria-image-nav-right { left: auto; right: 0; z-index: 2;} .galleria-image-nav-left:hover, .galleria-image-nav-right:hover { opacity: .9; } This preceding set of rules places right and left navigation buttons on the edges of the gallery.
3. Finally, we need to modify the inline JavaScript code in our galleria.basic- example.html file to call our new theme, using the following code:
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="../../../galleria-1.2.8.min.js"></script> <script> $(document).ready(function(){ Galleria.loadTheme('galleria.basic.js'); Galleria.run('#galleria'); }); </script>
4. Additionally, you'll need to change the image references in the galleria-basic- example.html file to work with the images where they are stored. If following along with the provided code and examples, the images should be placed two folders above the theme file: <a href="../../images/image1-1600px.jpg"> <img title="Image 1" alt="Image 1 description" src="../../images/image1-200px.jpg" /> </a> This is essentially identical to our previous Galleria bootstrapping with the simple exception that we're loading the new theme instead of the galleria.basic.js classic theme in the following screenshot:
Galleria How-to
Once finished, the theme should be rendering a screen like the following screenshot:
Galleria How-to How it works...
Galleria.loadTheme Galleria loads the theme JavaScript file we specified in the function. Galleria then looks at the CSS file specified in the theme JavaScript file to load the stylesheets. The markup is generated by Galleria and then all the styling is done by us.
For the sake of brevity
The basic gallery is very plain and obviously doesn't look very appealing. This is so we don't get bombarded with too many CSS rules to digest. We're going to work with the most barebones examples possible. The objective is to understand how to use and extend Galleria, not how to style it beautifully.
However, while working with this theme, feel free to use additional styles to provide a custom look and feel.
Creating mobile friendly themes (Simple)
Creating mobile friendly themes will help the gallery switch seamlessly between different devices, landscape and portrait mode, and other device screen sizes. Responsive web design is a very powerful technique to style websites for various screen sizes. It allows you to provide CSS rules that are only applied when certain media queries match. Use this recipe to modify settings for Galleria to utilize responsive web techniques.
Getting ready
Before we start working on the code, we'll need to copy the basic gallery example code from . After this mobile the previous example and rename the folder and files to be prefixed with is done, our folder and file structure should look like the following screenshot:
Galleria How-to How to do it...
1. We'll start off with our galleria.mobile.js theme JavaScript file:
(function($) { Galleria.addTheme({ name: 'mobile', author: 'Galleria How-to', css: 'galleria.mobile.css', defaults: { transition: 'fade', swipe: true, responsive: true }, init: function(options) { } }); }(jQuery)); The only difference here from our basic theme example is that we've enabled the parameter for navigating images and the parameter so we swipe responsive can use different styles for different device sizes.
2. Then, we'll provide the additional CSS file using media queries to match only smartphones. Add the following rules in the already present code in the galleria. mobile.css file: /* for smartphones */ @media only screen and (max-width : 480px){ .galleria-stage, .galleria-thumbnails-container, .galleria-thumbnails-container, .galleria-image-nav, .galleria-info { width: 320px; } #galleria{ height: 300px; } .galleria-stage { max-height: 410px; } } Here, we're targeting any device size with a width less than 480 pixels. This should match smartphones in landscape and portrait mode. These styles will override the default styles when the width of the browser is less than 480 pixels.
Galleria How-to
mobile-example.html file to include the following code snippet for bootstrapping the gallery:
<script> $(document).ready(function(){ Galleria.loadTheme('galleria.mobile.js'); Galleria.run('#galleria'); }); </script>
We should now have a gallery that scales well for smaller device sizes, as shown in the following screenshot:
How it works...
The responsive option tells Galleria to actively detect screen size changes and to redraw the gallery when they are detected.
Then, our responsive CSS rules style the gallery differently for different device sizes. You can also provide additional rules so the gallery is styled differently when in portrait versus landscape mode. Galleria will detect when the device screen orientation has changed and apply the new styles accordingly.
Galleria How-to Media queries
A very good list of media queries that can be used to target different devices for responsive web design is available at http://css-tricks.com/snippets/css/media-queries- . for-standard-devices/
Testing for mobile
The easiest way to test the mobile theme is to simply resize the browser window to the size of the mobile device. This simulates the mobile device screen size and allows the use of standard web development tools that modern browsers provide.
Integrating with existing sites
In order for this to work effectively with existing websites, the existing styles will also have to play nicely with mobile devices. This means that an existing site, if trying to integrate a mobile gallery, will also need to have its own styles scale correctly to mobile devices. If this is not the case and the mobile devices switch to zoom-like navigation mode for the site, the mobile gallery styles won't ever kick in.
Installing plugins (Simple)
Here we will learn how to install and utilize Galleria plugins. There are several different plugins that will allow you to enhance Galleria in many different ways.
Getting ready
Using the myfirstgallery.html file we created in the first section, we'll customize it to include the history plugin that is packaged with Galleria.
How to do it...
All that is required to install a plugin is to include its JavaScript file. Place the following code inside the tag: head
<script src="../galleria-1.2.8.min.js"></script>
<script src="../plugins/history/galleria.history.min.js">
</script> <script type="text/javascript"> $(document).ready(function(){ Galleria.loadTheme('../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); }); </script>
Galleria How-to How it works...
With plugins, it's possible to hook into Galleria to customize its behavior. This ranges from customizing how Galleria retrieves its images, what images it loads, and how it handles JavaScript events. In the case of the history plugin for image change, it adds a hash value to the URL so that each image visited in the gallery can have a unique URL. This allows users to link directly to an image inside the gallery. Then, when the page is requested with the specified hash, it will load that image instead of the initial image in the gallery and also allow the user to go backward/forward in history.
There's more...
Galleria includes three plugins in its distribution: flickr
, picasa
, and history
. The flickr and picasa plugins provide an ability to view galleries directly from those photo services.
Using the Flickr plugin (Medium)
Here we will learn how we can use and extend the flickr plugin to display a flickr gallery with Galleria.
Getting ready
We're going to use the myfirstgallery.html file and modify the example again, though it's fine to use whatever gallery implementation is available if preferred.
How to do it...
1. Create a basic gallery with Galleria's flickr plugin using the following JavaScript code inside our head tag:
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="../galleria-1.2.8.min.js"></script>
<script src="../plugins/flickr/galleria.flickr.min.js">
</script> <script type="text/javascript"> $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria', { flickr: 'search:beach' }); }); </script>
Galleria How-to
Here, we're just including the JavaScript plugin and calling the Galleria.run in their title. By default, beach function with the flickr option to search for photos with the flickr gallery only retrieves the first 30 Flickr photos.
2. For a more complex gallery that continually retrieves more images from flickr
Flickr, we can use Flickr in a more dynamic way, along with Galleria, to continuously add images to the gallery as the user approaches the end of the gallery using the following code: <script type="text/javascript"> $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); var flickr = new Galleria.Flickr(), page = 1; flickr.search('beach', function(data) { Galleria.run('#galleria', { dataSource: data }); }); Galleria.ready(function(options) { var galleria = this; galleria.bind('loadfinish', function(e) { /* after an image is loaded, check to see how close we are to loading more images */ if((e.index + 5) > galleria.getDataLength()){ /* start loading more images */ page += 1; flickr._find({ text: 'beach', page: page}, function(data) { // add the image data to the gallery galleria.push(data); }); } }); }); }); </script> Here we're utilizing some of Galleria's API to continually add images as we approach the end of the gallery. The event is called after each image is loaded. loadfinish
The method allows us to search Flickr with a parameter so that flickr._find page we can grab the next set of results. Finally, the method lets us add galleria.push the image data to the Galleria instance.
The benefit of doing it this way as opposed to loading all the images immediately is that the web page will load much faster, as it only retrieves the images as necessary.
Galleria How-to How it works...
The flickr plugin uses the flickr RESTful API to retrieve images that are used with the Galleria API to dynamically add images to the gallery.
There's more...
There are additional plugin options that can be used; however, they need to be flickr object: flickrOptions specified in their own
Galleria.run('#galleria', { flickr: 'search:beach', flickrOptions: { max: 50 } });
The following list is a complete listing of plugin options: flickr
f : This option provides the maximum number of images that will be retrieved
max from Flickr. Its default value is set to 30.
f : This option provides the size of the image. Options include small,
imageSize thumb, medium, big, original. Its default value is set to medium.
f : This option provides the sort order for the images. Potential values include
sort field followed by "asc" or "desc". Allowed fields are date-posted, date-taken, and interestingness. Its default value is set to interestingness-desc.
f : This option is a Boolean to specify whether the description should
description also be retrieved from Flickr. Its default value is set to false.
Flickr plugin API
There is also a plugin API that allows for more advanced behavior such as sorting, flickr batching, group searches, and retrieving tags and set. Detailed documentation on what's available can be found at
. http://galleria.io/docs/plugins/flickr/
Using the Flickr REST API
Additionally, Flickr provides a very robust RESTful API that the plugin utilizes. An overview on all the available methods can be found at . http://www.flickr.com/services/api/
The method we used utilizes the rest flickr._find flickr.photos.search method. For a more detailed description of available parameters to that method, visit . http://www.flickr.com/services/api/flickr.photos.search.html
Galleria How-to Creating a plugin (Advanced) In this recipe we'll learn how to create a plugin that retrieves images from Facebook.
Getting ready
For this exercise we're going to walk through the process of creating a Facebook plugin that will get all the public photos for the user or page provided in a Galleria option. Before we get started, we need to create a new folder named . Inside the folder, facebook and please create empty files with the names galleria.facebook.js galleria. . facebook-example.html How to do it...
Creating a plugin can include hooking into Galleria events, customizing options, or overriding Galleria methods. In the later stage, we need to make sure we still allow Galleria to function properly if the plugin isn't used, even though it might be loaded.
1. The following code with inline comments is used to create the plugin: galleria.facebook.js (function($) { var FACEBOOK_URL = 'https://graph.facebook.com';
/* Store the original load method so we can later call it if
no facebook option is provided to Galleria. */var load = Galleria.prototype.load;
/* Here we override the load method with our own that will check for facebook option. */
Galleria.prototype.load = function() { /* check if facebook option is provided. Call the
original load if not. */
if(typeof this._options.facebook !== 'string'){ load.apply(this, Galleria.utils.array(arguments)); return; }
Galleria How-to /* "this" in this context is the Galleria instance.
We assign it to "galleria" so we can still have access to it within the context of the ajax callback */
var galleria = this, facebook = this._options.facebook; $.ajax({ /* Use the facebook graph API to get all the public
photos for the provided facebook user or page */
url: FACEBOOK_URL + '/' + facebook + '/photos?fields=picture,source&limit=50', /* returned data is in JSON format */ dataType: 'json', success: function(data){ var images = []; for(var i=0; i<data.data.length; i++){
/* go through each image and add it to new images array in JSON format that Galleria expects */
var _image = data.data[i]; images.push({ image: _image.source, thumb: _image.picture }); } /* manually set the data for Galleria */ galleria._data = images; /* And trigger Galleria to load with the newly