Masonry transition is not working

I have implemented the Ajax Load More into my site and choose the masonary transition option, but Its rendering the data ( blocks ) but the opacity is Zero for all the records on scrolling. How can I fix? Because earlier I have used this plugin one year before It was working.

Here is my short code : [ajax_load_more id=”home1″ container_type=”div” post_type=”offer” posts_per_page=”12″ transition=”masonry” masonry_selector=”.masonry-item” masonry_animation=”slide-up”]

Here is the repeater template :

<div class="col-sm-3 no-padding4 deals4">
    <div class="white-block offer-box coupon-box   ">
    	<div class="white-block-media  ">
    		<div class="embed-responsive embed-responsive-16by9">			
    		</div>
    		<ul class="list-unstyled share-networks animation ">
            	<li>
            		<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fofferground.com%2Foffer%2Fkent-stainless-steel-vacuum-flask-500-ml-silver%2F" class="share" target="_blank">
            		    <i class="fa fa-facebook"></i>
            		</a>
            	</li>
            	<li>
            		<a href="http://twitter.com/intent/tweet?text=http%3A%2F%2Fofferground.com%2Foffer%2Fkent-stainless-steel-vacuum-flask-500-ml-silver%2F" class="share" target="_blank">
            		    <i class="fa fa-twitter"></i>
            		</a>
            	</li>
            	<li>
            		<a href="https://plus.google.com/share?url=http%3A%2F%2Fofferground.com%2Foffer%2Fkent-stainless-steel-vacuum-flask-500-ml-silver%2F" class="share" target="_blank">
            		    <i class="fa fa-google-plus"></i>
            		</a>
            	</li>
            </ul>
            <a href="javascript:;" class="share open-share">
                <i class="fa fa-share-alt"></i>
            </a>
    	</div>
    	<div class="white-block-content  ">
    		<ul class="list-unstyled list-inline top-meta">
    			<li>
    			     <div class="item-ratings" data-post_id="6950">
    				    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i> <span> (20 rates)</span>
    			     </div>
    			</li>
    			<li>
    				Expires in: <span class="red-meta">9 days</span>
    			</li>
    		</ul>
    		<h2 class="offer_title">
    		  <a href="http://offerground.com/offer/kent-stainless-steel-vacuum-flask-500-ml-silver/" target="_blank" rel="nofollow">
    		Kent Stainless Steel Vacuum Flask, 500 ml, Silver
    		  </a>
            </h2>
    		<ul class="list-unstyled list-inline bottom-meta">
    			<li class="brand removed">
    				<i class="fa fa-dot-circle-o icon-margin"></i>
    				<span>
    				    <a href="http://offerground.com/store/amazon/">Amazon</a>
    				</span>
    			</li>			
    			<li>
    				<i class="fa fa-map-marker icon-margin"></i> 
    				<a href="http://offerground.com/search/location/all-india/">All India</a>
    			</li>
    		</ul>
    	</div>
    	<div class="white-block-footer  ">
    		<div class="white-block-content">
    			<h2 class="price"><i class="fa fa-inr"></i>391.00 <span class="price-sale"><i class="fa fa-inr"></i>700.00</span></h2>
    		</div>
    	</div>
    </div>
</div>

You can also check the live at http://offerground.com/ under the “Latest Deals and Coupons” tab ( I have hardcoded opacity:1; in the ajax-load-more.min.js temporally )

Thanks
Vipin

• This topic was modified 4 years, 10 months ago by vipinchoudhary.

The page I need help with: [log in to see the link]