2
私はポートフォリオギャラリーを作成していますが、LightGalleryとアイソトープを使用してカトリックをフィルタリングしていますが、1つのフィルタボタンが押されたときにボタンのアクティブ状態、ボタンに追加するクラス。アイソトープフィルタリングボタンの状態が機能しない
jQueryコードは以下のとおりです。と私のCodePen
$('.button').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
助けてください。ありがとうございました。
$gallery = $('#gallery');
$gallery.lightGallery({
mode: 'lg-fade',
hash: true \t ,
download: true,
enableDrag: true,
enableSwipe: true,
thumbnail:true,
animateThumb: true,
showThumbByDefault: true
});
//isotope Code
$('#gallery').isotope({
// options
itemSelector: '.revGallery-anchor',
layoutmode: 'fitrows'
});
$('button').on('click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
//button active mode
$('.button').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
//CSS Gram Filters on Mouse enter
$("#gallery a .nak-gallery-poster").addClass("inkwell");
$("#gallery a").on({
mouseenter : function() {
$(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("xpro2");
},
mouseleave : function() {
$(this).find(".nak-gallery-poster").removeClass("xpro2").addClass("inkwell");
}
});.revGallery-anchor, .gal-overlay, .nak-gallery-poster{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.revGallery-anchor{
overflow: hidden;
position: relative;
width: 25%;
display: block;
float: left;
border: 5px solid #e9e9e9;
}
.gal-overlay{
display: block;
width: 100%;
height: 100%;
background: rgba(27,27,27, 0.6);
position: absolute;
top: 0;
left: 0;
transition: background .4s ease;
-webkit-transition: background .4s ease;
}
\t \t
.revGallery-anchor:hover .gal-overlay{
background: rgba(27,27,27, 0);
}
.nak-gallery {
display: block;
width: 100%;
position: relative;
margin-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nak-gallery-poster{
padding-bottom:100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.revGallery-anchor:hover .nak-gallery-poster{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
.img-responsive{
display:none;
}
.button{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 200px;
height: 48px;
border: 1px solid rgba(0,169,157,1);
background-color: rgba(0,169,157,1);
border-radius: 2px;
color: #fff;
letter-spacing: 2px;
}
.button:hover {
background-color: #363636;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="button is-checked" data-filter="*">ALL</button>
<button type="button" class="button" data-filter=".design">DESIGN</button>
<button type="button" class="button" data-filter=".branding">BRANDING</button>
<div class="nak-gallery nlg1" id="gallery">
<a href="http://unsplash.com/photos/GYNxcQvBNzA/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/GYNxcQvBNzA/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a> \t
<a href="http://unsplash.com/photos/ssAcdlJRsI4/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/ssAcdlJRsI4/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/ssAcdlJRsI4/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a> \t
<a href="http://unsplash.com/photos/EKIyHUrUHWU/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/EKIyHUrUHWU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/EKIyHUrUHWU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a> \t
<a href="http://unsplash.com/photos/CFi7_hCXecU/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/CFi7_hCXecU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster img-responsive" style="background-image:url('http://unsplash.com/photos/CFi7_hCXecU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a> \t
</div>
あなたは、このソリューションを試してみましたか？ –
はい、試しました。もう1つ教えてもらえますか？私はギャラリー全体を中央に揃えたいと思います.3つの画像があれば、それらは左に揃えられます。私はそれらを中心にしたいと思います。 – Kamalakannan
BTW。ありがとうBharatsing .. – Kamalakannan