I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>
It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link
Related
I have inherited a site with some broken JS. I have tried debugging, but I cant seem to figure it out. When the page loads, the first image is showing. But when any other button is clicked the image disappears and no new image shows. Sorry for the mess. I didn't write it. No need to worry about CSS in this example.
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
$('.product-images-list').hide();
$('#'+id+'-image').show();
}
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
There is a lot you could do with this, but this should get you there.
You had a few redundant onclick handlers on your input fields that I removed. I also remove the method changeMultiProduct that it called because again it was redundant.
I set the input fields with javascript but that could also be done on the backend. If you solely want to trigger the change from the input fields, setting checked to true is also redundant. It could be useful if you want to trigger the radio button from the surrounding div so I wouldn't throw out the idea entirely.
Good luck. You might want to peruse some jQuery tutorials just to save your sanity. https://learn.jquery.com/
$(document).ready(function() {
$('.product-images-list').hide();
$('#first-product-3').prop("checked", true);
$('#first-product-image').show();
const radioSelector = 'input[type="radio"][name="product"]';
$(radioSelector).change(function(e) {
$('.product-images-list').hide();
if ($(this).is(':checked')) {
const activeId = $(this).parent('div').attr('id');
$('#' + activeId + '-image').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4"class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
Looks like there was an issue with how the element was being looked up in changeMultiProduct. You were adding '-image' to the id but the id already contained that. Removing it from the method like below makes the images start appearing again.
Logging is your friend :)
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
console.log("Clicked: "+id);
$('.product-images-list').hide();
$('#'+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- When click on image -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;">
<figcaption class="img-title"> </figcaption>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default" style="margin-top: 7px;">
<div class="photo-gallary-head panel-heading ">
<h4 title="Photo Gallery" class="photo-gallary-head-name"> Photo Gallery </h4>
</div>
<div class="panel-body">
<div class="img-t humbnail">
<div class="carousel slide" id="myCarousel1" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!--/item-->
<div class="item active">
<div class="row">
<div class="col-xs-3">
<a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg">
<figcaption class="img-title">A caption for the above image.</figcaption></a>
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg">
</div>
</div>
</div>
<!--/item-->
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg">
</div>
</div>
</div>
<!--/item-->
</div>
</div>
<div id="carouselButtons" style="text-align:center; margin-top:20px">
<a class="left1 carousel-control1" href="#myCarousel1
" data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a>
<button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play">
<i class="fa fa-play-circle" style="font-size:20px"></i>
</button>
<button id="playButton" type="button" class="btn btn-default btn-md" title="Pause">
<i class="fa fa-pause-circle" style="font-size:20px"></i>
</button>
<a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.
You can try to set title or alt tag into image, i think it will take automatically as caption.
Or can you give me your slider jquery url
I have a page in which i want to display the button just side to an image ,therefore it looks like image button and so an as a loop where the implies to download but i am not good at css and I tried as below but it does not fix to my requirement.Can any one please adjust my code.Thanks in advance.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div>
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</div>
</div>
maybe this?
img.the-image-class + .the-button-class {
display: block;
margin-top: -20px; /* to move button 20px above from original position */
}
Look at output i think html was not formatted well.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="row">
<div class="pressImg col-xs-6 col-sm-6 col-md-6">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 ">
<button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</section>
May be like this,
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div class="clearfix">
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
</div>
</div>
</div>
</section>
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.
<div class="row jumbotron">
<div class="text-center">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
</div>
Nice and easy with bootstrap.
<div class="col-sm-4">
<img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
<div class="modal lightbox" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="*insert image*" class="img-responsive"/>
</div>
</div>
</div>
</div>