I have made a gallery function, this function handles three different types of gallery, one with horizontal nav, other vertical and last one vertical with no nav.
function vid() {
var vid = $(".videoBg"),
btn = $(".wVid"),
wrap = $(".home");
$(wrap).css({
"margin-top": "220px"
});
$(vid).addClass('active');
$(btn).on("click", function() {
var vidH = $(vid).height();
if ($(vid).hasClass('active')) {
$(wrap).css({
"margin-top": vidH - 25 + "px"
});
$(this).css({
"top": vidH - 100 + "px",
"background-position": "top center"
});
$(this).text("Close");
$(vid).removeClass('active');
} else {
$(wrap).css({
"margin-top": "220px"
});
$(this).css({
"top": "100px",
"background-position": "bottom center"
});
$(this).text("Watch Video");
$(vid).addClass('active');
}
return false;
});
}
function showHide() {
var btn = $(".postComment button");
var popUp = $(".postComment .comForm.pForm");
var popUpT = $(".postComment .comForm.thanks");
var close = $(".postComment .comForm .cls");
var submt = $(".postComment .comForm button");
$(popUp).hide();
$(popUpT).hide();
$(btn).on("click", function() {
$(popUp).show();
$(close).on("click", function() {
$(this).parent().hide();
return false;
});
$(submt).on("click", function() {
$(popUpT).show();
});
});
}
function gallery(galObj, showNav, galOrient) {
$(galObj).each(function() {
var cGalObj = $(this);
//declaring gallery elements
var bigImgWrap = $(cGalObj).find(".gal .story");
var mask = $(cGalObj).find(".thumbnails");
var thumbsWrap = $(cGalObj).find(".thumbs");
var thumb = $(thumbsWrap).find("li");
var prev = $(cGalObj).find(".navGal .prev");
var nxt = $(cGalObj).find(".navGal .next");
var capHtml = $(thumb).find(".description").html();
var bigImgWrapEle = $(cGalObj).find(".dynamic");
var agentVidDesc = $(cGalObj).find(".videoDetails");
var btnG = $(cGalObj).find(".btn");
var thumbW = $(thumb).width() + 10;
var noOfThumbs = $(thumb).length;
var thumbsWrapW = noOfThumbs * thumbW;
var maskW = $(mask).width();
var secMoveCount = 0;
var noOfThumbSecsMoves = Math.floor(thumbsWrapW / maskW);
//declaring Vertical controls
var thumbH = $(thumb).height() + 10;
var thumbsWrapH = noOfThumbs * thumbH;
var maskH = $(mask).height();
var noOfThumbSecsMovesV = Math.floor(thumbsWrapH / maskH);
$(bigImgWrap).hide();
$(bigImgWrap[0]).show();
$(bigImgWrap).find(".description").html($(thumb).find(".description").eq(0).html());
$(bigImgWrapEle).attr("src", $(thumb).find("a").eq(0).attr("href"));
$(thumb[0]).parent().addClass('active');
$(thumb).find("a").off("click");
$(prev).off("click");
$(nxt).off("click");
$(prev).css("opacity", ".5");
$(agentVidDesc[0]).show();
$(agentVidDesc).addClass("active").html($(thumb).find(".description").eq(0).html());
$(thumb[0]).addClass('active');
if ($(cGalObj).hasClass("agentVideoGal")) {
$(thumb).find("a").on("click", function() {
$(thumb).removeClass('active');
$(this).parent().addClass('active');
capHtml = $(this).parent().find(".description").html();
$(agentVidDesc).html(capHtml);
$(bigImgWrapEle).attr("src", $(this).attr("href"));
return false;
});
$(btnG).on('click', function(event) {
event.preventDefault();
if ($(agentVidDesc).hasClass("active") != true) {
$(agentVidDesc).addClass("active").fadeIn('fast');
$(this).css("background-position", "0px 0 ");
} else {
$(agentVidDesc).removeClass("active").fadeOut('fast');
$(this).css("background-position", "-42px 0px");
}
});
} else {
$(thumb).find("a").on("click", function() {
$(thumb).find('a').removeClass('active');
$(this).parent().addClass('active');
capHtml = $(this).parent().find(".description").html();
$(bigImgWrap).find(".description").html(capHtml);
$(bigImgWrapEle).attr("src", $(this).attr("href"));
return false;
});
}
var opcP = function() {
if (secMoveCount > 0) {
$(prev).css("opacity", "1");
} else {
$(prev).css("opacity", ".5");
}
if (secMoveCount < noOfThumbSecsMoves) {
$(nxt).css("opacity", "1");
} else {
$(nxt).css("opacity", ".5");
}
}
$(thumbsWrap).width(thumbsWrapW);
if ($(cGalObj).hasClass("agentVideoGal") !== true) {
$(thumbsWrap).height(thumbsWrapH);
}
if ($(cGalObj).hasClass("vertical")) {
$(thumbsWrap).width("");
var thumbsWrapH = noOfThumbs / 2 * thumbH;
noOfThumbSecsMovesV = Math.floor(thumbsWrapH / maskH);
$(prev).on('click', function(event) {
var pos = $(thumbsWrap).position().top + maskH;
if (secMoveCount > 0) {
$(thumbsWrap).animate({
'top': (pos)
}, 1000, opcP)
secMoveCount--
}
return false;
});
$(nxt).on('click', function(event) {
var pos = $(thumbsWrap).position().top - maskH;
if (secMoveCount < noOfThumbSecsMovesV) {
$(thumbsWrap).animate({
'top': (pos)
}, 1000, function() {
if (secMoveCount < noOfThumbSecsMovesV) {
$(nxt).css("opacity", "1");
} else {
$(nxt).css("opacity", ".5");
}
if (secMoveCount > 0) {
$(prev).css("opacity", "1");
} else {
$(prev).css("opacity", ".5");
}
})
secMoveCount++
}
return false;
});
} else {
$(thumbsWrap).height("");
$(prev).on('click', function(event) {
var pos = $(thumbsWrap).position().left + maskW;
if (secMoveCount > 0) {
$(thumbsWrap).animate({
'left': (pos)
}, 1000, opcP)
secMoveCount--
}
return false;
});
$(nxt).on('click', function(event) {
var pos = $(thumbsWrap).position().left - maskW;
if (secMoveCount < noOfThumbSecsMoves) {
$(thumbsWrap).animate({
'left': (pos)
}, 1000, function() {
if (secMoveCount < noOfThumbSecsMoves) {
$(nxt).css("opacity", "1");
} else {
$(nxt).css("opacity", ".5");
}
if (secMoveCount > 0) {
$(prev).css("opacity", "1");
} else {
$(prev).css("opacity", ".5");
}
})
secMoveCount++
}
return false;
});
}
})
}
function validate() {
$("#commentsForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
captcha: "required"
},
messages: {
firstname: "Please enter your name",
email: "Please enter a valid email address",
captcha: "Please enter code shown in the image"
}
});
$("#ecForm").validate({
rules: {
name: "required",
contact: "required",
email: {
required: true,
email: true
},
message: "required",
captcha: "required"
},
messages: {
name: "Please enter your name",
contact: "Please enter your conatct number",
email: "Please enter a valid email address",
message: "Please enter a message",
captcha: "Please enter code shown in the image"
}
});
}
function mHover() {
var item = $(".tabCont ul li");
$(".mHover").css({
"top": 0
});
$(item).each(function() {
var cont = $(".mHover", this);
$(this).hover(function() {
$(cont).animate({
"top": -151
}, 300);
}, function() {
$(cont).animate({
"top": 0
}, 300);
})
})
}
$(document).ready(function() {
vid();
showHide();
gallery(".photoGalD");
gallery(".photoGalUpdate");
gallery(".vidgal");
gallery(".eventgal");
validate();
mHover();
$(".carousel-demo").owlCarousel({
items: 1,
navigation: true,
// Show next and prev buttons
slideSpeed: 300,
pagination: false,
singleItem: true
});
$(".carousel-demo.artCar").owlCarousel({
items: 1,
navigation: true,
// Show next and prev buttons
slideSpeed: 300,
pagination: false,
singleItem: true
});
$(".agentCategories .tabCont ul").owlCarousel({
items: 5,
navigation: true,
// Show next and prev buttons
slideSpeed: 300,
pagination: false,
singleItem: false
});
$(function() {
$('.scroll-pane').jScrollPane();
});
});
I've been learning jQuery for the last 2 years without technical background or education. I want to know my level of coding and what I can do to improve and optimize it.