Question

我正在为我的图库页面使用magnificPopup脚本。

这是闪光效果

现在我只想在悬停时为每个图库图像添加闪光效果。它工作正常。但我需要为图像缩略图模式添加相同的闪光效果。

这是我的正常图像悬停模式的代码。

<div class="cards-row">
    <div class="col-md-2 col-md-offset-1">
      <a href="/images/Cards/alien-back.jpg" data-effect="mfp-3d-unfold">
        <div class="sparkley">
          <img src="/images/Cards/alien-front.jpg" alt="" />
        </div>
      </a>
    </div>

正如你所看到的那样，使用sparkley类进行正面图像处理。我使用bit jquery包装背面图像。

$( "figure" ).addClass( "sparkley" );

根本不起作用。我添加了另一个具有悬停效果的类，但它有效。我猜测使用mouseover jquery函数的sparkley效果不会悬停？我被困在这里

Answer 1

我想你会做这样的事情：

$('#gallery').magnificPopup({
  […],
  callbacks: {
    open: function() {
      this.contentContainer.find('figure').sparkle();
    },
    resize: function() {
      this.contentContainer.find('figure').trigger('resize.sparkle');
    }
});

这将在打开图库弹出窗口（调用open回调函数）后初始化sparkle插件，并指示它在其大小发生变化时重新布局。

这假设您拥有Magnific Popup为您生成的弹出窗口的默认标记。如果您对闪光内容使用自定义标记，请使用<figure>以外的其他元素。

此外，也许您想将<img>包装在某个容器中并使用它代替<figure>，以便闪烁效果仅覆盖图像而不是整个弹出容器。

＆＃13;

/**
 * Overlay for images (gallery)
 *
 * @param {string} theme
 */
var openGallery = function(theme) {
};

// Galleries
$('ul.magnific-gallery').magnificPopup({
  delegate: '> li > a',
  type: 'image',
  gallery: {
    enabled: true
  },
  callbacks: {
    open: function() {
      var $spark = this.contentContainer.find('figure');
      $spark.sparkle();
      
      // The code below can be used to start the effect immediately
      $spark.off("mouseover.sparkle")
        .off("mouseout.sparkle")
        .off("focus.sparkle")
        .off("blur.sparkle")
        .trigger("start.sparkle");
    },
    resize: function() {
      this.contentContainer.find('figure').trigger('resize.sparkle');
    }
  },
});

＆＃13;

.magnific-gallery img {
  max-width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://rawgit.com/simeydotme/jQuery-canvas-sparkles/master/dist/jquery-canvas-sparkles.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" type="text/css">

<ul class="magnific-gallery">
  <li>
    <a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" title="Etiam ullamcorper.">
      <img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" alt="" />
    </a>
  </li>
  <li>
    <a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower2.jpg" title="Cum sociis natoque penatibus." data-description="Estibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia.">
      <img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower2.jpg" alt="" />
    </a>
  </li>
   <li>
    <a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower3.jpg" title="Maecenas malesuada.">
      <img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower3.jpg" alt="" />
    </a>
  </li>
    <li>
    <a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower4.jpg" title="Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi." data-description="Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.">
      <img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower4.jpg" alt="" />
    </a>
  </li>
</ul>

＆＃13;

在代码段中，我通过删除悬停事件并在"start.sparkle"回调中手动触发open来立即启动闪烁：

this.contentContainer.find('figure')
  .off("mouseover.sparkle")
  .off("mouseout.sparkle")
  .off("focus.sparkle")
  .off("blur.sparkle")
  .trigger("start.sparkle");

使用magnificpopup脚本添加闪光效果

1 个答案: