Menu icon Foundation
Clearing not loading large image

When using clearing the large images won't show. I have no js errors or any other errors in web inspector.

My code for the gallery:

<ul class="small-block-grid-3 large-block-grid-4 clearing-thumbs" data-clearing>
    <li>
		<a href="/assets/siteimg/cnt/food-01.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-01.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-02.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-02.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-03.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-03.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-04.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-04.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-05.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-05.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-06.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-06.jpg" alt="">
		</a>
	</li>
</ul>

My code near the end of body:

    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
	<script src="/bower_components/foundation/js/foundation.min.js"></script>
	<script src="/js/app.js"></script>
            

         

Untitled

Does anybody have any ideas what i could be doing wrong or what the issue might be?
Thx!

clearing

When using clearing the large images won't show. I have no js errors or any other errors in web inspector.

My code for the gallery:

<ul class="small-block-grid-3 large-block-grid-4 clearing-thumbs" data-clearing>
    <li>
		<a href="/assets/siteimg/cnt/food-01.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-01.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-02.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-02.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-03.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-03.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-04.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-04.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-05.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-05.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="/assets/siteimg/cnt/food-06.jpg">
			<img class="th" src="/assets/siteimg/cnt/thumb/food-06.jpg" alt="">
		</a>
	</li>
</ul>

My code near the end of body:

    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
	<script src="/bower_components/foundation/js/foundation.min.js"></script>
	<script src="/js/app.js"></script>
            

         

Untitled

Does anybody have any ideas what i could be doing wrong or what the issue might be?
Thx!

Rafi Benkual almost 5 years ago

Not sure what you mean? The images are not spanning full height/width?