На Stackoverflow было задано много похожих вопросов. Но после нескольких дней экспериментов с другими решениями здесь я не могу найти ни одного, которое точно соответствовало бы тому, что я пытаюсь сделать.
Я хочу создать контейнер фиксированного размера, который всегда имеет одинаковую высоту от верха страницы и всегда одинаковое поле слева от страницы. Контейнер имеет миниатюры внизу (у которых в конечном итоге будут стрелки справа для прокрутки вверх / вниз - еще не так далеко) и более крупное изображение, отображаемое выше, с информацией в отдельном поле справа от большего изображения. . Каждый раз, когда щелкают по миниатюре, увеличенное изображение изменяется, отображая увеличенную версию новой миниатюры вместе с соответствующей информацией.
Все миниатюрные изображения имеют размер 150 x 150. Все изображения большего размера имеют размер 300 x 300. Информация, отображаемая в информационном поле, представляет собой текст img alt. Все изображения хранятся в той же папке, что и код, и имеют те же имена файлов, но с измененными значениями «большой палец» или «большой». Например, image_01_thumb.png или image_01_large.png.
У меня есть несколько существующих элементов на моей странице, которые используются по умолчанию для всего сайта, и я считаю, что они могут вызывать проблемы.
$('#thumbs img').click(function() {
$('#largeimage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
});* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pic1.png);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 45px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 540px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
#thumbs {
padding-top: 10px;
overflow: hidden;
}
#largeImage {
padding: 4px;
}
#thumbs img {
float: left;
margin-right: 0px;
opacity: 0.8;
padding: 4px;
}
#thumbs img:hover {
opacity: 1;
}
#description {
background: black;
color: white;
position: relative;
bottom: 0;
padding: 10px 20px;
width: 230px;
margin: 5px;
}
#panel {
position: relative;
}
#gallery {
position: absolute;
height: 520px;
width: 660px;
margin-left: 30px;
margin-top: 180px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang = "en">
<head>
<title>PROJECTS</title>
<link rel = "shorcut icon" href = "favicon.png" type = "image/png">
<link rel = "icon" href = "favicon.png" type = "image/x-icon">
<link rel = "stylesheet" href = "style.css" type = "text/css">
<script type = "text/javascript" script src = "portgrid.js"></script>
</head>
<body>
<header>
<div class = "row">
<div class = "logo">
<img src = "logo.png">
</div>
<ul class = "main-nav">
<li><a href = "index.html">HOME</a></li>
<li><a href = "portabout.html">ABOUT</a></li>
<li class = "active"><a href = "portprojects.html">PROJECTS</a></li>
<li><a href = "portconnect.html">CONNECT</a></li>
</ul>
</div>
<!-- the image container -->
<div id = "gallery">
<div id = "panel">
<img id = "largeImage" src = "image_01_large.png" />
</div>
<div id = "thumbs">
<img src = "image_01_thumb.png" alt = "TBN" />
<img src = "image_02_thumb.png" alt = "Brain" />
<img src = "image_03_thumb.png" alt = "AWG" />
<img src = "image_04_thumb.png" alt = "Building" />
</div>
</div>
</header>🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Код в порядке, проблема в том, что вы неправильно написали ID большого изображения в Js, это #largeImage, а не #largeimage
$('#thumbs img').click(function() {
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
});