最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Hover Icons in Justified Gallery - Stack Overflow

programmeradmin0浏览0评论

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.

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

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 Gitz asked Dec 24, 2015 at 6:45 GitzGitz 8201 gold badge17 silver badges49 bronze badges 7
  • 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

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

发布评论

评论列表(0)

  1. 暂无评论