Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Instant Galleria How-to
  • Table Of Contents Toc
Instant Galleria How-to

Instant Galleria How-to

By : Nathan Van Gheem
Buy this Book
close
close
Instant Galleria How-to

Instant Galleria How-to

By: Nathan Van Gheem
Buy this Book

Overview of this book

Providing beautiful and usable galleries is an important aspect of the Web today. A gallery solution needs to integrate into your web application easily and seamlessly. Users expect mobile sites that function on par with their desktop counterparts‚Äîespecially for image galleries. In order to accomplish these tasks, you need to use a JavaScript (not Flash) that is extensible and scales to mobile devices. "Instant Galleria How-to" will teach you how to use Galleria in advanced scenarios to become an expert and integrate Galleria into your next project using themes and plugins to accomplish any task. This book teaches you how to use and create themes and plugins,  using the Galleria API through a series of recipes that include a plethora of code examples. You'll be taken through detailed instructions on the usage of JavaScript to customize Galleria. You will create your own theme (mobile friendly), plugin, and learn all the configuration options of Galleria. You'll learn how to customize Galleria by using its extensive API, optimize Galleria, integrate with Google Analytics, create tests for your customization, and integrate into your web application. You'll become an expert user of the Galleria framework, which will enable you to deploy beautiful, mobile friendly galleries for your next web project.
Table of Contents (7 chapters)
close
close
close
Instant Galleria How-to
Icon
Instant Galleria How-to
Credits
Icon
Credits
About the Author
Icon
About the Author
About the Reviewer
Icon
About the Reviewer
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Galleria How-to
chevron up
Icon
Galleria How-to
Icon
Setting up the development environment (Simple)
Icon
Your first gallery (Simple)
Icon
Configuring Galleria (Simple)
Icon
Installing themes (Simple)
Icon
Creating your own theme (Medium)
Icon
Creating mobile friendly themes (Simple)
Icon
Installing plugins (Simple)
Icon
Using the Flickr plugin (Medium)
Icon
Creating a plugin (Advanced)
Icon
Using the API (Medium)
Icon
Alternative image data structures (Simple)
Icon
Optimizing Galleria (Simple)
Icon
Adding images dynamically (Medium)
Icon
Triggering Galleria (Advanced)
Icon
Recording image views with Google Analytics (Medium)
Icon
Handling errors gracefully (Medium)
Icon
Creating tests for customizations (Advanced)
Icon
Web application integration (Advanced)

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>

    Here, we're just including the JavaScript plugin and calling the Galleria.run function with the flickr option to search for photos with beach in their title. By default, the flickr gallery only retrieves the first 30 Flickr photos.

  2. For a more complex flickr gallery that continually retrieves more images from 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 loadfinish event is called after each image is loaded. The flickr._find method allows us to search Flickr with a page parameter so that we can grab the next set of results. Finally, the galleria.push method lets us add 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.

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 flickr plugin options that can be used; however, they need to be specified in their own flickrOptions object:

Galleria.run('#galleria', {
  flickr: 'search:beach',
  flickrOptions: {
    max: 50
  }  
});

The following list is a complete listing of flickr plugin options:

  • max: This option provides the maximum number of images that will be retrieved from Flickr. Its default value is set to 30.

  • imageSize: This option provides the size of the image. Options include small, thumb, medium, big, original. Its default value is set to medium.

  • sort: This option provides the sort order for the images. Potential values include field followed by "asc" or "desc". Allowed fields are date-posted, date-taken, and interestingness. Its default value is set to interestingness-desc.

  • description: This option is a Boolean to specify whether the description should also be retrieved from Flickr. Its default value is set to false.

Flickr plugin API

There is also a flickr plugin API that allows for more advanced behavior such as sorting, 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 flickr._find method we used utilizes the flickr.photos.search rest method. For a more detailed description of available parameters to that method, visit http://www.flickr.com/services/api/flickr.photos.search.html.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Instant Galleria How-to
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon