gallery.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. var photo = [];
  2. var maxId;
  3. var cid; //Current photo ID;
  4. function populatePhotos(){
  5. var photos = document.getElementsByClassName('photo_img');
  6. for (var i = 0; i < photos.length; i ++){
  7. var path = photos.item(i).src.substring(photos.item(i).src.lastIndexOf('/') + 1);
  8. photo.push(path);
  9. }
  10. maxId = photos.length;
  11. }
  12. function showPhoto(path, id){
  13. // Load content
  14. var x = new XMLHttpRequest();
  15. x.open("GET", "/" + path + "/" + id, true);
  16. x.send();
  17. x.onreadystatechange = function(){
  18. if(x.readyState == 4){
  19. if(x.status == 200)
  20. document.getElementById('photo_viewer').innerHTML = x.responseText;
  21. }
  22. else
  23. document.getElementById('photo_viewer').innerHTML = "";
  24. }
  25. //Show
  26. document.getElementById('screen_cover').style.display = 'block';
  27. document.getElementById('screen_cover').style.opacity = 0.7;
  28. document.getElementById('photo_viewer').style.display = 'block';
  29. document.getElementById('photo_viewer').style.opacity = 1;
  30. //Searh for path in photo array and set cid
  31. for (var i = 0; i < photo.length; i ++){
  32. if (photo[i] == id){
  33. cid = i;
  34. }
  35. }
  36. }
  37. function closeViewer(){
  38. document.getElementById('screen_cover').style.display = 'none';
  39. document.getElementById('screen_cover').style.opacity = 0;
  40. document.getElementById('photo_viewer').style.display = 'none';
  41. document.getElementById('photo_viewer').style.opacity = 0;
  42. document.getElementById('photo_viewer').innerHTML = "";
  43. }
  44. function keyDown(ev){
  45. var code = ev.keyCode; //('charCode' in event) ? event.charCode : event.keyCode;
  46. switch (code){
  47. case 27: //ESC
  48. closeViewer();
  49. break;
  50. case 37: //Left arrow
  51. if (document.getElementById('photo_viewer').innerHTML != ""){
  52. if (cid == 0){
  53. showPhotoByPath(photo[photo.length - 1]);
  54. }
  55. else{
  56. showPhotoByPath(photo[cid - 1]);
  57. }
  58. }
  59. break;
  60. case 39: //Right arow
  61. if (document.getElementById('photo_viewer').innerHTML != ""){
  62. if (cid == photo.length - 1){
  63. showPhotoByPath(photo[0]);
  64. }
  65. else{
  66. showPhotoByPath(photo[cid + 1]);
  67. }
  68. }
  69. break;
  70. }
  71. }
  72. function scrollPhoto(inc){
  73. switch(inc){
  74. case -1: //Previous
  75. if (document.getElementById('photo_viewer').innerHTML != ""){
  76. if (cid == 0){
  77. showPhotoByPath(photo[photo.length - 1]);
  78. }
  79. else{
  80. showPhotoByPath(photo[cid - 1]);
  81. }
  82. }
  83. break;
  84. case 1: //Next
  85. if (document.getElementById('photo_viewer').innerHTML != ""){
  86. if (cid == photo.length - 1){
  87. showPhotoByPath(photo[0]);
  88. }
  89. else{
  90. showPhotoByPath(photo[cid + 1]);
  91. }
  92. }
  93. break;
  94. }
  95. }