Fotogalerie von Jürgen Bierlein

Zum Teil stammt das Material aus 2004 und seit vielen Jahren nutze ich Flickr nicht mehr :(

Flickr ist ein Web-Portal das Nutzern erlaubt digitalisierte Bilder sowie digitale Videos auf Flickr zu laden und mit anderen Nutzern zu teilen.

Aufgrund von diversen Eigentümerwechsel bzw. Umbauarbeiten und Verbunden mit zahlreichen Änderungen hat es mich letztendlich bewogen, auf eine andere Plattform umzusteigen.

Diese Webseite stammt aus meinen Anfängen in Bezug auf die Erstellung einer Webpräsenz und die Punkte:

Foto-Mosaik in HTML
Anwendung einer API (Flickr)

waren letztendlich ausschlaggebend, für die Erstellung dieser Seite.

JS

 $(function () {
 'use strict';

 // Load images from flickr:
 $.ajax({
  url: 'https://api.flickr.com/services/rest/',
  data: {
   format: 'json',
   method: 'flickr.people.getPublicPhotos',
   user_id: 'deineUserID',
   extras: 'tags',
   per_page: '500',
   api_key: 'dein Key#39;
  },
  dataType: 'jsonp',
  jsonp: 'jsoncallback',
  error: function () {
   var ServerFehlerTextJBi = '<p class="text-center">Ein Serverfehler ist aufgetreten; 
   höchstwahrscheinlich bist du hinter einem Proxy-Server und dieser verhindert den Zugriff auf Flickr :(<br />d.&nbsp;h. das Fotomaterial wird dir nicht gezeigt!</p>';
   console.log("server-fehler in Verbindung mit Flickr");
   $('#links').html(ServerFehlerTextJBi);
  }
 }).done(function (result) {
  if (result.stat != "fail") {
   var linksContainer = $('#links'),
    baseUrl;
    /*var i = 0;*/
   // Add the images as links with thumbnails to the page:
   $.each(result.photos.photo, function (index, photo) {
    if (photo.tags != "") {
     // alert (photo.tags);
     var bFound = false;
     var tags = photo.tags.split(' ');
     $.each(tags, function (key, tag) {
      //alert(tag);
      if (tag == "galerie") {
       bFound = true;
       return;
      }
     });
     if (bFound === true) {
      baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
       photo.server + '/' + photo.id + '_' + photo.secret;
      $('<a/>')
       .append($('<img>').prop('src', baseUrl + '_s.jpg'))
       .prop('href', baseUrl + '_b.jpg')
       .prop('title', photo.title)
       .attr('data-gallery', '')
       .appendTo(linksContainer);
     }
    }
   });
  } else {
   alert("Error");
   console.log("Error code " + result.stat);
  }
 });

 $('#borderless-checkbox').on('change', function () {
  var borderless = $(this).is(':checked');
  $('#blueimp-gallery').data('useBootstrapModal', !borderless);
  $('#blueimp-gallery').toggleClass('blueimp-gallery-controls', borderless);
 });

 $('#fullscreen-checkbox').on('change', function () {
  $('#blueimp-gallery').data('fullScreen', $(this).is(':checked'));
 });

 $('#image-gallery-button').on('click', function (event) {
  event.preventDefault();
  blueimp.Gallery($('#links a'), $('#blueimp-gallery').data());
 });
});