尽管我设置了hash
url
中删除了我的原始 hash:false
问题:我不希望 lightGallery 设置任何hash
并删除任何原始的hash
我正在使用 lightGallery 这样的设置:
{
src: imgUrl,
thumb: imgUrl,
hash:false
}
这是我的代码:https://codepen.io/anon/pen/REMLQr
$(document).ready(function() {
setTimeout(function(){
window.location.hash = "my_original_hash";
console.log('settt');
},1200);
$('#dynamic li').on('click', function(e) {
var imgUrl = $(this).find('img').attr('data-src');
$('.image-wrapper img').attr('src',imgUrl);
});
$('.image-wrapper').on('click',function(){
var imgUrl = $(this).find('img').attr('src');
$(this).lightGallery({
dynamic: true,
hash:false,
dynamicEl: [{
src: imgUrl,
thumb: imgUrl,
}]
});
});
});
body {
background-color: #152836;
color: #eee;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.small {
font-size: 11px;
color: #999;
display: block;
margin-top: -10px
}
.cont {
text-align: center;
}
.page-head {
padding: 60px 0;
text-align: center;
}
.page-head .lead {
font-size: 18px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 50px;
margin-top: 0;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
}
.btn-lg {
border-radius: 2px;
font-size: 18px;
line-height: 1.33333;
padding: 10px 16px;
}
.btn-primary:hover {
background-color: #fff;
color: #152836;
}
.btn-primary {
background-color: #152836;
border-color: #0e1a24;
color: #ffffff;
}
.btn-primary {
border-color: #eeeeee;
color: #eeeeee;
transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}
.page-head h1 {
font-size: 42px;
margin: 0 0 20px;
color: #FFF;
position: relative;
display: inline-block;
}
.page-head h1 .version {
bottom: 0;
color: #ddd;
font-size: 11px;
font-style: italic;
position: absolute;
width: 58px;
right: -58px;
}
.demo-gallery > ul {
margin-bottom: 0;
padding-left: 15px;
}
.demo-gallery > ul > li {
margin-bottom: 15px;
width: 180px;
display: inline-block;
margin-right: 15px;
list-style: outside none none;
}
.demo-gallery > ul > li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a {
border: 3px solid #04070a;
}
.image-wrapper{
width:300px;
height:200px;
border:1px solid red;
}
.image-wrapper img{
max-width: 300px;
max-height: 200px;
width: 300px;
height: 200px;
object-fit: cover;
box-shadow: 0 8px 8px rgba(1,67,163,.24), 0 0 8px rgba(1,67,163,.12), 0 6px 18px rgba(43,133,231,.12);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet"/>
<div class="image-wrapper">
<span style="color:#fff;">click to preview image</span>
<img src="https://via.placeholder.com/150/0000FF/808080%20?Text=Digital.com%20C/O%20https://placeholder.com/">
</div>
请提前帮助我!!!
答案 0 :(得分:0)
这是因为hash
在dynamicEl
中不是有效的选项:您只需将其上移一个级别,它就可以工作。换句话说,它应该与dynamic
和dynamicEl
键位于同一级别:
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
src: imgUrl,
thumb: imgUrl
}],
hash: false
});