Canvas Support

Portfolio masonry images used in tabs not working

7 replies·opened Aug 30, 2018
W
whaider06Aug 30, 2018

Hi,
I have used tabs for displaying images in masonry style, when page loads first tab is default shown and all images are displayed fine but when i switch to 2nd tab that also has images it doesn't show. can you please help me out?
----- Code for tabs ----

<ul class="tab-nav clearfix">
	<li><a href="#home-tab"><i class="icon-home2 norightmargin"></i></a></li>
	<li><a href="#trending-tab">Trending</a></li>
</ul>

--- Code for tab contents ----
<div class="tab-container">
<div class="tab-content clearfix" id="home-tab">
	<div id="portfolio" class="portfolio grid-container portfolio-3 portfolio-masonry clearfix">
			<article class="portfolio-item pf-media pf-icons">
		<div class="portfolio-image">
		  <a href="portfolio-single.html">
			<img src="images/sample-1.jpg" alt="Open Imagination" />
		 </a>
		   <div class="portfolio-overlay">
		  <a href="images/sample-1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
		</div>
	   </div>
	   <div class="portfolio-desc">
	  <div class="portfolio-detail">
		<p>"Content caption goes here it will be about 20 characters long" ~ @waqar06</p>

	   </div>
	   <span class="post-tags"><a href="#">#camera</a>, <a href="#">#photography</a></span>
	</div>
   </article>
 </div>
</div>

--------- 2nd tab content which is not showing up------

<div class="tab-content clearfix" id="trending-tab">
	<div id="portfolio" class="portfolio grid-container portfolio-1 clearfix">
	  <article class="portfolio-item pf-media pf-icons clearfix">
		<div class="portfolio-image">
			<a href="portfolio-single.html">
				<img src="images/portfolio/masonry/3/1.jpg" alt="Open Imagination" />
			</a>
			<div class="portfolio-overlay">
				<a href="images/portfolio/full/1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
				<a href="portfolio-single.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
			</div>
			</div>
			<div class="portfolio-desc">
				<h3><a href="portfolio-single.html">Open Imagination</a></h3>
					<span><a href="#">Media</a>, <a href="#">Icons</a></span>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, quaerat beatae nulla debitis vitae temporibus enim sed. Optio, reprehenderit, ex.</p>
	<ul class="iconlist">
		<li><i class="icon-ok"></i> <strong>Created Using:</strong> PHP, HTML5, CSS3</li>
		<li><i class="icon-ok"></i> <strong>Completed on:</strong> 12th January, 2014</li>
		<li><i class="icon-ok"></i> <strong>By:</strong> John Doe</li>
		</ul>
		<a href="portfolio-single.html" class="button button-3d noleftmargin">Launch Project</a>
	</div>
	</article>
  </div>
</div>
S
SemiColonWebSTAFFSep 7, 2018

Hello,

Firstly, both the Portfolio Containers have the same ID, ie. #portfolio which is invalid HTML Markup. Please make sure that Portfolio IDs are unique. Secondly, since the Portfolio uses IsoTope to generate the Grid, the hidden Tab Content makes the Grid hidden, so to fix it simply add the following JS Code at the bottom of the Page just after the js/functions.js JS File linking: 

<script>
    jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
        var t=setTimeout(function(){ jQuery( '.grid-container' ).isotope('layout'); }, 1000);
    });
</script>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

W
whaider06Oct 22, 2018

Thank You, I have made these changes and it is finally working. Thanks once again for helping me out.

Unfortunately i am having issue on landing page. I have selected onepage-outdoors template as landing page for my angular 4 application. when i compile and run app it is showing error: "isotype is not initialized, cannot call method, i.e. $().isotype("layout")
because of this page is shown blank with opacity:0.

Looking forward to your response.
Have a great day.
Thanks

S
SemiColonWebSTAFFOct 27, 2018

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

W
whaider06Oct 30, 2018

Hi,

Luckily i have resolved javascript issue, script files were not loading correctly thatswhy i had that isotype is not found error.

Now, there is no javascript error. Can you provide some documentation or reference about how to initialize masonry layout in angular 4?
I have dynamically loaded images into my page using this code

<article class="portfolio-item pf-media pf-icons" *ngFor="let photo of userInfo.listOfPhotos">
                                                <div class="portfolio-image">
                                                    <a >
                                                        <img [src]="photo.imageUrl" alt="photo.caption">
                                                    </a>
                                                    <div class="portfolio-overlay">
                                                        <a class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
                                                        <a class="right-icon"><i class="icon-line-ellipsis"></i></a>
                                                    </div>
                                                </div>
                                                <div class="portfolio-desc">
                                                    <h3><a >{{photo.caption}}</a></h3>
                                                    <span>{{photo.createDate | date: 'mediumDate'}}</span>
                                                </div>
                                            </article>

but masonry or any portfolio grid layout is not working. Images retain their own sizes and masonry effect is not applied.
i have also attached screenshot of layout.

I shall be very thankful if you can help me out with this, as i am very close to deadline and we will go live soon probably be the next week.
Thanks

S
SemiColonWebSTAFFOct 31, 2018

Hello,

Is there any chance you can provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, you can consider using the following JS Callback after adding the items: 

SEMICOLON.portfolio.gridInit( $('.grid-container') );

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

W
whaider06Oct 31, 2018

Hmm cool, I guess i have got the solution. Let me try to call this function in angular component when items are available. I believe it will work out.

If i still face any problem i will head back to you with live URL. So that you can see what is really going on my end.
Have a great day,
Thanks

S
SemiColonWebSTAFFNov 1, 2018

Hello,

Thats great! Do let us know if you are still facing further issues with this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard