We Keep Coding

fancybox two images shown at the same window

I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>

So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).

Onclick of Image (used in element <a>) not working in jquery

I have this footer of a fixed nav-bar in Div.
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>
On click of image1, I want to do some stuff. I am using alert to test it. The jquery function is in a separate js file which is added in the html. This is the only function js file has in it. I tried to use #id1 and #image1 both in the ebelow function, but it just would not get called.
$("#image1").click(function() {
alert("you are in Act-1 window");
});
what's wrong in such a simple code, i just can't get it.

Your code works fine. It seems to be working for me. The alert gets called if that is what you are looking for
$("#image1").click(function() {
alert("you are in Act-1 window");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>

Why you put the image inside a href="#" if you are not going to use it? here you have the error

You can also avoid jQuery by vanila js.
var img = document.querySelector('#YourID');
img.addEventListener('click', handler function);
It's better to use separated function for handling ( in this case you can remove the handler).

Open gallery when select a thumbnail

I'm trying to add some code in order to open a gallery when a thumbnail is selected.
Right now i have this line
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
........
</div>
Now, i would like to open a gallery or carousel whenever a thumbnail is selected.
It's a portfolio so each thumbnail represent something different, for example, photography, video, illustration, and so on.
Bootstrap's CSS is mostly default, same for js.
Thanks

Try this
<div class="col-lg-12 gallery">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="" onclick = "Show()">
</a>
</div>
<style>
.gallery{
display: none; // gallery is not visible normally
}
</style>
<script>
function Show(){
document.getElementsByClass('gallery').style.display = 'block';
</script>
Here when user clicks an image, you are calling the show function which manipulates the display property of the class gallery. Remember that this function will affect all elements belonging to class 'gallery'. Use id of you intend to have only one such gallery on your page.

Jquery click function not being called on dynamic data

I've gone through the existing questions and can't find a solution to my problem, so here goes...
I am trying to implement a carousel inside of a modal, but the click function is not being called when I activate the modal. The HTML is generated dynamically, so I'm think my problem is how I'm incorporating the javascript.
I should mention this is what I'm trying to implement: http://www.bootply.com/alcaraz/QxGeDFsS8G#
Here is my my HTML that is being loaded dynamically
<div class="container" id="photography">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive" id="image-1">
</a>
</br>
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class=" thumbnail img-responsive" id="image-2">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive" id="image-3">
</a>
</div>
</div><!--Row-->
<div class="hidden" id="image-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="img/img1.jpg">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="img/img1.jpg">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="img/img1.jpg">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
And here is my Javascript
$("document").ready(function(){
$('.stop-this-link').on('click', false);
$("#About").on("click", clickAbout);
$("#Projects").on("click", clickProjects);
$("#Photography").on("click", clickPhotography);
$("#Film").on("click", clickFilm);
$("#Resume").on("click", clickResume);
$("#Contact").on("click", clickContact);
});
function clickAbout(evt){
$("#portfolio").load("aboutMe.html");
}
function clickProjects(evt){
$("#portfolio").html("Clicked Projects");
}
function clickResume(evt){
$("#portfolio").html("Clicked Resume");
}
function clickPhotography(evt){
$("#portfolio").load("photography.html");
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
$(".modal-title").html($(this).find(".active img").attr("title"));
})
/* when clicking a thumbnail */
//$(".portfolio .photography").on('click', ".row .thumbnail", function(event){
//$(document.body).on('click', '.row .thumbnail', function(event){
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
//$("#modal-gallery").modal("show");
});
}
function clickFilm(evt){
$("#portfolio").load("film.html");
}
function clickContact(evt){
$("#portfolio").load("contact.php");
}
Finally, here is the static HTML that the dynamic content is loaded into.
<div class="col-md-9 col-lg-9 col-xs-9 col-sm-9" id="portfolio"></div> <!--Portfolio!-->
<div id="modal-gallery" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div><!--Modal Header-->
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div><!--Carousel-Inner-->
<a class="carousel-control-left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control-right" href="#modal-carousel" data-slide"prev"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div><!--Carousel-->
</div><!--Modal Body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--Footer-->
</div><!--modal content-->
</div><!--Modal Dialog-->
</div><!--modal-gallery-->

You need to propagate the event when dynamic elements are added to the DOM:
$("body").on("click", '#About', clickAbout);
Event delegation is basically attaching the event to a parent container (for the sake of the example i've used body, but you might want to use a closer parent in order to make it more performant). This parent will have the event and it will know when a new child is added to it, and delegate the event to that given child.

You need to use event delegation for this. You are binding events on page load (inside your document ready function), but the elements don't exist in the page yet. You should do something like this:
$('body').on('click', '#About', clickAbout);
This will listen for click events on the body tag and then see if they match the provided selector. Read more about event delegation here: http://api.jquery.com/on/
A more efficient way to accomplish this in your particular use case would be to set the onclick attribute of the elements that you are adding dynamically. For example:
<div id="About" onclick="clickAbout">
Also, you have some issues with your HTML. You cannot assign the same ID to multiple elements as you have. You have three divs with the id "image-1", for example. IDs must be unique and only one element with a given ID should exist within the page. Otherwise, you'll run into all sorts of problems.

scrolling up set of pictures up and down on hover function

I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>

just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});