Question

我正在创建图片网格，我正在使用以下库Justified Gallery。悬停效果适用于img-alt属性。但我想在悬停上显示一些带链接的图标。如下图所示

看看下面的小提琴

https://jsfiddle.net/zvj2o7fy/1/embedded/result/

<div id="justifiedGallery">
  <a href="#" title="What's your destination?">
    <img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Just in a dream Place">
    <img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Il Capo at Palermo">
    <img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
  </a>
  <a href="#" title="Erice">
    <img alt="Erice" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
</div>

请帮我创建。

Answer 1

根据文档（http://miromannino.github.io/Justified-Gallery/captions/）删除title属性并添加带有类标题的div 就像

<a href="#">
    <img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
    <div class="caption">
        <div class="icon-cart">
        <img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
        </div>
    </div>
  </a>

在这个div中你可以添加任何东西。

如果您需要标题上的链接，则需要进行小型结构更改，例如

<div id="justifiedGallery">
    <div>
        <a href="http://lorempixel.com/340/227/?1">
            <img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
        </a>
        <div class="caption">
            <a href="#">
                <i class="fa fa-shopping-cart"></i>
            </a>
            <a href="#">
                <i class="fa fa-cloud-download"></i>
            </a>
        </div>
    </div>
    <div>
        <a href="http://lorempixel.com/340/227/?1">
            <img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
        </a>
        <div class="caption">
            <a href="#">
                <i class="fa fa-shopping-cart"></i>
            </a>
            <a href="#">
                <i class="fa fa-cloud-download"></i>
            </a>
        </div>
    </div>
</div>

Answer 2

Justified Gallery建议使用回调内的Colorbox jQuery library来实现您的目标。 Colorbox控制在悬停时显示的caption灯箱div。

如果查看Colorbox 'multiple galleries with one call' demo，您会看到可以通过在图库容器中添加名为caption的隐藏div来为每个图像添加自定义图标：

  <div class="container">
    <a href="image.jpg" class="jg-entry cboxElement">
      <img alt="Alt Message" src="image.jpg">
      <div class="caption">
       <div class="icon1"></div>
       <div class="icon2"></div>
       <div class="icon3"></div>
      </div>
    </a>
  </div>

要调用字幕并通过JS显示这些字幕，您可以通过.jg-complete类在合理的图库回调中调用Colobox。在回调内部，调用颜色框库with the necessary parameters（如下面的代码示例中显示的opacity和transition），以使您的图标完全按照您想要的方式淡入视图。

JS：

$('.container').justifiedGallery({
    rowHeight : 50 
}).on('jg.complete', function () {
    $(this).find('a').colorbox({
        maxWidth : '80%',
        maxHeight : '80%',
        opacity : 0.8,
        transition : 'elastic',
        current : ''
    });
});

Answer 3

您可以动态地用您喜欢的任何内容替换标题。 Here's a quick solution

$("img").mouseenter(function(){
    $(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});

Answer 4

使用jquery悬停选择器设置图标的显示 css的默认显示图标应为none

这应该有帮助

https://codeshare.io/IGavT

在Justified Gallery中悬停图标

4 个答案: