Create 3 separate portfolio sections on one page

Welcome Forums Supernova Create 3 separate portfolio sections on one page

This topic contains 4 replies, has 2 voices, and was last updated by  PA_frba06 3 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1933

    PA_frba06
    Participant

    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


      Quote
    #1954

    Brankic1979
    Keymaster

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


      Quote
    #1965

    PA_frba06
    Participant

    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


      Quote
    • This reply was modified 3 years, 8 months ago by  PA_frba06.
    • This reply was modified 3 years, 8 months ago by  PA_frba06.
    #1984

    Brankic1979
    Keymaster

    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…


      Quote
    #1989

    PA_frba06
    Participant

    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.


      Quote
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.