Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

Introduction

In this image gallery, I wanted to create the effect of intersecting lines to highlight the selected image in a grid like a crosshair. I used differing opacities of images horizontally across from the current image and vertically above or below the image to achieve this effect. This gallery uses jQuery Masonry to achieve the animated resizing effect of the grid.

Grid Calculations

I use jQuery to calculate things like the number of columns (because the width is fluid), current row and current column of the selected box in the image gallery. Then I use nth-child to set classes for the first and last image of each row.

The first number in the boxWidth variable represents the margin in between the images while the second number represents the width of the image. If you want to change the margin and the image size, then you must remember to change this as well.

		var boxWidth = 10 + 100;
		var currentBox;
		var currentRow;
		var currentCol;

		var gridWidth =	$('#container').width();
		var n = gridWidth / boxWidth;
		var numColumn = Math.floor(n);
		
		
		$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
		$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
	
		$(window).resize(function() {

			      	$('div.box').removeClass('lastBox').removeClass('firstBox');
					var gridWidth =	$('#container').width();
					var n = gridWidth / boxWidth;
					var numColumn = Math.floor(n);

					$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
					$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');

		});

Indicators

The first part of this effect consists of two indicators, one on top and one on the left that slide to the current row or column of the selected box in the image gallery.

In order for the top indicator to always be visible even when scrolling down, I made the div fixed position. The indicators themselves are made from css:

#topIndicator-wrapper{
	width: 100px;
	position: relative;
	padding: 0 10px 5px 35px;
}
#topIndicator-rectangle{
	width: 100px;
	height: 7px;
	background-color: #fff;
}
#topIndicator-triangle{
	border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 7px;
    height:0;
    width:0;
	left: 43px;
	position: relative;
}

#leftIndicator-wrapper{
	float: left;
	height: 100px;
	width: 15px;
	top: 10px;
	display: block;
	position: relative;
	padding: 0 10px 5px 0;
}
#leftIndicator-rectangle{
	width: 7px;
	height: 100px;
	background-color: #fff;
}
#leftIndicator-triangle{
	border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 8px;
    height:0;
    width:0;
	left: 7px;
	top:42px;
	position: absolute;
}

Differing Opacities

I use this script in jQuery to calculate and animate the necessary things when you hover over an image:
I also have a hover function over the large container holding the images telling them to lower the opacity only when you mouseover.

		$('#container').hover(
				  function () {
					$('#container .box').animate({opacity: '.25'}, {queue: false});
				 }, 
				  function () {	
					$('#container .box').animate({opacity: '1'}, {queue: false});
					$('#topIndicator-wrapper').animate({left: 0}, {queue: false});
					$('#leftIndicator-wrapper').animate({top: 100}, {queue: false});
					$('#leftIndicator-wrapper').css({position: 'fixed'});
				 }
		);		
		$('.box').hover(
				  function () {
					$('div.box').removeClass('lastBox').removeClass('firstBox');
					var gridWidth =	$('#container').width();
					var n = gridWidth / boxWidth;
					var numColumn = Math.floor(n);

					$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
					$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
					
					currentBox = $(this).parent().children().index(this) + 1;
					r = currentBox / numColumn;
					currentRow = Math.ceil(r);
					currentCol = currentBox - numColumn*(currentRow-1);
					
					$('#topIndicator-wrapper').animate({left: 110*(currentCol-1)}, {queue: false});
					$('#leftIndicator-wrapper').animate({top: 10+110*(currentRow-1)}, {queue: false});	
					$('#leftIndicator-wrapper').css({position: 'relative'});			
					$(this).prevUntil("div.lastBox").animate({opacity: '.5'}, {queue: false});
					$(this).nextUntil("div.firstBox").animate({opacity: '.5'}, {queue: false});
					$('div.box:nth-child(' + numColumn + 'n + ' + currentCol +')').animate({opacity: '.50'}, {queue: false});
					$(this).animate({opacity: '1'}, {queue: false});
				 }, 
				  function () {	
					$('.box').animate({opacity: '.25'}, {queue: false});
				 }
		);

The prevUntil and nextUntil selects every div like the selected div until a specified marker. This is where the first and last images of each row comes into use. Those are the end markers allowing for the script to only select divs in the same row as the selected image.

The nth-child selector after that is the selector that selects all the divs above and below the selected image.

The indicators are also animated at the same to follow to the current row and column.

Conclusion

This code was thrown together rather quickly, so if there are any redundancies or things that could be done better, please let me know in the comments below. Feedback on this image gallery is also encouraged.

In case you missed them, here is the Demo and the Download links.

The post Create a grid Image Gallery that has intersecting highlights with jQuery and CSS appeared first on webdesigncrowd.com.