Значки наведения в оправданной галерее

Я создаю сетку изображений, и я использую следующую библиотеку Обоснованная галерея. Эффект hover отлично работает для атрибута img-alt. но я хочу отображать некоторые значки со ссылками на зависании. Как и следующее изображение

Посмотрите следующий скрипт

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

<div id="justifiedGallery">
  <a href="#" title="What your destination?">
    <img alt="What 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>

Пожалуйста, помогите мне создать это.

Ответ 1

согласно документации (http://miromannino.github.io/Justified-Gallery/captions/) удалить атрибут title и добавить div с заголовком класса точно так же, как

<a href="#">
    <img alt="What 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>

Ответ 2

Justified Gallery рекомендует использовать Colorbox jQuery library внутри обратного вызова для достижения того, что вы пытаетесь сделать. Colorbox управляет div caption lightbox, который отображается при наведении указателя мыши.

Если вы посмотрите на Colorbox несколько галерей с демонстрацией одного вызова, вы увидите, что вы можете добавлять пользовательские значки для каждого изображения добавление скрытого div под названием caption внутри контейнера галереи:

  <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, вы вызовете Colobox внутри обратного вызова обоснованной галереи через класс .jg-complete. Внутри обратного вызова библиотека colorbox вызывается с необходимыми параметрами (например, 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 : ''
    });
});

Ответ 3

Вы можете динамически заменять подпись тем, что вам нравится. Вот быстрое решение.

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

Ответ 4

Используйте селектор hvery hover для установки значков Отображение значков по умолчанию не должно быть в css

Это должно помочь

https://codeshare.io/IGavT