Developer от Бога

DV

четверг, 6 июля 2017 г.

JavaScript. Создание простой Галереи изображений

Пример кода для отображения галереи. В данном примере не используется JQuery или другие подобные библиотеки. Только чистый JavaScript.
С HTML все понятно. Есть страница выводящая гипертекст изображений, первоначально на странице только один div id='gallery' . CSS отображает стиль страницы как высше упомянутого div id='gallery' так и другие блоки div которых нет, но будут созданы уже самим кодом JavaScript. Более детально описание работы кода галереи будет рассмотрено в следующей статье.
Стартовая страница галереи. HTML:







  1. <html>
  2. <html>
  3. <head>
  4. <link rel='stylesheet' href='gallery.css' type='text/css' media='screen'>
  5. <script type='text/javascript' src='galaryjs.js'></script>
  6. </head>
  7. <body>
  8. <div id='galary'>
  9. <img src='1.jpg' onClick='img_up(src)' >
  10. <img src='2.jpg' onClick='img_up(src)' >
  11. <img src='3.jpg' onClick='img_up(src)'>
  12. <img src='4.jpg' onClick='img_up(src)' >
  13. <img src='5.jpg' onClick='img_up(src)' >
  14. <img src='6.jpg' onClick='img_up(src)'>
  15. <img src='7.jpg' onClick='img_up(src)' >
  16. <img src='8.jpg' onClick='img_up(src)' >
  17. <img src='9.jpg' onClick='img_up(src)'>
  18. </div>
  19. </body>
  20. </html> 
  21.  


Файл CSS который описывает отображение главного окна страницы, и других элементов которые только в будущем будут созданы программой.



  1. #div_all_id{
  2. width: 100%;
  3. height: 100%;
  4. position: fixed;
  5. background: black;
  6. opacity: 0.4;
  7. }
  9. #div_image{
  12. background: black;
  14. }
  15. #div_image img{
  16. position: absolute;
  17. margin-left: 10%;
  18. border: 20px solid black;
  19. border-radius: 30px;
  20. border-bottom: 50px solid #101018;
  21. width: 75%;
  22. }
  24. #gallery{
  25. background: black;
  26. position: absolute;
  28. }
  29. #gallery img{
  30. align-content: center;
  31. height: 230px;
  34. }
  35. #div_bt {
  36. position: fixed;
  37. }
  38. #div_bt img{
  39. margin-left: 2%;
  40. }
  42. #st_back {
  43. margin-top: 5%;
  44. position: fixed;
  46. }
  47. #st_back:hover {
  49. background: gray;
  50. border: 2px solid white;
  51. border-radius: 3px;
  52. opacity: 0.7;
  53. }
  56. #st_next {
  57. margin-top: 10%;
  58. position: fixed;
  60. }
  61. #st_next:hover {
  63. background: gray;
  64. border: 2px solid white;
  65. border-radius: 3px;
  66. opacity: 0.7;
  67. }
  70. #st_dwnld {
  71. margin-top: 15%;
  72. position: fixed;
  74. }
  75. #st_dwnld:hover {
  77. background: gray;
  78. border: 2px solid white;
  79. border-radius: 3px;
  80. opacity: 0.7;
  81. }
  84. #st_close {
  85. margin-top: 20%;
  86. position: fixed;
  88. }
  89. #st_close:hover {
  91. background: red;
  92. border: 2px solid white;
  93. border-radius: 3px;
  94. opacity: 0.7;
  95. } opacity: 0.7;
  96.  



Код Javascript управляющий логикой галереи:







  1. var id_img=0; //number images
  2. var ln_img=0;
  3. var img_path=0;
  4. function img_up(img_src){
  5. var elem=document.getElementById("galary");
  6. var elems=elem.getElementsByTagName('img');
  7. id_img=search_img(img_src,elems);
  8. ln_img=elems.length;
  9. varаdiv_allа=аdocument.createElement('div');
  10. div_all.id="div_all_id";
  11. document.body.appendChild(div_all);
  12. varаdiv_txа=аdocument.createElement('div');
  13. div_tx.id="div_image";
  14. document.body.appendChild(div_tx);
  15. img_path=document.images[id_img].src;
  16. div_tx.innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";
  17. varаdiv_buttonа=аdocument.createElement('div');
  18. div_button.id="div_bt";
  19. document.body.appendChild(div_button);
  20. div_button.innerHTML="<img id='st_back' src='back.png' height='30' title='back' onclick='back()'>";
  21. div_button.innerHTML+="<img id='st_next' src='next.png' height='30' title='next' onclick='next()'>";
  22. div_button.innerHTML+="<img id='st_dwnld' src='dwnld.png' height='30' title='download' onclick='img_dwnld()' >";
  23. div_button.innerHTML+="<img id='st_close' src='close.png' height='30' title='close' onclick='img_cls()' >";
  24. }
  25. function img_cls(){
  26. var remel=document.getElementById("div_image");
  27. remel.parentNode.removeChild(remel);
  28. var rem_ove=document.getElementById("div_all_id");
  29. rem_ove.parentNode.removeChild(rem_ove);
  30. var rem_ove=document.getElementById("div_bt");
  31. rem_ove.parentNode.removeChild(rem_ove);
  32. }
  33. function search_img(img_src,elems){
  34. for(var i=0; i<elems.length; i++)
  35. if(document.images[i].src==img_src) {return i;}
  36. }
  37. function next(){
  38. id_img+=1;
  39. if(id_img<=ln_img)
  40. {
  41. document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
  42. else id_img=(ln_img-2);
  43. img_path=document.images[id_img].src;
  44. }
  45. function back(){
  46. id_img-=1;
  47. if(id_img>=0)
  48. {
  49. document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
  50. else id_img=0;
  51. img_path=document.images[id_img].src;
  52. }
  53. function img_dwnld(){
  54. window.open(img_path);
  55. } ndow.open(img_path);
Автор: на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)