lightgallery_search.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. var icons = { 'title': {img: 'text.png', alt: 'Titel / Beschreibung'},
  2. 'where': {img: 'map.png', alt: 'Ort'},
  3. 'what': {img: 'thing.png', alt: 'Sache'},
  4. 'photography': {img: 'camera.png', alt: 'Fotografie'},
  5. 'gallery': {img: 'gallery.png', alt: 'Galerie'},
  6. 'who' : {img: 'person.png', alt: 'Person'},
  7. 'year' : {img: 'calendar.png', alt: 'Jahr'},
  8. 'default' : {img: 'calendar.png', alt: 'default'},
  9. 'description' : {img: 'description.png', alt: 'Beschreibung'} };
  10. var jdata = JSON.parse(data);
  11. var metadata = JSON.parse(metadata);
  12. $(document).ready(function(){
  13. // $('#txt-search').keyup(function(){
  14. $('#txt-search').on('keyup input', function(){
  15. $('#myTab a[href="#filters"]').tab('show')
  16. var searchField = $(this).val();
  17. if(searchField === '') {
  18. $('#filter-records').html('');
  19. return;
  20. }
  21. var regex = new RegExp(searchField, "i");
  22. var output = '<div class="row">';
  23. var count = 1;
  24. $.each(jdata, function(key, val) {
  25. if (val.name.search(regex) != -1) {
  26. // console.log('Type: ' + val.type);
  27. output += '<div id="search-'+val.id+'"class="col-md-6 well" onclick="javascript:build_lightgallery('+val.id+')">';
  28. output += '<div class="col-md-3"><img class="img-responsive" src="/res/images/' + icons[val.type || 'default']['img'] + '" alt="' + icons[val.type]['alt'] + '" title="' + icons[val.type]['alt'] + '" /></div>';
  29. output += '<div class="col-md-8">';
  30. output += '<h4>' + val.name + '</h4>';
  31. output += '</div>';
  32. output += '</div>';
  33. if(count%4 == 0){
  34. output += '</div><div class="row">'
  35. }
  36. count++;
  37. }
  38. });
  39. output += '</div>';
  40. $('#filters').html(output);
  41. });
  42. });
  43. function thumb_with_path( img ) {
  44. path = img.replace(/\/.*$/gi, '');
  45. thumb = img.replace(/.*\//gi, '');
  46. return(path + '/_thumbnails/' + thumb);
  47. }
  48. function build_lightgallery(id) {
  49. console.log('build_lightgallery ' + id);
  50. record = jdata[id];
  51. if (record.type == 'gallery') {
  52. console.log(window.location + record.dir + '/');
  53. window.open(window.location + record.dir + '/');
  54. } else {
  55. images = record.images;
  56. var dynimages = [];
  57. var output = ''
  58. // i = 0;
  59. for (let img of images) {
  60. // console.log(img);
  61. // dynimages[i] = {'src': img, 'thumb': thumb_with_path(img), 'subHtml':'dummy'};
  62. output += '<div class="img-wrapper" data-src="' + img + '" data-sub-html="' + metadata[img] + '">';
  63. output += '<a href="' + img + '">'
  64. output += '<img src="' + thumb_with_path(img) + '"></a></div>';
  65. //i = i + 1;
  66. }
  67. $('#results').html(output);
  68. $('#myTab a[href="#results"]').tab('show')
  69. lightGallery(document.getElementById('results'), {
  70. plugins: [lgZoom, lgThumbnail, lgAutoplay, lgFullscreen
  71. ], /* , lgMediumZoom, lgRelativeCaption, lgShare, lgPager, lgHash */
  72. speed: 500,
  73. // licenseKey: '0000-0000-000-0000',
  74. mode: 'fade'
  75. });
  76. }
  77. }