-1

У меня в футере 5 картинок. Я хочу, чтобы при нажатии на них посредине экрана сверху высвечивалась информация. К каждой картинка отдельная. Но при нажатии на них ничего не происходит, что делать? Вот мой код:

<style>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1 0 auto;
  text-align: center;
}

.footer {
  flex: 0 0 auto;
  text-align: center;
}

img {
  border: 1px solid blue;
  height: 50px;
  width: 70px;
  display: inline-block;
}

#desc {
  text-align: center;
}

.image_cart {
  display: block;
}

.image_cart img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  object-fit: cover;
}

.image_cart:not(.active) .description {
  display: none;
  font-size: x-large;
  text-align: center;
}

.hidden {
  display: none;
}

#somedesc {
  font-size: x-large;
  text-align: center;
}


}
}</style> 




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.image_cart').on('click', function() {
    $(this).toggleClass('active');
    if ( $(this).hasClass("active") )
      $("#desc").html($(this).find(".description").html());
    else
      $("#desc").html("");
 });
 $('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )')
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="desc"></div>
<div class="wrapper">
  <div class="content">Чтооо?</div>
  <div class="footer">
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg" alt />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" alt />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" alt />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" alt />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" alt />
  </div>
</div> 

картинки на которые надо нажиматьинфа2

информация которая будет на одной из картинокинфа

0

3 ответа 3

2

$(document).ready(function() {
  $('.footer img').on('click', function() {
    $(this).toggleClass('active');
    if ($(this).hasClass("active")) {
      $("#desc").html($(this).data("about1"));
      $(".content").html($(this).data("about2"));
    } else
      $("#desc, .content").html("");
  });
  $('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )')
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1 0 auto;
  text-align: center;
}

.footer {
  flex: 0 0 auto;
  text-align: center;
}

img {
  border: 1px solid blue;
  height: 50px;
  width: 70px;
  display: inline-block;
}

#desc {
  text-align: center;
}

.image_cart {
  display: block;
}

.image_cart img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  object-fit: cover;
}

.image_cart:not(.active) .description {
  display: none;
  font-size: x-large;
  text-align: center;
}

.hidden {
  display: none;
}

#somedesc {
  font-size: x-large;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="desc"></div>
<div class="wrapper">
  <div class="content">Чтооо?</div>
  <div class="footer">
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg" alt data-about1="<h3>зверь 1</h3><p>что-то о звере 1</p>" data-about2="на картинке зверь 1" />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" alt data-about1="<h3>зверь 2</h3><p>что-то о звере 2</p>" data-about2="на картинке зверь 2" />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" alt data-about1="<h3>зверь 3</h3><p>что-то о звере 3</p>" data-about2="на картинке зверь 3" />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" alt data-about1="<h3>зверь 4</h3><p>что-то о звере 4</p>" data-about2="на картинке зверь 4" />
    <img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" alt data-about1="<h3>зверь 5</h3><p>что-то о звере 5</p>" data-about2="на картинке зверь 5" />
  </div>
</div>

9
  • Я допустил ошибку в коде,уже исправил,я хочу так чтобы вместо надписи Чтоо сверху при нажатии на картинку высвечивалась информация о этой картинке Commented 6 окт. 2018 в 8:46
  • @ХаххирЗачир Что вы подразумеваете под "информация о этой картинке" ?
    – Alex
    Commented 6 окт. 2018 в 8:51
  • Ну допустим на картинке Тигр,и при нажатии на эту картинку по центру будет не большая информация о нём Commented 6 окт. 2018 в 9:09
  • @ХаххирЗачир ответ обновлен, см. upd
    – Alex
    Commented 6 окт. 2018 в 9:31
  • я хочу чтобы при нажатии на картинки в этом коде высвечивалась инфа <div id="desc"></div> <div class="wrapper"> <div class="content">Чтооо?</div> <div class="footer"> <img src="file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg" alt /> <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" alt /> <img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" alt /> <img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" alt /> <img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" alt /> </div> </div> код который был ниже-ошибка Commented 6 окт. 2018 в 9:41
0

Так?

$(document).ready(function() {
  $('.image_cart').on('click', function() {
    if ($(this).hasClass('active'))
      $(this).removeClass('active');
    else {
      $('.image_cart.active').removeClass('active');
      $(this).addClass('active');
    }
    $('body').css('background', 'url(file:///C:/Users/naza1/Desktop/jQuery/images/1.jpg )')
  });
});
.image_cart {
  display: block;
}

.image_cart img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  object-fit: cover;
}

.image_cart:not(.active) .description {
  display: none;
  font-size: x-large;
  text-align: center;
}

.hidden {
  display: none;
}

#somedesc {
  font-size: x-large;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image_cart">
 <div class="description">
    <h3 style="text-align:center">Лев</h3>
    <p style="text-align:center">Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать 250 кг.</p>
  </div>
 <img src="file:///C:/Users/naza1/Desktop/jQuery/images/2.png" descSelector="#somedesc" alt="No image" class="img-2" />
  
</div>

<div class="image_cart">     
  <div class="description">
    <h3 style="text-align:center">Барс</h3>
    <p style="text-align:center">Бла-бла-бла</p>
  </div>
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/3.png" descSelector="#somedesc" alt="No image" class="img-3" />
</div>

<div class="image_cart">      
  <div class="description">
    <h3 style="text-align:center">Тигр</h3>
    <p style="text-align:center">Бла-бла-бла</p>
  </div>
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/4.png" descSelector="#somedesc" alt="No image" class="img-4" />
</div>

<div class="image_cart">     
  <div class="description">
    <h3 style="text-align:center">Пума</h3>
    <p style="text-align:center">Бла-бла-бла</p>
  </div>
<img src="file:///C:/Users/naza1/Desktop/jQuery/images/5.png" descSelector="#somedesc" alt="No image" class="img-5" />
</div>


<div id="somedesc" class="hidden">
  <p><b>Лев</b></p>Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать
  250 кг.</div>

0

Вверху html-кода добавить

<div id="desc"></div>

Добавить класс 'hidden' в:

<div class="description hidden">

В css добавить

#desc {
  text-align: center;  
}

JS:

$('.image_cart').on('click', function() {
    $(this).toggleClass('active');
    if ( $(this).hasClass("active") )
      $("#desc").html($(this).find(".description").html());
    else
      $("#desc").html("");
});

Пример

UPD: Футер с картинками внизу страницы

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
  text-align: center;
}
.footer {
  flex: 0 0 auto;
  text-align: center;
}
img {
  border: 1px solid blue;
  height: 50px;
  width: 70px;
  display: inline-block;
}
<html>
<body>

<div class="wrapper">

  <div class="content">Text</div>

  <div class="footer">
    <img src="" alt />
    <img src="" alt />
    <img src="" alt />
    <img src="" alt />
    <img src="" alt />
  </div>

</div>

</body>
</html>

В целом, легко гуглится по запросу прижать футер к низу страницы.

10
  • так а как картинки снизу сделать? Commented 5 окт. 2018 в 18:22
  • @ХаххирЗачир, так они сейчас внизу. Или уточните задачу, как именно нужно.
    – Kosmos
    Commented 5 окт. 2018 в 18:38
  • Я хочу так,чтобы картинки были снизу,не снизу текста а снизу страницы изначально Commented 5 окт. 2018 в 19:31
  • То есть в самом низу страницы будет пять картинок,нажимаешь на одну из них и сверху страницы посредине будет информация Commented 5 окт. 2018 в 19:33
  • @ХаххирЗачир, добавил пример в ответ.
    – Kosmos
    Commented 5 окт. 2018 в 20:17

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.