i have few menu when i click on dat menu it will show me image but i am getting each image in one line and it display on only one menu name other are not working
<style>
.our-gallery .bg-img-2
{
background: url(images/gallery/bg-2.png)no-repeat scroll right bottom;
padding-bottom: 50px;
padding-top: 80px;
}
.col-md-offset-2
{
margin-left: 16.66666667%;
}
.our-gallery
{
position: relative;
background: url(http://www.maurizioca.com/wp-content/uploads/2015/05/hummingbird-algorithm-inbound-marketing-seo.png)no-repeat scroll left top;
background-color: #f1f1f1;
background-size: 23%;
background-position: -17px -15px;
margin-left: 41px;
margin-right: 41px;
}
.gallery-menu ul li
{
color: #535353;
cursor: pointer;
display: inline-block;
font-weight: 600;
margin-left: 35px;
text-transform: uppercase;
}
default.css:122 li
{
list-style: none;
}
.gallery-menu ul li.active
{
color: #e54c2a;
}
.single-item-gallery:hover img
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
style.css:557 .single-item-gallery > img
{
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.single-item-gallery a
{
background: #fff none repeat scroll 0 0;
border-radius: 50%;
color: #e54c2a;
font-size: 22px;
height: 40px;
left: 0;
line-height: 40px;
margin: -20px auto 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
position: absolute;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
width: 40px;
z-index: 999;
}
.mdi
{
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.mfp-container
{
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
button.mfp-arrow
{
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
magnific-popup.css:211 .mfp-arrow-right
{
right: 0;
}
magnific-popup.css:166 .mfp-arrow
{
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
magnific-popup.css:73 .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
default.css:66 a, button, input
{
outline: medium none;
color: #4FC1F0;
}
default.css:37 a, button
{
font-family: 'Raleway' , sans-serif;
}
.mfp-zoom-out-cur .mfp-image-holder .mfp-close
{
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
magnific-popup.css:150 .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close
{
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
magnific-popup.css:147 .mfp-close-btn-in .mfp-close
{
color: #333;
}
magnific-popup.css:108 button.mfp-close, button.mfp-arrow
{
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
magnific-popup.css:126 .mfp-close
{
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace;
}
magnific-popup.css:73 .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.info
{
background-color: #e54c2a;
filter: alpha(opacity=80);
opacity: 0.8;
position: absolute;
display: block;
text-align: center !important;
}
.info button
{
position: relative;
top: 45%;
border-radius: 7px;
}
.thumbnail
{
border: none !important;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var info = $(".info");
$(".picture").bind("mouseenter", function () {
var p = GetScreenCordinates(this);
$("input", info).attr("rel", this.src);
$('[id*=imgSelectedProduct]').attr('src', $(this).attr('src'));
info.show();
info.css("height", $(this)[0].offsetHeight);
info.css("width", $(this).width());
info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
});
$(".info button").bind("mouseenter, mousemove, mouseover", function () {
info.show();
});
$(".picture").bind("mouseleave", function () {
info.hide();
});
$("[id*=imgPopUp]").bind("click", function () {
$(".picture")
$('[id*=lblDescription]').html('Your Description');
$('[id*=myModal]').modal('show');
return false;
});
});
function GetScreenCordinates(obj) {
var p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while (obj.offsetParent) {
p.x = p.x + obj.offsetParent.offsetLeft;
p.y = p.y + obj.offsetParent.offsetTop;
if (obj == document.getElementsByTagName("body")[0]) {
break;
}
else {
obj = obj.offsetParent;
}
}
return p;
}
</script>
<div class="our-gallery">
<div class="bg-img-2">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title grey_bg mb-50 text-center">
<h2 class="mb-50">
our gallery</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation
ullamco laboris nisi.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="gallery-menu fix text-center mb-60">
<ul>
<li class="active" data-filter="*">all</li>
<li data-filter=".babylon">babylon</li>
<li data-filter=".nasa">nasa</li>
<li data-filter=".malgudi">malgudi days</li>
<li data-filter=".sweets">sweets & namkin</li>
<li data-filter=".hotel">hotel</li>
</ul>
</div>
<div id="divgallery" runat="server">
</div>
public void Gallery()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll(" ");
string str = string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='gallery-item-box row' style='position:relative; height:1548px;'>
<div class='col-md-4 col-sm-6 col-xs-12 gallery-item all mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
if (objgallery.ListclsEventGallery[i].IsBabylon == true)
{
ISBabyloan();
}
if (objgallery.ListclsEventGallery[i].IsNasa == true)
{
IsNasa();
}
if (objgallery.ListclsEventGallery[i].IsMalgudidays == true)
{
IsMalgudidays();
}
if (objgallery.ListclsEventGallery[i].IsKavyaSweet == true)
{
IsKavaySweets();
}
if (objgallery.ListclsEventGallery[i].IsKavyaHotel == true)
{
IsKavyaHotel();
}
//else
//{
// str = "No Image";
//}
str +=@"</div>";
}
divgallery.InnerHtml = str;
}
public void ISBabyloan()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll("and isBabylon=1");
string str=string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
}
}
public void IsNasa()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll("and isNasa=1");
string str = string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
}
}
public void IsMalgudidays()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll("and isMalgudidays=1");
string str = string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
}
}
public void IsKavaySweets()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll("and isKavyaSweet=1");
string str = string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
}
}
public void IsKavyaHotel()
{
clsEventGallery objgallery = new clsEventGallery(true);
objgallery.SelectAll("and isKavyaHotel=1");
string str = string.Empty;
for (int i = 0; i < objgallery.ListclsEventGallery.Count; i++)
{
str += @"<div class='col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30' style='position:absolute;
left:0px; top:0px;'>
<div class='single-item-gallery'>
<a href='images/gallery/1.jpg'><span class='plus'><i class='mdi mdi-plus'></i></span>
</a>
<img src='../images/Gallery/" + objgallery.ListclsEventGallery[i].GalleryID + objgallery.ListclsEventGallery[i].ImgExtension + @"' alt=''/>
</div>
</div>";
}
}
}
