Create 3 separate portfolio sections on one page

[PA_frba06Participant]

I’d like to take the index.html page with the 4-column portfolio section in place, keep the bxslider underneath and then add another 4-column portfolio section under that.

The page layout I’d like to use would be:

4-column portfolio
bxslider
4-column portfolio
bxslider
3-column portfolio

I have no problem laying this out on the page correctly but for some reason the “item-info-overlay” fills the screen fully if another separate portfolio is added on the page in another section? All I’m looking for is a functional, clickable, duplication in the other sections without the overlay filling the entire page. Please direct me to specific css or js files I would need to manipulate to get the overlay to work correctly in other sections. I’m under a deadline and hope that you can respond soon. I greatly appreciate any help that you can provide and Supernovq is a very well designed template. Thanks

---

  PA_frba06Quote

[Brankic1979Keymaster]

May I see online URL of this page with 3 portfolios?

---

  Brankic1979Quote

[PA_frba06Participant]

Here is the link:

http://www.frbatlanta.org/designers/13ar/template/index.html

You can see that the overlay hover appears correctly in the first four-column portfolio. The overlay hover doesn’t appear in the middle or second 4 column section—as well as the bottom 3 column portfolio. When you scroll to the top of the page completely, the entire page fills with the overlay color, as if a div isn’t closed up or something? The second section only has one use commented portfolio pane (the first one). Please direct me to the specific js or css file that needs altering to make the overlay work in all portfolio views for this page:

4-column portfolio
bxslider
4-column portfolio
bxslider
3-column portfolio

---

  PA_frba06Quote

• This reply was modified 4 years, 10 months ago by  PA_frba06.
• This reply was modified 4 years, 10 months ago by  PA_frba06.

[Brankic1979Keymaster]

Hi,

In javascript/jquery,isotope.min.js duplicate

	if ($("#thumbs").length > 0){
		var $container = $('#thumbs');
		  $container.isotope({
			itemSelector : '.item', 
			animationEngine : 'jquery',
			animationOptions: {
				duration: 250,
				easing: 'linear',
				queue: false
			}
		  });
		 
		$(window).resize(function() {
			var $container = $('#thumbs');
				$container.isotope({
					itemSelector : '.item',
					animationEngine : 'jquery',
					animationOptions: {
						duration: 250,
						easing: 'linear',
						queue: false
					}
			});
		});
	

	  	
		// filter items when filter link is clicked
		$('#portfolio-nav a, #gallery-nav a').click(function(){
											 //alert("CLICK")
			  var selector = $(this).attr('data-filter');
			  $container.isotope({ filter: selector });
			  
			  $("#portfolio-nav li, #gallery-nav li").removeClass("current");
			  $(this).closest("li").addClass("current");
			  
			  return false;
		});
	}

and change #thumbs to #thumbs1, #thumbs2, #thumbs3

In index.html change ID thumbs to thumbs1, thumbs2, thumbs3

I think this was the reason, but if this doesn’t help, don’t hesitate to ask again…

---

  Brankic1979Quote

[PA_frba06Participant]

Wow…. I handle to mess around with the jQuery a bit but on second attempt it worked fine! I’m an extremely happy customer, I lost some years of my life trying to figure this out on my own. Appreciate the help and great job with the template.

---

  PA_frba06Quote

[Author]

Posts