Tagged: portfolio overlay hover
This topic contains 4 replies, has 2 voices, and was last updated by PA_frba06 4 years, 2 months ago.
-
AuthorPosts
-
January 31, 2014 at 5:31 pm #1933
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 portfolioI 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_frba06QuoteFebruary 3, 2014 at 10:41 am #1954February 3, 2014 at 5:54 pm #1965Here 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_frba06QuoteFebruary 4, 2014 at 10:52 am #1984Hi,
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…
Brankic1979QuoteFebruary 4, 2014 at 4:51 pm #1989 -
AuthorPosts
You must be logged in to reply to this topic.