使用 magnificpopup 脚本添加闪光效果

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>

如您所见，正面图像用闪光 class 环绕。我使用位 jquery 来包装背面图像。

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

它根本不起作用。我添加了另一个具有悬停效果的 class 但它起作用了。我猜测使用 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>，这样闪光效果仅在图像上而不是整个弹出容器上。

/**
 * 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');
    }
  },
});

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

<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>

在代码片段中，我通过删除悬停事件并在 open 回调中手动触发 "start.sparkle" 使火花立即开始：

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

使用 magnificpopup 脚本添加闪光效果

Add sparkle effect with magnificpopup script

html

css

jquery

magnific-popup