I have the following jQuery Code. What I want to do is I want to empty the am-container but I am unable to do so.
jQuery(document).find("div[id='am-container']").html('');
and following is my HTML structure.
<div class="mid-part-right">
<div class="match-image">
<div class="main-gallary">
<div class="container">
<div id="am-container" class="am-container">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 263px; height: 133px; margin: 2px;">
</div>
</div>
</div>
</div>
</div>
Here's a complete code snippet:
jQuery(document).find("div[id='am-container']").html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mid-part-right">
<div class="match-image">
<div class="main-gallary">
<div class="container">
<div id="am-container" class="am-container">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 233px; height: 133px; margin: 2px;">
<a class="draggable am-wrapper" href="#" style="width: 263px; height: 133px; margin: 2px;">
</div>
</div>
</div>
</div>
</div>
jQuery('#am-container').html('');
Try this one :
$("#am-container").children().text("");
$("div#am-container a").each(function(el){$(el).empty();});
Try:
$('#am-container').html('');
Or
$('#am-container').empty();
If you want to remove the container and its children, use:
$('#am-container').remove();
It sounds like you want to remove the element am-container not what it contains, try this
$('#am-container').remove();
You can simply use like
$("#am-container").empty();
Since you want to remove the element you're trying to select:
$('#am-container').remove();
Related
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
I've set up a animated masonry gallery with filters using this along with fancybox pop up.
What I'm trying to set up is a script that will remove the inline data-fancybox="gallery" which groups them together and allows users to scroll through the entire gallery.
When one of the filter links is clicked, it adds a "isotope-hidden" class to the images and hides them however it still belongs to the data-fancybox="gallery" so is still able to be accessed by when the pop up is enabled. I wanted to set up a script to remove this value if a specific class is found on the image.
Here is my attempted script.
How can i remove the data-fancybox="gallery" that's in the parent div of the image tag if "isotope-hidden" class is added to the image tag?
jq('.filterbutton').click(function () {
if (jq("isotope .item img").hasClass("isotope-hidden")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "");
} else if (jq("sotope .itme .img").hasClass("isotope-item")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "gallery");
}
});
#gallery-header-center-right{
display: inline-block;
width: 100%;
margin: 10px 0;
}
.gallery-header-center-right-links {
color: #333333;
float: left;
height: 35px;
padding-right: 20px;
padding-left: 20px;
margin-left: 20px;
font-size: 16px;
font-weight: 400;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
background-color: rgba(63,141,191,1);
color: rgba(255,255,255,1);
cursor: pointer;
}
.gallery-header-center-right-links-current {
color: #FFFFFF;
background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
background-color: rgba(63,141,191,0.5);
}
.filterbutton{
margin: 5px;
float: left;
}
.item{
width: 320px;
float: left;
margin: 5px;
}
.item img{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallery-header">
<div id="gallery-header-center">
<div id="gallery-header-center-right">
<div class="gallery-header-center-right-links filterbutton" id="filter-all">All</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw17">KW17</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw16">KW16</div>
</div>
</div>
</div>
<div id="gallery-content">
<div id="gallery-content-center">
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kylie.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kylie.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/next.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/next.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/nextj.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/nextj.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" class="all kw17"/>
</a>
</div>
</div>
</div>
I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.
Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});
Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have
Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});
I want to have a single type of dropdown in the whole website that behaves in a certain way:
it must open on click
it must stay open when i click inside the block that shows
it must close if i click outside of the opened block
it must close if i click again on the title * which opened the dropdown
if i click on a new dropdown, any existing opened dropdown must close
As you can see in my demo, i have all the features working except last one which works ok only partial.
If you click on dropdown 1 and than on dropdown 2, all is perfect. New one that opens will close the old one which was already opened.
Now, open again dropdown 1 (from header) and after this, click to open dropdown 3 or 4 (which are in footer area) and you will see that the dropdown from header will remain opened.
Any solution to fix this? So same type of dropdown, when opened, must close previous opened drodown regardless of it's position in the webpage. Thanks
$(".dropdown").click(function(event) {
event.stopPropagation();
$(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
Slightly modified your code, you need just play with the selectors.
$(".dropdown").click(function(event) {
event.stopPropagation();
$(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
It seems to me the problem line is this:
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
You're only removing the activated class in the parent.
Just look for $('.dropdown') directly.
Hello kinda new here,
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this
enter image description here
I tested it here http://jsfiddle.net/jazzu20/1c9yf61x/
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
You can do this:
Note: The images are not same. The best you can do is to adapt the images.
CSS
#instafeed div a{
display: block;
border: solid 10px #fff;
}
#instafeed div a img{
width: 100%;
vertical-align: top;
}
DEMO HERE
ANOTHER SOLUTION
CSS
#instafeed div a{
position: relative;
display: block;
position:relative;
overflow: hidden;
height: 250px;
}
#instafeed div a img{
position: absolute;
vertical-align: top;
z-index:-1;
left: -50%;
top: -50%;
}
DEMO HERE