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();
})
});
https://jsfiddle.net/happymacarts/8jjoLhk4/
Bootstrap uses the attribute data-toggle internally, which interferes with MixItUp.
See issue and solution on Github:
https://github.com/patrickkunka/mixitup/issues/268
Related
i have 6 products in left side div...when i click on product-1 only product-descript-1(details of product-1) will be shown in right side div and remaining details of products are hidden....
if i click on product-2 then only product-descript-2 (details of second product) is shown in the right side
and product-3 and prodcut4 and product-5 and product-6 are aslo same way
//actually i have 40 products
//suggest simple code
//instead of using this script any other simple way
<script type="text/javascript">
$(document).ready(function()
{
$("#product-1").click(function(){
$("#product-descript1").show()
$("#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6).hide()
});
}
</script>
#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>products</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/xzoom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.elevatezoom.js"></script> -->
<script type="text/javascript" src="js/xzoom.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<!--left div-->
<div class="col-lg-8 col-md-8 text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-1">
<div class="pic">
<img class="product-img" src="images/t-shirt-1.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-2">
<div class="pic">
<img class="product-img" src="images/t-shirt-2.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-3">
<div class="pic">
<img class="product-img" src="images/t-shirt-3.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-4">
<div class="pic">
<img class="product-img" src="images/t-shirt-4.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-5">
<div class="pic">
<img class="product-img" src="images/t-shirt-5.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-6">
<div class="pic">
<img class="product-img" src="images/t-shirt-6.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
</div><!--lg-8-->
<!--right-div-->
<div class="col-lg-4 col-md-4">
<div class="col-lg-12 col-md-12" id="product-descript1">
<div class="product-img">
<img src="images/bt-shirt-1.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript2">
<div class="product-img">
<img src="images/bt-shirt-2.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript3">
<div class="product-img">
<img src="images/bt-shirt-3.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript4">
<div class="product-img">
<img src="images/bt-shirt-4.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript5">
<div class="product-img">
<img src="images/bt-shirt-5.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript6">
<div class="product-img">
<img src="images/bt-shirt-6.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
</div><!--lg-4-->
</body>
</html>
Here's e simple example how to get this done using JavaScript:
let i, products = document.getElementsByClassName('product'); // get all products
for (i = 0; i < products.length; i++) {
products[i].onclick = function() {
showInfo(this.id)
}; // add onclick Event to all products
}
function showInfo(id) {
let x, infos = document.getElementsByClassName('info'); // get all infos
for (x = 0; x < infos.length; x++) {
(infos[x].id === 'info-' + id) ? infos[x].className = 'info': infos[x].className = 'info hidden'; // Show info for clicked product only
}
}
.flex {
display: flex;
width: 100%;
}
.products {
width: 140px;
}
.infos {
padding: 10px;
margin: 10px;
background: grey;
width: 100%;
}
.product {
background: grey;
color: #fff;
margin: 10px;
padding: 10px;
width: 100px;
}
.info {
width: 100%;
color: #fff;
}
.hidden {
display: none;
}
<div class="flex">
<div class="products">
<div class="product" id="product1">
Product 1
</div>
<div class="product" id="product2">
Product 2
</div>
<div class="product" id="product3">
Product 3
</div>
<div class="product" id="product4">
Product 4
</div>
</div>
<div class="infos">
<div class="info" id="info-product1">
Info 1
</div>
<div class="info hidden" id="info-product2">
Info 2
</div>
<div class="info hidden" id="info-product3">
Info 3
</div>
<div class="info hidden" id="info-product4">
Info 4
</div>
</div>
</div>
You need to use class selector so you can target all the products, for example you can use add class="product" to each product div (at the same level as product-ID ) then once the user clicks on any item with that class hide all the items with that class and show only the currently clicked one.
Here is a simple complete working solution:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="product" id="product_1">
<b>product1</b>
<p class="details">details</p>
</div>
<div class="product" id="product_2">
<b>product2</b>
<p class="details">details</p>
</div>
<div class="product" id="product_3">
<b>product3</b>
<p class="details">details</p>
</div>
<script>
$(function(){
$('.product').on('click',function(e){
$('.details').hide();
$(this).find('.details').show();
});
});
</script>
Try to understand this solution and let me know if something is unclear,
Otherwise if you find it helpful don't forget to accept this answer.
A simple working solution could to load a file into a <div>.
See below snippet. This calls an external file from your directory to be set into the <div class="Product"></div>. I have already set a filepath there via SSI so there will be content then on load (maybe content telling the user to select a product in the menu).
The menu could be anything - images, text etc. - I have just used text for this example.
For this to adjust your needs your need to edit this:
Product1: Change this to your unique ID you use in the menu.
DivToContent: Change this to the CLASS-name of the <div> you want your content.
PathTo/File1.html: Change this to the path of your file.
charset=ISO-8859-1: Change this to the charset your use
I have not provided any CSS as you may style all classes as you wish. All ID-tags are for scripts only. This can be provided with a neat transition if you want that.
For more products than six, just copy/paste below and edit the numbers.
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$(function() {
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$('#Product2').click(function(e) {
$('.DivToContent').load('PathTo/File2.html');
e.preventDefault();
});
$('#Product3').click(function(e) {
$('.DivToContent').load('PathTo/File3.html');
e.preventDefault();
});
$('#Product4').click(function(e) {
$('.DivToContent').load('PathTo/File4.html');
e.preventDefault();
});
$('#Product5').click(function(e) {
$('.DivToContent').load('PathTo/File5.html');
e.preventDefault();
});
$('#Product6').click(function(e) {
$('.DivToContent').load('PathTo/File6.html');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
// Handler to wrap a SPAN around what is selected
$(document).on('click', '.DivMenu a', function(e) {
$('.DivMenu .productselected a').unwrap( )
$(this).wrap("<span class='productselected'></span>");
});
<div class="DivMenu">
<p>
<a id="Product1" href="javascript:;">Product1</a> |
<a id="Product2" href="javascript:;">Product2</a> |
<a id="Product3" href="javascript:;">Product3</a> |
<a id="Product4" href="javascript:;">Product4</a> |
<a id="Product5" href="javascript:;">Product5</a> |
<a id="Product6" href="javascript:;">Product6</a>
</p>
</div>
<div class="DivToContent"><!--#include virtual="PathTo/File0.html"--></div>
I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/
Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/
I want to add next and previous buttons on my modal footer that will navigate to next image in the div tag. I tried different options but it isn't working.
$(document).ready(function() {
$('.thumbnail').click(function($e) {
$e.preventDefault();
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appen `enter code here`
dTo('.modal-body');
$('#myModal').modal({
show: true
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-6 class_b" id="class_b">
<h3>Screenshot Gallery</h3>
<div class="row" style="margin-top:40px;">
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 1" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 2" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 3" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 4" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 5" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-6">
<a title="Image 6" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/300x150/4286f4/ffffff?text=screenshot"></a>
</div>
</div>
</div>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="$('.modal').hide();">×</button>
<h3 class="modal-title">Heading</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button class="btn btn-default" onclick="$('.modal').hide();">Close</button>
</div>
</div>
</div>
</div>
JSFiddle
You have some errors in your JQuery code, on this line:
$($(this).parents('div').html()).appen`enter code here`dTo('.modal-body');
Here is the updated JQuery function:
$(document).ready(function() {
$('.thumbnail').click(function($e){
$e.preventDefault();
$('.modal').show();
$('.modal-body').empty();
var title = $(this).parent('a').attr('title');
$('.modal-title').html(title);
//The next line does what I think you want it to do, and is a replacement for the faulty code line
$(this).parent('a').parent('div').clone().appendTo('.modal-body');
$('#myModal').modal({show:true});
});
$('.btn-prev').click(function(){
var current = $('.modal-body').find('a').attr('title');
$('a[title="' + current + '"]').parent('div').prev('div').children('a').children('.thumbnail').trigger('click');
});
$('.btn-next').click(function(){
var current = $('.modal-body').find('a').attr('title');
$('a[title="' + current + '"]').parent('div').next('div').children('a').children('.thumbnail').trigger('click');
});
});
CodePen example: https://codepen.io/JamesDouglas/pen/vmPWoJ
Any JQuery assistance to show/hide bootstrap columns on click buttons?
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Category1</button>
<button type="button" class="btn btn-default">Category2</button>
<button type="button" class="btn btn-default">Category3</button>
</div>
This should control visible column/s in animated transition
<div class="row">
<!-- Category1 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
</div>
Try with JQuery to toggle hide/show on button click for respective category DIV.
JQuery toggle() function toggle the display property of the element.
$(document).ready(function() {
$('.btn-group').on('click', 'button', function() {
var $btn = $(this);
var categoryId = $btn.data('categoryId');
$('#' + categoryId).toggle();
});
});
Respective id of category div is added as data attribute on each button.
Complete sample code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.btn-group').on('click', 'button', function() {
var $btn = $(this);
var categoryId = $btn.data('categoryId');
$('#' + categoryId).toggle();
});
});
</script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-category-id="Category1">Category 1</button>
<button type="button" class="btn btn-default" data-category-id="Category2">Category 2</button>
<button type="button" class="btn btn-default" data-category-id="Category3">Category 3</button>
<div class="row">
<!-- Category1 -->
<div class="col-lg-4" id="Category1">Category 1</div>
<!-- Category2 -->
<div class="col-lg-4" id="Category2">Category 2</div>
<!-- Category3 -->
<div class="col-lg-4" id="Category3">Category 3</div>
</div>
</div>
I could find Codepen sample using Isotope. Just the way I needed.
<div id="filters" class="button-group">
<button class="btn btn-primary" data-filter="*">show all</button>
<button class="btn btn-primary" data-filter=".web">WEB</button>
<button class="btn btn-primary" data-filter=".design">DESIGN</button>
</div>
<div class="container-fluid no-gutter">
<div id="posts" class="row">
<div id="1" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
<div id="2" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/nature">
</div>
</div>
<div id="3" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/people/1">
</div>
</div>
<div id="4" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/technics">
</div>
</div>
<div id="5" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/transport/1">
</div>
</div>
<div id="6" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/sports">
</div>
</div>
<div id="7" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/business/1">
</div>
</div>
<div id="8" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//placekitten.com/600/600" title="Can you believe it??">
</div>
</div>
</div>
</div>
Here is the code: http://codepen.io/bmodena/pen/Fybdu
I've tried to implement answers I found on stackoverflow asked by other people, but I'm not getting the results that I want.
I have an about section on a site I'm building. In that section I have four different about items. At the bottom is a button and when that button is clicked I want the four boxes to be hidden and for a large about item to appear(show) in their place and display the information of the about item who's button was clicked. With the code I have now, when I click one of the buttons, all large about item divs show up instead of just one. Is it possible to just display only one large about item(showfullabout) when clicked, instead of all four? I want to individually show items when clicked.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-justify-left"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-image"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-monitor"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-location"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<!--CSS-->
.showfullabout{
display:none;
}
<!--Script-->
$("button.full-about").click(function(){
$(".about-item").hide();
$(".showfullabout").fadeToggle(500);
});
$("button.small-about").click(function(){
$(".about-item").fadeToggle(500);
$(".showfullabout").hide();
});
You need to use relative selectors to find the target elements
$("button.full-about").click(function () {
$(".about-item").hide();
$(this).closest(".about-item").parent().prev('.showfullabout').fadeIn(500);
});
$("button.small-about").click(function () {
$(this).closest(".showfullabout").hide();
$(".about-item").fadeToggle(500);
});
Demo: Fiddle
In the case of button full-about you need to hide all about-item elements and show the previous sibling of the ancestor about-item's parent, the opposite for small-about button