我需要你的帮助。当我填充我的图片库并选择位于第二个、第三个......等位置的图像时,图像是静态的,不会动态地将位置更改为左侧的第一个。(见屏幕)
我的代码:
product_gallery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/gallery/js/gallery_button.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo"><a href="" class="logo_link">Example Page</a></div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
</div>
</body>
</html>
style_gallery.css
@font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
body {
}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double{
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
@media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
@media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double{
width: calc(100% - 4px);
}
}
@media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin:auto;
padding-top: 28px;
padding-bottom:20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
@media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top:25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
@include border-radius(50%);
display: inline-block;
@include transition( all .2s ease-in-out);
&:hover {
background-color: saturate( $pink, 20%);
}
}
.nav_buttons{
margin: 0 auto;
padding-left: 20px;
}
画廊按钮.js
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();
});
});
这是显示出了什么问题的屏幕:
您的代码非常接近工作,如果我删除网格类(在缩略图 div 上),它将产生您想要的行为而无需任何额外修改,但您很可能需要网格行为。
即使您隐藏了 img 元素,它们的父元素(a
锚元素)也不会隐藏。您应该能够隐藏/显示图像的父元素(a
锚元素)以获得所需的行为。
正如您从下面修改后的 js 中看到的,它只是在您的显示/隐藏选择器上调整的一个额外的 .parent() 调用:
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
只是对未来问题的一个额外建议:通常人们更容易回答你的问题 + 通过使用 StackOverflow 中内置的内置 Javascript/HTML/CSS 片段工具查看你所看到的(对于图像,你可以使用类似我在下面使用的占位符站点)。
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
});
});
@font-face {
font-family: "ISOCT3";
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}
body {}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double {
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
@media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
@media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double {
width: calc(100% - 4px);
}
}
@media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin: auto;
padding-top: 28px;
padding-bottom: 20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
@media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top: 25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit;
/* blue colors for links too */
text-decoration: inherit;
/* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
@include border-radius(50%);
display: inline-block;
@include transition(all .2s ease-in-out);
&:hover {
background-color: saturate($pink, 20%);
}
}
.nav_buttons {
margin: 0 auto;
padding-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo"><a href="" class="logo_link">Example Page</a></div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
<a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
</div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句