Develop Reference

Targeting next Image that is inside a col class

<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
I am trying to build an image gallery with arrows so you can press the next arrow and display next image (like all basic sliders). Since I just learned some basics of bootstrap I decided to use bootstrap for this project, however, I had to put every image in a separate col class (please notify me if this is not a good way). Since every image is in nested in another col class when I use this.nextElementSibling in the event listener I get null as a return. Is there any way that I can target the next image please?

You can use jQuery for this since you already using it for bootstrap
$(this).parent().siblings().find("img")
You can use Javascript as well as follow
this.parentElement.nextElementSibling.children[0];
Where children[0] means first child element

You can use document.querySelectorAll and access your nodes via index.
Small example
const items = document.querySelectorAll('.row .col-12'); // all .col-12 notes inside .row
let currentIndex = 0; // current item index
// refresh icons and set border color
const refreshItems = () => {
items.forEach((item, index) => {
item.style.border = `1px solid ${index === currentIndex ? '#f00' : '#0f0'}`;
});
}
// init
refreshItems();
// simple call by index
// items[5].style.border = '1px solid #0f0';
// Add click event to .prev button and increase current index 1
document.querySelector('.next').addEventListener('click', () => {
currentIndex += 1;
refreshItems();
});
// Add event to .prev button and decrease current index by 1
document.querySelector('.prev').addEventListener('click', () => {
currentIndex -= 1;
refreshItems();
})
<button class="next">next</button>
<button class="prev">prev</button>
<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
</div>
</div>
Lastly, add transforms, transitions, overflows, and index checks, and your slider is ready.

Pair element-trigger from a list of similar selectors using classes jquery

I have a html code similar to this:
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
What i am trying to do (with JQuery) is when the user is clicking on the first div "row launch" to do something with the link "light-link" inside next siblings ul "row gallery". I want the same thing with the second div "row launch", and the link inside the bellow sibling and so on...What i am dooing wrong?
my code looks like this:
$('.launch').click(function(){
$('.launch').next().children("a:first").trigger('click');
});
But it does not work, it always attach the event to the first ul a "light-link" from the list, even when i click on the second div "row launch" from the list, or the third...
Note: needed for a lightgallery example (multiple galleries using classes), i wanted to trigger a clic on a thumbnail, when the user clic on a default large image, and activate the related gallery.

You can use the siblings and children. note that to trigger a native click you should use the get and then use the click function to trigger it.
$('.launch').click(function(){
$(this).siblings('ul').children(".light-link").get(0).click();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic1"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="google.com" alt="pic link1"/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic2"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="" alt="pic link2"/>
</a>
</ul>
</div>

Try the .find() function combined with the selector this:
$('.launch').click(function(){
$(this).next().find("a:first-of-type").trigger('click');
});

Thank you. Both this 2 answers works,
So my problem was related to lightgallery
http://sachinchoolur.github.io/lightGallery/demos/
I have all this thumbnails, and when clic some of this you activate the lightgallery. But, i needed also, that when the user clic on a bigger default image(not thumbnails) it will activate the gallery related by triggering a clic on the first thumb lightgallery with big picture activating the gallery

Implement Jquery show()?

How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});

This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.

Implement jQuery slidedown effect

I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.

Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});

Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.

Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.

Using image max-width and keeping height ratios for responsive

Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.
This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.
Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.
Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.
My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with css?
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image1.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image2.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image3.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image4.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image5.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image6.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image7.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image8.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image9.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
</div>
</div>
CSS:
.block img{
max-width: 100%;
}

To delay the Js to run until all images are loaded you should use jquery's
$(window).load(function(){
//your code here
});
or you can resize images when each one is loaded
$('img').each($(this).load(function(){
//resizing code here with $(this).height or $(this).width() maybe
});
to check the bootstrap you can use
$(window).resize()
to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.