I'm trying to allow for modals to be opened within the Mixitup filtration.
Whenever I click an image (either before filtering or after, it doesn't matter) the modal opens but then no buttons on the filter are active and no images are shown. Even when closing the modal, this stays the same until you press the 'All' button again.
I'd imagine it's some issue with the different data-filter/toggle/targets between the modal and the filters.
js
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
css
.mix img {
margin-bottom: 30px;
}
.mixitup-control-active {
background: #888;
}
html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://demos.kunkalabs.com/mixitup/mixitup.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Filter Example with Modals</h2>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="col-lg-12">
<div class="controls text-center">
<button type="button" class="control btn btn-filter" data-filter="all">All</button>
<button type="button" class="control btn btn-filter" data-toggle=".green">Green</button>
<button type="button" class="control btn btn-filter" data-toggle=".yellow">Yellow</button>
<button type="button" class="control btn btn-filter" data-toggle=".purple">Purple</button>
<button type="button" class="control btn btn-filter" data-toggle=".pink">Pink</button>
<button type="button" class="control btn btn-filter" data-toggle=".blue">Blue</button>
<button type="button" class="control btn btn-filter" data-toggle=".orange">Orange</button>
</div>
<hr>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mixitupContainer">
<div class="col-lg-4 col-md-6 col-sm-6 mix all">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green pink orange">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Pi,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green yellow pink">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pi" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix green purple blue">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Pu,B" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix purple blue orange">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=Pu,B,O" class="img-responsive center-block">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix all">
<a data-toggle="modal" data-target=".gif-1-modal">
<img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 -->
<div class="modal fade gif-1-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<img src="http://placehold.it/500x500" class="img-responsive center-block">
</div>
</div>
</div>
</body>
I've recreated the issue in this jsfiddle.
Basically I want the modal to open and for the filter in the background to remain as it was before I clicked the modal link.
I understand basic JS but I'm not capable of debugging this and/or knowing straight away a workaround. Any help would be very much appreciated! Sorry if it's a really simple question too..
I added some javascript and have attached a jsfiddle essentialy I am triggering the click event to the all filter when closed.
If you wanted to modify it to restore the current you could capture those to a variable (again I am not familiar with the mixitup lib and available functions)
$(document).ready(function() {
var containerEl = document.querySelector('.mixitupContainer');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
animation: {
effects: 'fade',
duration: 200,
nudge: false,
reverseOut: false
}
});
$('.gif-1-modal').on('hidden.bs.modal', function(e) {
$('#all').click();
})
});