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

Lightbox CSS/JS gallery integration to WordPress image upload

I am a beginner with WordPress.
I have a HTML/BOOTSTARP "One page" template which has a gallery built with Lightbox CSS/JS.
Refer the template link here.
I have integrated this theme to WordPress and everything works fine.
Now, I would like to upload pictures to this existing gallery using WordPress.
A post creation is giving me options to upload this as a new post.
I have 8 portfolios and would like to add several pictures to specific portfolios from WordPress so that it could be automatically uploaded.
Please be reminded that this is a One page website.
<section id="portfolio">
<link href="css/lightbox.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2>Our Gallery</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<h3>gallery</h3>
<p></p>
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!-- <h3>Time Hours</h3>
<p>Design, Photography</p>-->
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!--<h3>Time Hours</h3>
Code for the portfolio
Kindly help me with your suggestions on how to do it.

Firstly
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
<i class="fa fa-search-plus"></i>
has double slash "//" which leads to not finding the actual file.
Besides that, have you checked that Lightbox CSS and JavaScript file are loaded properly? See the console if there is any error.

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.

Issue Blueimp gallery Twitter Bootstrap

I'm using Blueimp gallery to present some images on my website. There are 8 images divided in two rows. The 5th thumbnail (first image on the second row) seems broken, although I can see it in the carousel presentation.
![thumbnails]:https://drive.google.com/file/d/0ByO6EWQ4CgAUaGwzbXhnWDlBWFU/view?usp=sharing
Here's the code
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<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>
<div id="links">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/117.jpg" class="thumbnail">
<img src="img/thumbnails/117.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/119.jpg" class="thumbnail">
<img src="img/thumbnails/119.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/120.jpg" class="thumbnail">
<img src="img/thumbnails/120.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/121.jpg" class="thumbnail">
<img src="img/thumbnails/121.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/125.jpg" class="thumbnail">
<img src="img/tumbnails/125.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/128.jpg" class="thumbnail">
<img src="img/thumbnails/128.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/129.jpg" class="thumbnail">
<img src="img/thumbnails/129.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/130.jpg" class="thumbnail">
<img src="img/thumbnails/130.jpg">
</a>
</div>
</div>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
Does anyone have an idea of what can be happening here. Thanks in advance!

You have a typo: change
<img src="img/tumbnails/125.jpg">
to (add the 'h')
<img src="img/thumbnails/125.jpg">
:)

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');
});