JS Gallery 的缩略图放置在页脚中
我正在尝试在网页的页脚中添加 js 库的缩略图部分。我以前从未分解过画廊,并且认为这是实现这种外观的唯一方法
http ://img69.imageshack.us/img69/5923/bsade.jpg
我现在拥有的链接是这样的:http://www.marisaraskin.com/two.html。
(当我还在研究它时,边框只是我的指南)
缩略图容器的 CSS 代码是:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
我不确定我的其他选项是什么。我可能正在考虑将内容容器与 z-index 重叠在页脚上。尽管我对此持怀疑态度,尤其是因为每个人的屏幕分辨率都不同。我可以根据请求发布更多代码。我不确定你现在还需要看什么。
如果您需要知道我正在使用名为“Galleria”(经典)的画廊 js。
I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果我是你,我会修改 js 脚本,以便你可以填充实际 HTML 代码中不连续的块,但这里有一个通过 css 完成这一切的粗略方法:
position:relative
从 #container 中position:relative
从 .galleria-containerposition:absolute
到 .galleria-stage 并删除 left 和 right定位。另外,添加
top:90px
(或类似的内容)并给它一个宽度:
width:920px
。使用
bottom:___
属性将其设置在您所属的位置。基本上,您在这里所做的就是删除图库父元素中的所有相对定位,以便图库分段全部相对于页面而不是其任何父元素定位。完成此操作后,您只需修改舞台块和缩略图块的绝对位置和宽度,以便它们位于您想要的位置。
If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
position:relative
from #containerposition:relative
from .galleria-containerposition:absolute
to .galleria-stage and remove left and rightpositioning. Also, add
top:90px
(or something close to that) andgive it a width:
width:920px
.use the
bottom:___
property to set it where you belong.Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.