I have 5 pictures in the footer, I want the information to be displayed on top of the screen in the middle of the screen [duplicate]

Question

This question is an exact duplicate:

How to make pictures at the bottom of the page [closed]

I have 5 pictures in my footer. I want information to appear on top of the screen when I click on them. Each picture is separate. But when you click on them, nothing happens, what to do? Here is my code:

<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>

pictures to press

information that will be on one of the pictures

Accepted Answer · 2018-10-06T08:30:49

 $(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>

I made a mistake in the code, I already corrected it, I want so that instead of the Chtoo inscription on top, when I clicked on the picture, information about this picture
@ ХаххирЗачир What do you mean by "information about this picture"?
Well, let's say Tiger is in the picture, and when you click on this picture in the center there will be not much information about it
I want to click on the pictures in this code to display infa <div id = "desc"> </ div> <div class = "wrapper"> <div class = "content"> What? </ 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> code that was below-error

Aleksey Muratov Aleksey Muratov 310 one 13 · Answer 2 · 2018-10-05T14:25:31

So?

 $(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>

Answer 3 · 2018-10-05T14:42:21

At the top of the html-code to add

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

Add 'hidden' class to:

 <div class="description hidden">

Add to 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(""); });

Example

UPD: Footer with pictures at the bottom of the page

 * { 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>

In general, it is easy to google upon request to press the footer to the bottom of the page .

I want the pictures to be from the bottom, not from the bottom of the text, but from the bottom of the page initially
That is, at the very bottom of the page there will be five pictures, click on one of them and on top of the page there will be information in the middle

I have 5 pictures in the footer, I want the information to be displayed on top of the screen in the middle of the screen [duplicate]

Reported as a duplicate by members user192664, aleksandr barakin , entithat , nörbörnën , Kirill Stoianov Oct 17 '18 at 15:25 .

3 answers 3

More articles: