Использование Flickr при загрузке изображений в Galleria

Итак, я пытаюсь использовать фреймворк галереи изображений JavaScript Galleria. http://galleria.io/

Существует страница о том, как установить плагин Flickr, но совершенно неясно, что мы должны делать между разделом #galleria и где размещать скрипт ссылки.

Вот что у меня есть (что не работает, просто дает мне черный ящик)

<!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>

Также интересно, как связать учетную запись Flickr определенного человека?


javascript html flickr galleria
person isolatedhowl    schedule 11.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В разделе javascript — вы можете разместить его в заголовке, внизу страницы или там, где вы обычно размещаете свой код javascript — вы должны:

  • загрузить jquery
  • загрузить скрипт галереи (galleria-1.2.8.min.js)
  • загрузите скрипт подключаемого модуля галереи flickr (plugins/flickr/galleria.flickr.min.js)

Затем в блоке document.ready():

  • загрузите тему галереи, которую вы используете (классическая, двенадцатая, фолио и т. д.)
  • используйте селектор jquery, чтобы прикрепить галерею и установить параметры.

Вот пример на основе вашей HTML-страницы:

<!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>

Примечание. В приведенном выше примере кода также задается ряд параметров, позволяющих сделать галерею отзывчивой и работать с жестами смахивания на мобильных устройствах (установите для параметров «отзывчивость» и «пролистывание» значение true). Кроме того, вы должны установить ширину и высоту контейнера галереи (#galleria) в блоке стилей css или в таблице стилей, чтобы галерея знала, как правильно изменить ее размер. Если вы хотите, чтобы галерея автоматически изменяла размер галереи в ответ, установите высоту коэффициент (0,57 в примере) в опциях галереи. См. http://galleria.io/docs/ для получения более подробной информации о параметрах.

Чтобы использовать плагин flickr для отображения результатов поиска, просто укажите условие поиска и, при желании, установите «максимальное» количество отображаемых изображений (я думаю, что по умолчанию 30). В приведенном выше примере для max установлено значение 10:

$("#galleria").galleria({

    // your other galleria options here...

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

Чтобы отобразить общедоступные фотографии пользователя flickr, выполните

$("#galleria").galleria({

    // your other galleria options here...

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

Чтобы отобразить фотосет, выполните

$("#galleria").galleria({

    // your other galleria options here...

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

Вы также можете отображать фотографии по тегам (используйте опцию «теги»). Параметры описаны на странице документации плагина:

person kchan    schedule 11.12.2012