I'm trying to create a page where there is a grid of images and if you click on one of those images it will expand. Once the image has expanded and you click on the i icon that is below it, the i icon will display the information about that image.
I have managed to make the grid work the way I need it to, but getting the i icon to display the information about that image is starting to drive me insane :-D
Here is the Jqueryfunction galleryInit(){
$('#gallery li').hover(
function(){$('span',this).slideToggle('fast');},
function(){$('span',this).slideToggle('fast');
});
$(".portfolio-banner-inner li").click(function(e){
if($(".activeExpand").length > 0){
$(".portfolio-active").css({"left":"0%"});
$(".portfolio-active").prevAll().css({"left":"-100%"});
$(".portfolio-active").nextAll().css({"left":"100%"});
$(".portfolio-banner-inner li").removeClass("inactiveExpand").removeClass("activeExpand").removeAttr("style").find("img").removeAttr("style");
$(".portfolio-arrow-left-scroll").addClass("portfolio-arrow-left").removeClass("portfolio-arrow-left-scroll");
$(".portfolio-arrow-right-scroll").addClass("portfolio-arrow-right").removeClass("portfolio-arrow-right-scroll");
return false;
}
$this = $(this);
$(".portfolio-banner-inner li").addClass("inactiveExpand")
$this.removeClass("inactiveExpand").addClass("activeExpand");
$(".portfolio-slide").css({"left":"0"})
$this.parents(".portfolio-slide:first").prevAll().find(".portfolio-slide-inner li").css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"-100%"}).find("img").css({"width":"952px","height":"502px"});
$this.parents(".portfolio-slide:first").nextAll().find(".portfolio-slide-inner li").css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"100%"}).find("img").css({"width":"952px","height":"502px"});
$this.siblings().prevAll().css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"-100%"}).find("img").css({"width":"952px","height":"502px"});
$this.siblings().nextAll().css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"100%"}).find("img").css({"width":"952px","height":"502px"});
$this.css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"0"});
$this.find("img").animate({
width: '952px',//what the width of the image to be expanded is
height: '502px'//what the width of the image to be expanded is
}, 200);
$(".portfolio-arrow-left").addClass("portfolio-arrow-left-scroll").removeClass("portfolio-arrow-left");
$(".portfolio-arrow-right").addClass("portfolio-arrow-right-scroll").removeClass("portfolio-arrow-right");
});
}
function imageSlider(direction){
$activeExpandWhere = $(".activeExpand");
if($(".activeExpand").css("left") != "0px") return false;
if(direction == "right"){
$(".inactiveExpand").css({"left":"100%"});
$(".activeExpand").animate({"left":-100+"%"},500,"easeInCubic",function(){
$(this).removeClass("activeExpand").addClass("inactiveExpand");
});
if($(".activeExpand").next("li").length == 0){
if($activeExpandWhere.parents(".portfolio-slide:first").next().length == 0){
$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
$(".portfolio-slide:first").removeClass("portfolio-inactive").addClass("portfolio-active");
$(".portfolio-slide:first").find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
return false;
}
$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
$activeExpandWhere.parents(".portfolio-slide:first").next().removeClass("portfolio-inactive").addClass("portfolio-active");
$activeExpandWhere.parents(".portfolio-slide:first").next().find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
return false;
}
$(".activeExpand").next("li").animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
return false;
}
$(".inactiveExpand").css({"left":"-100%"});
$(".activeExpand").animate({"left":100+"%"},500,"easeInCubic",function(){
$(this).removeClass("activeExpand").addClass("inactiveExpand");
});
if($(".activeExpand").prev("li").length == 0){
if($activeExpandWhere.parents(".portfolio-slide:first").prev().length == 0){
$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
$(".portfolio-slide:last").removeClass("portfolio-inactive").addClass("portfolio-active");
$(".portfolio-slide:last").find(".portfolio-slide-inner li").eq(($(".portfolio-slide:last").find(".portfolio-slide-inner li").length-1)).animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
return false;
}
$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
$activeExpandWhere.parents(".portfolio-slide:first").prev().removeClass("portfolio-inactive").addClass("portfolio-active");
$activeExpandWhere.parents(".portfolio-slide:first").prev().find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
return false;
}
$(".activeExpand").prev("li").animate({"left":0+"%"},500,"easeInCubic",function(){
$(this).removeClass("inactiveExpand").addClass("activeExpand");
});
}
$(document).ready(function(e) {
galleryInit();
$(".additional-nav-info1").click(function(){
if($(".additional-nav-info-inner1").css("display") == "block"){
$(this).removeClass("active");
$(this).addClass("inactive");
$(".additional-nav-info-inner1").stop().slideToggle(250);
} else {
$(this).removeClass("inactive");
$(this).addClass("active");
$(".additional-nav-info-inner1").stop().slideToggle(250);
}
});
$(".additional-nav-info-inner1 a").hover(function(){
$(this).find("img").eq(0).fadeOut(250);
$(this).find("img").eq(1).fadeIn(250);
}, function(){
$(this).find("img").eq(0).fadeIn(250);
$(this).find("img").eq(1).fadeOut(250);
});
}