javascript - Hover Icons in Justified Gallery

I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover. Just like the following picture

Take a look the the following Fiddle

<div id="justifiedGallery">
  <a href="#" title="What's your destination?">
    <img alt="What's your destination?" src="/?1" />
  </a>
  <a href="#" title="Just in a dream Place">
    <img alt="Just in a dream Place" src="/?1" />
  </a>
  <a href="#" title="Il Capo at Palermo">
    <img alt="Il Capo at Palermo" src="/?1" />
  </a>
  <a href="#" title="Erice">
    <img alt="Erice" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="/?1" />
  </a>
</div>

Please help me to create this.

Take a look the the following Fiddle

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

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

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

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

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

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

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

Please help me to create this.

Share Improve this question edited Dec 24, 2015 at 7:09 asked Dec 24, 2015 at 6:45 Gitz 8201 gold badge17 silver badges49 bronze badges

which kind of icons you are using i mean image like.ico or glyphicons – Tanmay Commented Dec 24, 2015 at 7:06
@Tanmay I am using the fortawesome.github.io/Font-Awesome/icons font toolkit – Gitz Commented Dec 24, 2015 at 7:07
you are using some mobile js file ?which error you are getting as i am running it on fiddle it is giving me Uncaught TypeError: Cannot read property 'msie' of undefined the same error you are getting? – Tanmay Commented Dec 24, 2015 at 7:21
No I am using ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js ...But not able to add this JS on fiddle. Try this one @Tanmay – Gitz Commented Dec 24, 2015 at 7:25
Can you just do a try Click the shield icon Mixed Content Shield in the address bar and choose Disable Protection – Tanmay Commented Dec 24, 2015 at 7:30

| Show 2 more ments

4 Answers 4

Sorted by: Reset to default 6 +50

as per documentation(http://miromannino.github.io/Justified-Gallery/captions/) remove title attribute and add a div with class caption just like

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

in this div you can add any thing.

If you need links on caption, need a small structure change like

<div id="justifiedGallery">
    <div>
        <a href="http://lorempixel./340/227/?1">
            <img alt="Title 1" src="http://lorempixel./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./340/227/?1">
            <img alt="Title 1" src="http://lorempixel./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>

Justified Gallery remends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.

If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:

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

To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-plete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.

JS:

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

You can dynamically replace the caption with whatever you like. Here's a quick solution.

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

Use jquery hover selector to set the display of icons The default display of icons should be none in css

This should help

https://codeshare.io/IGavT

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Hover Icons in Justified Gallery - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)