Hover Icons in Justified Gallery - javascript

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.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>
Please help me to create this.

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

Justified Gallery recommends 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-complete 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.complete', 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

Related

Dropdown item onClick does not show the overlay correctly

I want to add a short cut image to every dropdown item, therefore, I have written the following code:
<a class="dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
This looks like the following:
And I want that it looks like the following:
So my question is, what do I have to do so that the highlight color goes over the whole element?
Test this
<a class="dropdown-item clearfix" id="dropdown_new_line">
<span class="float-left">New Line</span>
<span class="float-right">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
You need to clear the floating using this class :
.clearfix{
clear:both;
}
And adding this class over the parent element:
<a class="clearfix dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>

Shuffle.js - filter images on page load

There are 2 tabs (data-groups) - Graphics and Logo, with images, each one has 3 images, total 6 images. The filter works well, when you click first tab, it becomes active and shows 3 images filtered and belong to first data-group (Graphics). But when you refresh page, you see first active tab (data-group Graphics) as well, but showing all 6 images, which is wrong. Filter starts working only when you click the tab. It should show only 3 of them matched by data-group. I've tried several scripts and solution from this post. Nothing worked. Any solution?
function portfolio_init() {
var portfolio_grid = $('#portfolio_grid'),
portfolio_filter = $('#portfolio_filters');
if (portfolio_grid) {
portfolio_grid.shuffle({
speed: 450,
itemSelector: 'figure'
});
$('.site-main-menu').on("click", "a", function(e) {
portfolio_grid.shuffle('update');
});
portfolio_filter.on("click", ".filter", function(e) {
portfolio_grid.shuffle('update');
e.preventDefault();
$('#portfolio_filters .filter').parent().removeClass('active');
$(this).parent().addClass('active');
portfolio_grid.shuffle('shuffle', $(this).attr('data-group'));
});
}
}
<!-- Portfolio Subpage -->
<section class="pt-page pt-page-4" data-id="portfolio">
<div class="border-block-top-110"></div>
<div class="section-inner">
<div class="section-title-block">
<div class="section-title-wrapper">
<h2 class="section-title">Portfolio</h2>
<h5 class="section-description">Works</h5>
</div>
</div>
<!-- Portfolio Content -->
<div class="portfolio-content">
<!-- Portfolio filter -->
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link active" data-group="graphics">Graphics</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="print">Print</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="billboards">Billboards</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="misc">Misc</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="photo">Photo</a>
</li>
</ul>
<!-- End of Portfolio filter -->
<!-- Portfolio Grid -->
<div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">
<!-- Portfolio 1 - Graphics -->
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 1">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 1</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 2">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 2</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 3">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 3</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<!-- /Portfolio 1 - Graphics -->
<!-- Portfolio 2 - Logo -->
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 1">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 1</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 2">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 2</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 3">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 3</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<!-- /Portfolio 2 - Logo -->
</div>
<!-- /Portfolio Grid -->
</div>
<!-- /Portfolio Content -->
</div>
</section>
<!-- /Portfolio Subpage -->
Now it works, images filtered on page load. Add this code.
$(document).ready(function() {
$('#portfolio_filters .grph').trigger( "click" );
});
}
// /Portfolio subpage filters
Also I added class "grph" here:
<!-- Portfolio filter -->
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link active grph" data-group="graphics">Graphics</a>
</li>
<li>
I came here looking for an answer to the same problem, but couldn't get the solution to work, however it successfully pointed me in the right direction to finally solving it by creating a function to execute on page load:
function shuffleInit (id){
$(document).ready(function() {
$('#grid').hide();
jQuery('#'+id)[0].click();
$('#grid').show();
$('#'+id).trigger('click');
});
<body onload="shuffleInit('graphics');">
Remember to add IDs to the filter divs so they can be targeted by the shuffleInit() function. Note that #grid is the default shuffle.js container for the images - I added the hide and show commands to hide the visible re-shuffle animation on page load. The last click trigger line is just a cosmetic addition highlighting the button so the user can see which filter option has been applied.
This works with Bootstrap 3. Hope it helps someone!

How to add an <a> tag to Flickity?

I was wondering if anyone knew of a way to add a tag to a Flickity image slider? Here's what I have for my slider but it messes with the functionality of the slider itself:
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay": true, "wrapAround": true}'>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
</a>
<a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
</a>
</div>
I have another JS file with some basic scrollTo jQuery code, but other than that I just need to figure out how to get the links on the images to work. Any ideas?
I fear that you can't have both touch response and link. But you can add an element to link inside of the element that you are sliding.
<div class="hero-carousel__cell hero-carousel__cell--2 is-selected" style="position: absolute; left: 100%;">
<div class="hero-carousel__cell__content">
<p class="slogan slogan--easy">Easy to use.</p>
<p class="slogan slogan--fun">Fun to flick.</p>
<p class="slogan slogan--tagline">Flickity makes carousels, galleries, & sliders that feel lively and effortless.</p>
</div>
</div>
This is a piece of the example of Flickity web, you can see I added a link to a element. If you need to have images you can set them as background-image in the wrapper div, and put a clickable link inside not covering the whole div.

Javascript with images

I am currently trying to insert image with Javascript attached to it and for some reason it works on Firefox but the images or icons do not display on IE.
I have done the coding like this:
<a href="javascript:changesize('xxx')">
<img src="Images/changesize.jpg" title="Change Text Size">
</a>
<a href="javascript:changefont('xxx')">
<img src="Images/changefont.jpg" title="Change Font">
</a>
<a href="javascript:changeline('xxx')">
<img src="Images/changeline.jpg" title="Change Line Spacing">
</a>
<a href="javascript:changecolors('xxx')">
<img src="Images/changecolors.jpg" title="Change Text/Backgroud Colors">
</a>
You could try:
<img src="Images/changeline.jpg" title="Change Line Spacing" onclick="changeline('xxx')">

Fancybox looping through multiple albums

I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?

Categories