Einbinden einer Gallerie

Dieser Text erklärt, wie das Javascript galleria.io genutzt werden kann, um bei Flickr gehostete Bilder in eure Ortsgruppen Webseite zu integrieren. Im Unterschied zu Facebook, können nur öffentliche Bilder von Flickr selbst weiterverwendet werden. Ihr bleibt also der Eigentümer eurer Bilder.

Einbinden der Skripte

Bindet die Skripte mittels des Elementes Spezielle Elemente/Reines HTML ein. Ihr könnt als Pfade die Pfade der Bezirkswebseite nehmen. Dadurch werden die Skripte etwas schneller geladen. Unter die Skript Anweisungen kommt der Container in welchem die Bilder dargestellt werden.


<script src="//tv.dlrg.de/fileadmin/groups/13010000/scripts/galleria/galleria.min.js"></script>
<script src="//tv.dlrg.de/fileadmin/groups/13010000/scripts/galleria/galleria.flickr.min.js"></script>

<p>
<div id="galleria" style="">
  Bilder werden geladen ...
</div>

<div style="">
  <a target="_blank" 
        id="galleria-source" 
        href="https://www.flickr.com/photos/138265582@N06/tags/dlrg/">
    Bei flickr.com anschauen
  </a>
</div>
</p>

Konfiguration

Als nächstes wird Galleria gestartet und konfiguriert. Am Schluss wird der Link zur Original Flickr Seite mittels getDocumentById("galleria-source") gesetzt.

Alle Parameter könnt ihr hier nachlesen: http://docs.galleria.io/collection/25-options


<script>

    var flickrSet = '72157674056532394';
  
    // Load the classic theme
    Galleria.loadTheme('/fileadmin/groups/13010000/scripts/galleria/classic/galleria.classic.min.js');

    // Initialize Galleria
    Galleria.run('#galleria', {
        lightbox: true,
        imageCrop: false,
        showInfo: false,
        // search flickr for "galleria"
        //flickr: 'search:galleria',
        flickr: 'set:' + flickrSet,
        
            flickrOptions: {
                // sort by interestingness
                //sort: 'interestingness-desc'
            }
        }
    );
  
  document.getElementById('galleria-source').setAttribute('href', 'https://www.flickr.com/photos/138265582@N06/sets/' + flickrSet);
</script>

<style>
  /* height of each image, for use on start page or 
     as a big page */
  #galleria { height:180px; background-color: #000; }

  /* hide advertising link */
  .galleria-info-link { display: none; }
</style>