Search code examples
javascripthtmlflickrgalleria

Using Flickr when uploading images to Galleria

So I'm trying to use the JavaScript image gallery framework Galleria. http://galleria.io/

There is a page on how to install the Flickr plugin but it is quite unclear as to what we should be doing in between the #galleria div and where to place the linking script.

Here's what I have (which isn't working, just giving me a black box)

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="plugins/flickr/galleria.flickr.min.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>

</head>

<body>
<?php
//header
include("header.php");
?>  

<div id="content">

<div id="galleria">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
flickr: 'search:galleria'
});
</script>

</div>  

<div id="footer">
</div>

</body>

</html>

Also wondering how to link to a specific person's Flickr account?

Solution

  • In your javascript section -- you can place this in your header or at the bottom of the page or wherever you normally place your javascriopt code -- you should:

    • load jquery
    • load the galleria script (galleria-1.2.8.min.js)
    • load the galleria flickr plugin script (plugins/flickr/galleria.flickr.min.js)

    Then, in a document.ready() block:

    • load the galleria theme you're using (classic, twelve, folio, etc.)
    • use a jquery selector to attach the gallery and set your options.

    Here's an example based on your HTML page:

    <!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>

<title>Home</title>
<meta charset="UTF-8"/>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
    $("#galleria").galleria({
        responsive: true,
        height: .57,
        imageCrop: false,
        thumbCrop: 'height',
        carousel: false,
        showInfo: true,
        swipe: true,
        easing: 'galleriaOut',
        transition: 'pulse',
        flickr: 'search:leica',
        flickrOptions: {
            max: 10
        }
    });

});
</script>

<style>
#galleria
{
    width: 100%;
    height: auto;
}
</style>

</head>

<body>
<?php
//header
include("header.php");
?>

<div id="content">

    <div id="galleria"></div>

</div>

<div id="footer">
</div>

</body>

</html>

    Note: The example code above also sets a number of options to make the gallery responsive and work with mobile swipe gestures (set "responsive" and "swipe" to true). Also, you should set the width and height of the gallery container (#galleria) in a css style block or in your stylesheet so galleria knows how to size it correctly -- if you want galleria to automatically resize the gallery responsively, set the height ratio (.57 in the example) in the galleria options. See the Galleria docs -- http://galleria.io/docs/ for more details on options.

    To use the flickr plugin to display results of a search, just specify a search term and optionally set a "max" number of images to show (I think the detault is 30). In the example above, max is set to 10:

    $("#galleria").galleria({

    // your other galleria options here...

    // set flickr plugin options here:
    flickr: 'search:leica',
    flickrOptions: {
        max: 10
    }
});

    To display a flickr user's public photos, do

    $("#galleria").galleria({

    // your other galleria options here...

    // set flickr plugin options here:
    flickr: 'user:library_of_congress',
    flickrOptions: {
        max: 10
    }
});

    To display a photoset, do

    $("#galleria").galleria({

    // your other galleria options here...

    // set flickr plugin options here:
    flickr: 'set:72157618541455384',
    flickrOptions: {
        max: 10
    }
});

    You can also display photos by tags (use the "tags" option). The options are outlined on the plugin documentation page: