Support » Plugin: WordPress Infinite Scroll - Ajax Load More » Masonry transition is not working

  • vipinchoudhary

    (@vipinchoudhary)


    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

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

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.