Develop Reference

How to close an image that is displayed by clicking on anchor tag in Javascript?

I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>

How to connect a show/hide and scrollit

I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.

Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/

Changing image gallery by button

First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.

I think you are looking for this: http://isotope.metafizzy.co/

You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});

adding a small image to a image slider caption with bxslider?

Using bxslider for a little sliding gallery. I want to show captions, which I realize is built in. But...what I'd also like to do is add a small image to the caption.
This is someone elses fiddle: http://jsfiddle.net/s2L9P/3/
It uses span's to display multiple lines of text in the caption:
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg"/>
<div class="caption1">
<span>Image 1</span><br></br>
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
.
.
.
But if you stick a img tag in, it just displays as text. How can I put images in the caption?
Thanks!

added image with no problem
see this fiddle
<div class="caption1">
<img src="http://png-3.findicons.com/files/icons/861/tweet_my_web/128/single_bird.png" />
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a>
</div>
</div>

blueimp gallery set indicator on by default

I am using blueimp gallery http://blueimp.github.io/Gallery/ as a lightbox in my website. Is there an easy way to keep the indicator on by default? Right now, after you open a gallery in a lightbox you need to click on an image for it to show navigation buttons and indicator options.

Add blueimp-gallery-controls class to gallery container:
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>

Edit the blueimp-gallery.css. Set the elements you want shown to display:block instead of display:none.