admin管理员组文章数量:1026250
I am trying to use Foundation 4's Clearing Lightbox in a block grid like so:
<div class="row">
<div class="large-3 columns">
...
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
<li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
<li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
<li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
<li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
<li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
<li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
<li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
<li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
<li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
</ul>
</div>
</div>
The layout on my laptop screen displays the images in a 3-column grid, which is what I want (and a 2-column grid when the window is made much narrower to simulate mobile). When I click on an image, it does load the Clearing Lightbox, however the "thumbnail" images are still in the block grid at the bottom of the lightbox screen. So there are only three full thumbnail images shown and you can see a partial second row of thumbnails below them. (Screenshot here from Google Chrome.)
How can I fix the thumbnail images so either 1) they all show up in a row, or 2) just the active one is shown, or 3) no thumbnails are shown below the large image?
I am fairly new to Foundation, and I appreciate any help you can offer!
I am trying to use Foundation 4's Clearing Lightbox in a block grid like so:
<div class="row">
<div class="large-3 columns">
...
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
<li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
<li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
<li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
<li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
<li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
<li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
<li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
<li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
<li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
</ul>
</div>
</div>
The layout on my laptop screen displays the images in a 3-column grid, which is what I want (and a 2-column grid when the window is made much narrower to simulate mobile). When I click on an image, it does load the Clearing Lightbox, however the "thumbnail" images are still in the block grid at the bottom of the lightbox screen. So there are only three full thumbnail images shown and you can see a partial second row of thumbnails below them. (Screenshot here from Google Chrome.)
How can I fix the thumbnail images so either 1) they all show up in a row, or 2) just the active one is shown, or 3) no thumbnails are shown below the large image?
I am fairly new to Foundation, and I appreciate any help you can offer!
Share Improve this question asked Jul 25, 2013 at 21:24 Amy WittyAmy Witty 2182 silver badges7 bronze badges5 Answers
Reset to default 2This issue was reported https://github./zurb/foundation/issues/2696. Although claimed to be fixed in 5.1, I still ran into the issue.
I used the suggestion by Michael Fillier to remedy this issue:
/***** Fix Block Grid and Clearing Compatibility *****/
[class*="block-grid-"] li {
margin-right:0!important;
}
.clearing-blackout li {
clear:inherit!important;
}
First line removes the margin added to the li's by clearing. Second line removes clearing for the thumbs in the lightbox view.
I corresponded with Foundation Support, and they suggested that I add this to my stylesheet to hide the thumbnails altogether:
.clearing-blackout ul {display:none !important;}
I then went back to the default Clearing lightbox syntax as shown in the docs:
<ul class="small-block-grid-2 large-block-grid-3" data-clearing>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
</ul>
Now, when I click on one of the small images in the block grid it pulls up the correct large image in the Clearing lightbox. The space for the carousel was still relegated though the carousel was not displayed, so I added this code to make the large image fill up more of the screen:
@media only screen and (min-width: 48em) {
.clearing-assembled .clearing-container .visible-img {
height: 95%;
}
}
Hope this is helpful to someone else. Thanks to Mark at Foundation Support and to the other poster who got me part way there.
I had the similar problem, and I found a good CSS fix on Foundation's Github page.
You should add the following line to your CSS, and all thumbnails will show up in one row as expected.
div.clearing-container .large-block-grid-3 > li:nth-of-type(3n+1) {
clear: none; }
Here is the solution in detail: https://github./zurb/foundation/issues/2825
Foundation doesn't do this out of the box with presentationaly classes alone, but you can create the same effect by hiding the clearing gallery and adding a little javascript/jquery.
Create your block-grid with simple images and anchor tags with a custom class, in this case img-spawn-gallery
Then create your clearing gallery, but use the hide presentational class so it is not displayed.
<div class="row">
<div class="large-3 columns">
<p>Some other content here</p>
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3">
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
<ul id="my-gallery" class="clearing-thumbs hide" data-clearing>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
</div>
</div>
Then, in JavaScript with Zepto or jQuery you can override the behavior of the anchor tags so that they click on the first img of your hidden clearing gallery. since only the thumbnails are hidden the rest of it works properly.
$(document).ready(function() {
$(".img-spawn-gallery").click(function() {
$("#my-gallery li a :first").trigger('click');
});
});
UPDATE 10/16/13: This came through as an edit but should probably be added as a ment. I am adding it here as it might be useful for those who are facing this issue. Anonymous poster, feel free to take the credit in the ments.
To add the ability to jump to the image you have clicked, edit the Javascript like so:
$(".img-spawn-gallery").click(function()
{
index = $(this).parents("li").index();
$("#my-gallery li a :eq("+index+")").trigger('click');
});
In answer to "3) no thumbnails are shown below the large image"
In Foundation 5 I changed the following default from:
$clearing-active-img-height: 75%;
to:
$clearing-active-img-height: 100%;
No thumbnails are shown below the large image.
I am trying to use Foundation 4's Clearing Lightbox in a block grid like so:
<div class="row">
<div class="large-3 columns">
...
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
<li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
<li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
<li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
<li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
<li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
<li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
<li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
<li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
<li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
</ul>
</div>
</div>
The layout on my laptop screen displays the images in a 3-column grid, which is what I want (and a 2-column grid when the window is made much narrower to simulate mobile). When I click on an image, it does load the Clearing Lightbox, however the "thumbnail" images are still in the block grid at the bottom of the lightbox screen. So there are only three full thumbnail images shown and you can see a partial second row of thumbnails below them. (Screenshot here from Google Chrome.)
How can I fix the thumbnail images so either 1) they all show up in a row, or 2) just the active one is shown, or 3) no thumbnails are shown below the large image?
I am fairly new to Foundation, and I appreciate any help you can offer!
I am trying to use Foundation 4's Clearing Lightbox in a block grid like so:
<div class="row">
<div class="large-3 columns">
...
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
<li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
<li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
<li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
<li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
<li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
<li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
<li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
<li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
<li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
</ul>
</div>
</div>
The layout on my laptop screen displays the images in a 3-column grid, which is what I want (and a 2-column grid when the window is made much narrower to simulate mobile). When I click on an image, it does load the Clearing Lightbox, however the "thumbnail" images are still in the block grid at the bottom of the lightbox screen. So there are only three full thumbnail images shown and you can see a partial second row of thumbnails below them. (Screenshot here from Google Chrome.)
How can I fix the thumbnail images so either 1) they all show up in a row, or 2) just the active one is shown, or 3) no thumbnails are shown below the large image?
I am fairly new to Foundation, and I appreciate any help you can offer!
Share Improve this question asked Jul 25, 2013 at 21:24 Amy WittyAmy Witty 2182 silver badges7 bronze badges5 Answers
Reset to default 2This issue was reported https://github./zurb/foundation/issues/2696. Although claimed to be fixed in 5.1, I still ran into the issue.
I used the suggestion by Michael Fillier to remedy this issue:
/***** Fix Block Grid and Clearing Compatibility *****/
[class*="block-grid-"] li {
margin-right:0!important;
}
.clearing-blackout li {
clear:inherit!important;
}
First line removes the margin added to the li's by clearing. Second line removes clearing for the thumbs in the lightbox view.
I corresponded with Foundation Support, and they suggested that I add this to my stylesheet to hide the thumbnails altogether:
.clearing-blackout ul {display:none !important;}
I then went back to the default Clearing lightbox syntax as shown in the docs:
<ul class="small-block-grid-2 large-block-grid-3" data-clearing>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
</ul>
Now, when I click on one of the small images in the block grid it pulls up the correct large image in the Clearing lightbox. The space for the carousel was still relegated though the carousel was not displayed, so I added this code to make the large image fill up more of the screen:
@media only screen and (min-width: 48em) {
.clearing-assembled .clearing-container .visible-img {
height: 95%;
}
}
Hope this is helpful to someone else. Thanks to Mark at Foundation Support and to the other poster who got me part way there.
I had the similar problem, and I found a good CSS fix on Foundation's Github page.
You should add the following line to your CSS, and all thumbnails will show up in one row as expected.
div.clearing-container .large-block-grid-3 > li:nth-of-type(3n+1) {
clear: none; }
Here is the solution in detail: https://github./zurb/foundation/issues/2825
Foundation doesn't do this out of the box with presentationaly classes alone, but you can create the same effect by hiding the clearing gallery and adding a little javascript/jquery.
Create your block-grid with simple images and anchor tags with a custom class, in this case img-spawn-gallery
Then create your clearing gallery, but use the hide presentational class so it is not displayed.
<div class="row">
<div class="large-3 columns">
<p>Some other content here</p>
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3">
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
<ul id="my-gallery" class="clearing-thumbs hide" data-clearing>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
</div>
</div>
Then, in JavaScript with Zepto or jQuery you can override the behavior of the anchor tags so that they click on the first img of your hidden clearing gallery. since only the thumbnails are hidden the rest of it works properly.
$(document).ready(function() {
$(".img-spawn-gallery").click(function() {
$("#my-gallery li a :first").trigger('click');
});
});
UPDATE 10/16/13: This came through as an edit but should probably be added as a ment. I am adding it here as it might be useful for those who are facing this issue. Anonymous poster, feel free to take the credit in the ments.
To add the ability to jump to the image you have clicked, edit the Javascript like so:
$(".img-spawn-gallery").click(function()
{
index = $(this).parents("li").index();
$("#my-gallery li a :eq("+index+")").trigger('click');
});
In answer to "3) no thumbnails are shown below the large image"
In Foundation 5 I changed the following default from:
$clearing-active-img-height: 75%;
to:
$clearing-active-img-height: 100%;
No thumbnails are shown below the large image.
本文标签： javascriptZurb Foundation 4 Clearing Lightbox Thumbnails in Block GridStack Overflow
版权声明：本文标题：javascript - Zurb Foundation 4 Clearing Lightbox Thumbnails in Block Grid - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745622821a2159680.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论