We Keep Coding

why show() method does not work in jQuery?

I am trying to create a very simple slideshow using jQuery code with only 3 pictures.
I use the next() method to show the next image. This is how it should work:
When you click on a link (class="next"), a method is called which hides the current image and shows the next image and adds 1 to a counter (i) unless a 3rd image. Then, it hides the current image and shows first image (id="first").
It's OK when you click on the first or second image and works correctly, but when you click on the 3rd image, it just hides the current image but it doesn't show first picture.
var a = new Array();
$("#slideShow").children().first().show();
$("#slideShow").children().first().next().hide();
$("#slideShow").children("div").last().hide();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
$(this).hide();
$(this).siblings().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
These are some ways I tried:
Using css({"display":"block"}) instead of show() in jQuery
Using Javascript syntax instead of jQuery: document.getElementById("first").show();
Traversing instead of using id: $(this).parent().parent().show;
However these didn't work.

Your logic isn't quite correct as you hide the content of the slide div, then try and call show() on the slide div, not its content.
A better approach is to use a class to track the active slide and move to the next() one on button click:
let $slides = $('#slideShow > div');
$(".next").click(function() {
let $current = $slides.filter('.active').removeClass('active');
let $target = $current.next('div');
if (!$target.length)
$target = $slides.first();
$target.addClass('active');
})
#slideShow > div {
display: none;
}
#slideShow div.active {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideShow">
<div class="active">
Screen 1
<img src="img\Screenshot (1).png">
</div>
<div>
Screen 4
<img src="img\Screenshot (4).png">
</div>
<div>
Screen 15
<img src="img\Screenshot (15).png">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>

The problem is that you show() the parent <div> but you also hide() the <img> / <a> children and never show() them again.
Remove:
$(this).hide();
$(this).siblings().hide();
and add:
$(this).parent().hide();
then you should be ok. Without changing any of your other logic, this gives:
var a = new Array();
//$("#slideShow").children().first().show();
//$("#slideShow").children().first().next().hide();
//$("#slideShow").children("div").last().hide();
$("#slideShow>div").hide().first().show();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
//$(this).hide();
//$(this).siblings().hide();
$(this).parent().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>

I would recommend SwiperJS
However, this might be a quick solution to your problem
$(".prev").click(function() {
//go to previous slide
var activeSlide = $("div.active"),
previousSlide = activeSlide.prev()
//check if there is previous slide
if (previousSlide.length !== 0) {
activeSlide.removeClass("active")
previousSlide.addClass("active")
} else {
alert("there is no previous slide!")
}
})
$(".next").click(function() {
//go to next slide
var activeSlide = $("div.active"),
nextSlide = activeSlide.next()
//check if there is next slide
if (nextSlide.length !== 0) {
activeSlide.removeClass("active")
nextSlide.addClass("active")
} else {
alert("there is no next slide!")
}
})
#slideShow > div{
display:none;
overflow:hidden;
height:120pt;
width:250pt;
}
#slideShow > div img{
width:100%;
}
#slideShow > div.active{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=slideShow>
<div class="active">
<img src="img\Screenshot (1).png" alt="slide1">
</div>
<div>
<img src="img\Screenshot (4).png" alt="slide 2">
</div>
<div>
<img src="img\Screenshot (15).png" alt="slide 3">
</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>

How to remove data-toggle="modal" in specific window size?

I am a beginner of the javascript. I want to remove the data-toggle attribute when the screen size is less than 760px and make the href working. I have no idea how to remove the data-toggle attribute, below is my code:
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" />
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03">
<img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/>
</h2>
</div>
</a>
</div>
<div class="port-info">
<h4>
Example
</h4>
</div>
</div

At the bottom of your page (just before the </body> tag) add the following code :
if(window.innerWidth < 760){
document.getElementsByTagName("a")[0].removeAttribute("data-toggle");
}

Nobody addressed the case when the screen width might again be greater than 760. We'll have to add the data attribute back.
window.addEventListener("resize", resizeHandler);
function resizeHandler() {
var winWidth = window.innerWidth,
threshold = 760,
els = document.getElementsByClassName('thickbox');
[].forEach.call(els, function (el) {
if (winWidth < threshold) {
el.removeAttribute("data-toggle");
} else {
el.setAttribute("data-toggle", "bar");
}
});
}
Check out this tiny demo to see it in action. http://codepen.io/antibland/pen/reZNNO

You can use a bit of jQuery... Don't forget to update the selector ELEMENTID
if($(window).width() < 760){
$('#ELEMENTID').find('a').removeAttr('data-toggle');
}

Masonry layout is loading with height 0px

I'm trying to load images into a simple masonry.js layout, with images loaded first, and it looks like masonry is applying height: 0px to both the grid and grid items. Any idea why this is happening? Here is the js I am using, and a codepen.
http://codepen.io/kathryncrawford/pen/WwGVNa
JS
jQuery(function ($) {
var $container = $('.js-grid').imagesLoaded( function() {
console.log("images are loaded");
$container.masonry({
itemSelector : '.js-masonry',
columnWidth: 100
});
});
});

If you inspect the HTML in the Masonry docs, you notice that img's are always wrapped inside a div. Just surround your img's with divs.
<div class="js-grid">
<div class="js-masonry">
<img src="http://www.placecage.com/200/600" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/400/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/100/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/300" alt="">
</div>
</div>
See codepen.

Scrolling the height of several divs by several buttons

I have a page with the following structure:
<div id="about" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="films" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="projects" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
I would like that when clicking on the image, you will be scrolled to the end of the <div> where the <img>is located.
I have stated with this code but it works only for the first image.
function go_to(){
$("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}
$(document).ready(function(){
var go_to_div = $('.button img');
$(go_to_div).click(function(event) {
go_to()
});
});
If necessary, I can change the HTML structure. Thank you!!

Because for scrollTop property, you need to give a value to go there. Your $('.section').height() code allways gives the same value so it kinda stuck. Try this instead
function go_to(section){
var pos = section.position();
$("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}
$(document).ready(function(){
$('.button img').click(function(event) {
go_to($(this).closest(".section"));
});
});
FIDDLE

Trying to make different text appear below 3 aligned images on hover

First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.

You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});

First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});

I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.