mrsweaters
commented
11 years ago were you able to get it working?
Closed kurainisei closed 11 years ago
mrsweaters
commented
11 years ago were you able to get it working?
kurainisei
commented
11 years ago Unfortunately not.
I had to get rid of the whole gallery, at least for now.
The strange thing is that I used the exact code in the documentation example. The images were shown, but without the clearing effect (the thumbnail and the full image, for all the images).
I guess the custom CSS configurator on the website has some errors in generating the foundation version. Actually, I've tried with the standard version, but still, clearing isn't working. Can you help me on this?
Federico Fasce Game Designer
http://kurai.eu http://urustar.net
On Tuesday 29 January 2013 at 17:14, Jordan Humphreys wrote:
were you able to get it working?
— Reply to this email directly or view it on GitHub (https://github.com/zurb/foundation/issues/1458#issuecomment-12842388).
StephenPower
commented
11 years ago I had a similar problem... http://qa160.numismatichq.com/for_sale/view_item/2773/
keep in mind, I'm working on that template, so it may be different when you look at it..
I've tried to change the jquery version, i heard a few problems with 1.9
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Qa160 - Flowing Hair Dime</title>
<meta name="description" content="Flowing Hair Dime, Flowing Hair Dime" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://assets.numismatichq.com.s3.amazonaws.com/asset/qa160_render_foundation.min.css" />
<script src="http://assets.numismatichq.com.s3.amazonaws.com/asset/qa160_modernizr.foundation.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://assets.numismatichq.com.s3.amazonaws.com/asset/qa160_foundation.min.js"></script>
</head>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<body>
<!-- Navigation -->
<div class="row">
<div class="twelve columns">
<nav class="top-bar">
<ul class="top-bar">
<li class="name">
<h1><a href="#">Qa160</a></h1>
</li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<ul class="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/for_sale/">For Sale</a></li>
<li><a href="/about_us/">About Us</a></li>
<li><a href="/logout/" id="">Logout</a></li>
<li><a href="/redirect_admin/">Site Admin</a></li>
</ul>
</ul>
<ul class="right">
<form action="/search/" method="get" class="navbar-search pull-right">
<input type="text" class="search-query" placeholder=" Search " name="q" id="q" />
</form>
</ul>
</section>
</nav>
</div>
</div>
<!-- End Navigation -->
<div class="row" id="Flowing Hair Dime">
<div id="twelve">
</div>
<div calss="twelve">
<h2>Flowing Hair Dime</h2>
<p class="page-header"">
<p>Flowing Hair Dime</p>
</p>
</div>
<div class="row">
<div class="five columns">
<ul class="block-grid three-up mobile-two-up" data-clearing>
<li><a href="http://placekitten.com/g/1000/1000"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/1000" /></a></li>
<li><img src="http://placekitten.com/g/1000/900" /></li>
<li><a href="http://placekitten.com/g/1000/800"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://placekitten.com/g/1000/800" /></a></li>
<li><img data-caption="Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1000/700" /></li>
<li><a href="http://placekitten.com/g/1000/600"><img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1000/600" /></a></li>
<li><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit." src="http://placekitten.com/g/1000/500" /></li>
</ul>
<ul class="block-grid three-up mobile-two-up clearing" data-clearing>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/2b5b49a1-c0b3-4935-8f47-25419e3dcc84-flowing-hair-half-dime-1794_Half_Dime_Obv_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/2b5b49a1-c0b3-4935-8f47-25419e3dcc84-flowing-hair-half-dime-1794_Half_Dime_Obv_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/943a1d0d-c1f4-4c97-92e3-815a4a9a68b7-liberty-head-double-eagle-LibertyDoubleEagle-Rev_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/943a1d0d-c1f4-4c97-92e3-815a4a9a68b7-liberty-head-double-eagle-LibertyDoubleEagle-Rev_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/0fc77909-1ae6-44bf-9e90-260033fcf5b7-liberty-head-double-eagle-LibertyDoubleEagle-OBv_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/0fc77909-1ae6-44bf-9e90-260033fcf5b7-liberty-head-double-eagle-LibertyDoubleEagle-OBv_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/073b7d2a-7e06-41d5-9ed8-62610c30fe67-st.-gaudens-double-eagle-2372-6028-thickbox_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/073b7d2a-7e06-41d5-9ed8-62610c30fe67-st.-gaudens-double-eagle-2372-6028-thickbox_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/81a348e3-6012-4867-a4d2-670119994be7-st.-gaudens-double-eagle-2372-6027-thickbox_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/81a348e3-6012-4867-a4d2-670119994be7-st.-gaudens-double-eagle-2372-6027-thickbox_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/7eb4a2e9-6e8d-4bc4-9e1c-c4f3cc6e165c-liberty-seated-dimes-CappedBustHalfDime-REv_png_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/7eb4a2e9-6e8d-4bc4-9e1c-c4f3cc6e165c-liberty-seated-dimes-CappedBustHalfDime-REv_png_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/976a0028-7174-4930-b17e-4c48a90360bd-flowing-hair-half-dime-1794_Half_Dime_Rev_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/976a0028-7174-4930-b17e-4c48a90360bd-flowing-hair-half-dime-1794_Half_Dime_Rev_jpg_300x300_q85.400x400.jpg" /></a></li>
<li class="clearing-feature"><a href="http://assets.numismatichq.com.s3.amazonaws.com/images/95f460a8-09f5-4948-82ff-e2ab1ebfc60d-flowing-hair-half-dime-1794_Half_Dime_Obv_jpg_300x300_q85.400x400.jpg"><img src="http://assets.numismatichq.com.s3.amazonaws.com/images/95f460a8-09f5-4948-82ff-e2ab1ebfc60d-flowing-hair-half-dime-1794_Half_Dime_Obv_jpg_300x300_q85.400x400.jpg" /></a></li>
</ul>
</div>
<div class="panel seven columns">
<p><a href="/search/?q=Dimes">Dimes</a> >> <a href="/search/?q=Bust">Bust</a> </p>
<a href="/login/" class="small alert-danger">Please Login To Add Item To Cart</a> Or <a href="/register/" class="small alert-info"> Sign Up </a>
<form method="get" action="/for_sale/buy_now/2773/" name="form" class="form">
<label>
Price: $ 28541
</label>
</form>
</div>
</div>
<div class="row">
<div class="twelve">
<h2>Description</h2>
<p>Flowing Hair Dime</p>
</div>
</div>
<!--
-->
<!--JS for image gallery, please use another if you want, just remember to include it in your assets and layout.html-->
</div>
<!-- FOOTER -->
<hr />
<div class="row">
<footer>
<div id="label-info">
<div class="span3">
<h5>About Us</h5>
<p>This is where you may put a little description about you and your activity.</p>
<a href="/about_us/">Read more</a>
</div>
<div class="span3">
<h5>Quick Search</h5>
<h5>Quick Navigation</h5>
<p><a href="/home/">Home</a></p>
<p><a href="/auctions/">Auctions</a></p>
<p><a href="/for_sale/">For Sale</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/about_us/">About Us</a></p>
</div>
<div class="span3">
<h5>Quick Search</h5>
<form action="/search/" method="get">
<input type="text" `placeholder="Search " name="q" id="s" data-provide="typeahead" data-items="4" data-source=""[ ]" class="span2" />
</form>
<hr />
<h5>Website Policies</h5>
<ul>
<li><a href="/privacy_policy/ ">Privacy Policy</a></li>
<li><a href=" ">Refund Policy</a></li>
<li><a href=" ">Terms of Service Policy</a></li>
</ul>
</div>
<div class="span2">
<h5>Latest Blog Posts</h5>
<p><a href=""></a></p>
<p>Posted on </p>
<p></p>
</div>
</div>
</footer>
</div>
</body>
</html>I figured mine out.. duh.. I did not call app.js to initialize the JS... I used your examples copied my code over and it worked.. I knew it was my issue...
then i went by one by one and commented out each call to an external file that the example made, when I commented out app.js, I got the same results...
some of us are more on the designer side... so i'm sure it was a good laugh..
steve
hatefulcrawdad
commented
11 years ago No problem, glad you got it worked out!
kurainisei
commented
11 years ago I'm still having problems. Here is a demo of the problem I have: http://playground.urustar.net/clearingtest/. The code is the same provided by the documentation page of foundation. I initialize app.js and everything. But still:
Any ideas on that?
StephenPower
commented
11 years ago I dont see the call to the zurb javascript library or jquery.. you need both...
http://qa160.numismatichq.com/for_sale/view_item/2778/
check the source on that page... compare if you call the css and javascript
its a long load time, so if you are overseas, sorry :)
but its a lot of images and shows the lightbox well...
steve
On Tue, Feb 5, 2013 at 4:06 AM, kurainisei notifications@github.com wrote:
I'm still having problems. Here is a demo of the problem I have: http://playground.urustar.net/clearingtest/. The code is the same provided by the documentation page of foundation. I initialize app.js and everything. But still:
- The thumbnails are mixed with bigger images
- The carousel opens but it's not working.
Any ideas on that?
— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/1458#issuecomment-13120425.
Stephen Power GreatCoins.com
StephenPower
commented
11 years ago Here's your page with the proper libraries loading.. your example works and I put another...
https://s3.amazonaws.com/new-design-greatcoins/clearing/test.html
sercotec
commented
11 years ago No its not working for both cases thumbnails and larger ones still looking at the same page and there is no grid effect...
kaidot
commented
11 years ago Hi - I could need a helping hand please. I am trying to design/layout the thumbs . I would like to have one larger first image and the others smaller surrounding the larger image on the right and then beneath that. It works so far. However, when I click an image for actually entering the Gallery the thumbs in the bar get resized in the width according to the dimensions I used on the page.
I.e. The large image is defined by 300px and the small ones are 100px. In the bottom bar the tumbs will now be: first wider, all others narrower. I would like to see them with the default applied to all.
Is there a way? Sorry if I am sounding confusing and confused right now. Trying to get this done all day already and I am stuck.
Thanks Kai
billyroebuck
commented
11 years ago when I download f3 and copy in the example code, I'm getting the same issue as kurainisei, seen here: http://playground.urustar.net/clearingtest/
does anyone know how to fix this?
billyroebuck
commented
11 years ago I think it has something to do with CSS, because when I include the CSS that is used on the F3 docs site (which works for me) it works locally.
CSS file included: http://foundation.zurb.com/stylesheets/docs/presentation.css
billyroebuck
commented
11 years ago After I copied in the relevant CSS from their presentation.css into my own CSS file, it worked...
E.g. look for everything with .clearing- and ul[data-clearing] ...
I'm guessing here, but maybe there's an issue with the F3 download?
billyroebuck
commented
11 years ago Here's a working example: http://meowzen.com/zurb-clearing/
Note: I also needed to wrap my UL with div class="carousel" in order for it to work, which I don't think is mentioned in the F3 docs.
Cheers
Hi there, I've downloaded Foundation using the CSS configurator (the custom version found on foundation.zurb.com website). Unfortunately Clearing (which I included in my custom install) is not working. I've been trying using the example code provided on the site, but the result is what you see at http://anheuristic.urustar.net. Am I missing something? Thank you.