小编JoS*_*Sch的帖子

基本上,我想(重新)构建这个站点的无限网格:https://grafilu.ch/,或者更确切地说是我自己的版本.

为此,我正在使用Ian Li的插件Infinite Drag.

我相信我正在使用的网站作为构建网格的参考,他们使用类似的(如果不是相同的)插件并生成非常大的图块,然后在图像内部创建另一个网格.在下面的屏幕截图中,您可以看到我检查参考站点的代码:

就像我说的,似乎正在使用多个非常大的瓷砖:

<div class="infinite-grid__grid infinite-grid__grid-1">
…
<div class="infinite-grid__grid infinite-grid__grid-2">
…
<div class="infinite-grid__grid infinite-grid__grid-3">

...每个图像都放在自己的内部网格(class="infinite-grid__grid-wrapper")中,图像位于各个网格项目(class="infinite-grid__item")中:

还有一个class="gutter-sizer",这让我相信,对于瓷砖内部的图像网格,正在使用像砌体,同位素或Packery这样的东西.

我已经能够创建一个带有大型瓷砖的可拖动网格,并使用Packery在每个瓷砖内部布置一些图片.

您可以在此处查看我尝试对此网格进行编程的当前版本:https://codepen.io/joSch/pen/eMPVve

但它远非我想要的:

• 瓷砖内的网格不会覆盖整个瓷砖.我相信这是因为同位素(我正在使用它来为图块内部的图像生成网格)将其网格设置为与其内容一样大.如何使图像的网格覆盖整个图块并在整个图块上布置其内容(图像)？现在,每个图像网格下面总是有大量的空白空间.

• 每个图块都具有相同的网格.现在,我正在为Isotope附加标记,通过oncreateInfinite Drag选项为每个图块构建图像网格.因此每个磁贴都包含相同的标记.每个磁贴如何接收单个内容？

我正在困惑这个过程.我很感激有关如何创建类似于引用的网格的任何有用的输入.

我使用Kirby CMS(https://getkirby.com/)中的Fancybox 3插件(http://fancyapps.com/fancybox/3/docs/)设置了一个简单的图像滑块.我唯一无法解决的问题是,当滑块打开时,如何在单击图像时停止滑块缩放到图像.

有人可以帮我一把吗？

我尝试包含clickSlide : 'close',滑块的选项,但它没有用.

以下是我在我的网站上为全局滑块设置的选项:

  <!-- Setting fancybox-options GLOBALLY -->

    <script type="text/javascript">

       $("[data-fancybox]").fancybox({

         thumbs          : false,

         hash            : false,

         loop            : true,

         keyboard        : true,

         toolbar         : false,

         animationEffect : false,

         arrows          : true,

       });

    </script>

  <!-- /////////////////////// -->

我想建立一个固定的<div>,含有图标,它由右扩展到左时被悬停(该<div>膨胀时,未图标),露出在该图标的左侧的一段文字.图标的位置保持不变.这是一个草图,以帮助说明我想做的事情:

更改<div>悬停的大小没有问题,我只需添加一个宽度更大的类(包括转换为扩展设置动画).但我对元素的定位感到困惑.我将图标和文本(在一个内部<span>)分开放置<div>并尝试使用安排一切flex.在扩展/悬停状态下,事情看起来应该是这样,但是一旦<div>再次缩小,包含图标和文本的两个div会尝试共享剩下的小空间,因此图标会被切断,文本会被压缩.

如果有人能帮助我弄清楚如何按照我希望的方式设置它,我将不胜感激.

这是我到目前为止所获得的jsFiddle:Button-GrowOnHover

加上代码本身:

$(document).ready(function() {
  var button = $("#myButton");

  button.mouseenter(function() {
    $(this).addClass("grow");
  });
  button.mouseleave(function() {
    $(this).removeClass("grow");
  });
});

.button-container {
  position: fixed;
  top: 5%;
  right: 5%;
  width: 100px;
  padding: 5px;
  background-color: tomato;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  transition: width 1s;
}

.button-container.grow {
  width: 300px
}

.button-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.button-icon-container {
  height: …