Jquery modal gallery не работают две колонки

174

02 октября 2018, 19:00

Всем добрый день. Столкнулся такой проблемой. Создал модальное окно с переключаемыми изображениями и со слайдером для галереи. Проблема в том, что при нажатии на блоки column 2 column 3 в модальном окне изображается только блоки column 1. Помогите разобраться. Заранее спасибо.(Вместо картинок поставил цвета).

Вот код:

$(document).ready(function() { 
  $(".row .column .image").click(function() { 
    $("#ModalGallery #modal-content #modal-image").css("display", "none"); 
    $(" #ModalGallery #modal-content #modal-image").eq($(this).index()).css("display", "block"); 
    $("#ModalGallery").show(); 
    $(".closemodal").click(function() { 
      $("#ModalGallery").hide(); 
    }); 
  }); 
}); 
 
$(document).ready(function() { 
  $("#modal-content #modal-image").each(function(e) { 
    if (e != 0) 
      $(this).hide(); 
  }); 
 
  $("#next").click(function() { 
    if ($("#modal-content #modal-image:visible").next().length != 0) 
      $("#modal-content #modal-image:visible").next().show().prev().hide(); 
    else { 
      $("#modal-content #modal-image:visible").hide(); 
      $("#modal-content #modal-image:first").show(); 
    } 
    return false; 
  }); 
 
  $("#prev").click(function() { 
    if ($("#modal-content #modal-image:visible").prev().length != 0) 
      $("#modal-content #modal-image:visible").prev().show().next().hide(); 
    else { 
      $("#modal-content #modal-image:visible").hide(); 
      $("#modal-content #modal-image:last").show(); 
    } 
    return false; 
  }); 
});

.row { 
  width: 100%; 
  padding: 3em 1em 3em 1em; 
  display: inline-block; 
  text-align: center; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  background-color: orange; 
} 
 
.column { 
  display: inline-block; 
  text-align: center; 
  width: 25%; 
  padding: 0 4px; 
  margin: 0.2em; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  vertical-align: top; 
} 
 
.image { 
  width: 100%; 
  display: block; 
  margin-top: 8px; 
  padding: 3em 1em 3em 1em; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
#ModalGallery { 
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: black; 
} 
 
#modal-content { 
  position: relative; 
  background-color: #fefefe; 
  margin: auto; 
  padding: 0; 
  width: 50%; 
} 
 
#modal-image { 
  width: 100%; 
  padding: 5em 1em 5em 1em; 
} 
 
.closemodal { 
  color: white; 
  position: absolute; 
  top: 10px; 
  right: 25px; 
  font-size: 35px; 
  font-weight: bold; 
} 
 
#prev, 
#next { 
  cursor: pointer; 
  position: absolute; 
  top: 50%; 
  width: auto; 
  padding: 1em; 
  margin-top: -50px; 
  color: white; 
  font-weight: bold; 
  font-size: 1.2em; 
} 
 
#next { 
  right: 0; 
  border-radius: 3px 0 0 3px; 
} 
 
#prev { 
  left: 0; 
  border-radius: 3px 0 0 3px; 
} 
 
#prev:hover, 
#next:hover { 
  opacity: 0.8; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="row"> 
  <div class="column 1"> 
    <div class="image" style="background-color:red;"></div> 
    <div class="image" style="background-color:yellow;"></div> 
    <div class="image" style="background-color:orange;"></div> 
    <div class="image" style="background-color:blue;"></div> 
  </div> 
  <div class="column 2"> 
    <div class="image" style="background-color:black;"></div> 
    <div class="image" style="background-color:white;"></div> 
    <div class="image" style="background-color:indigo;"></div> 
  </div> 
  <div class="column 3"> 
    <div class="image" style="background-color:violet;"></div> 
    <div class="image" style="background-color:blue;"></div> 
    <div class="image" style="background-color:red;"></div> 
    <div class="image" style="background-color:green;"></div> 
  </div> 
 
  <div id="ModalGallery"> 
    <span class="closemodal ">&times;</span> 
    <div id="modal-content"> 
      <div id="modal-image" style="background-color:red;"></div> 
      <div id="modal-image" style="background-color:yellow;"></div> 
      <div id="modal-image" style="background-color:orange;"></div> 
      <div id="modal-image" style="background-color:blue;"></div> 
      <div id="modal-image" style="background-color:black;"></div> 
      <div id="modal-image" style="background-color:white;"></div> 
      <div id="modal-image" style="background-color:indigo;"></div> 
      <div id="modal-image" style="background-color:violet;"></div> 
      <div id="modal-image" style="background-color:blue;"></div> 
      <div id="modal-image" style="background-color:red;"></div> 
      <div id="modal-image" style="background-color:green;"></div> 
      <a id="prev">&#10094;</a> 
      <a id="next">&#10095;</a> 
    </div> 
  </div> 
</div>