Develop Reference

I would like to recover an id and insert it into several src, to avoid repeating

I want to retrieve "id" from each post to use in various places inside the post.
How can I achieve that?
$("a").attr("onclick", function() {
return "changeVideo('" + this.id + "')";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-.jpg";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-preview.mp4";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div title="First Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[Retrieve the id from the first post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the first post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the first post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div title="Second Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[retrieve the id from the second post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the second post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the second post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>

I think the key here, is to loop through all the .post... And there is 3 attributes to set for each.
See comments in code.
// Loop through each post
$(".post").each(function(){
// Get the id
var id = $(this).data("id");
// Set the anchor's onclick
$(this).find("a").attr("onclick","changeVideo('" + id + "');");
// Set the poster and src
$(this).find("video").attr({
"poster":"https://WebSite" + id + "-.jpg",
"src":"https://WebSite" + id + "-preview.mp4"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="A-DIFFERENT-ID-FOR-FUN">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
The id you look for is in a data- attribute in the .post element's markup. It also is the parent of the element you wish to "update"... So it's a good starting point to retreive the id and .find() the childs. An .each() loop is the best way to process them all correctly.

In your functions, this refers to the element to which you've bound the function.
Here's a demonstration:
$("video").attr("poster", function() {
console.log("This refers to: " + this);
console.log(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video></video>
But it seems that you want to get the id attribute from the containing <div> for each post.
I suggest that you assign each post <div> a class of "post".
Then you can select the desired post from within your functions by using jQuery's closest().
<div class="post" ... >
I recommend that you use a data attribute like data-id rather than the id attribute,
since the id attribute has its own specific purpose.
<div class="post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677" ... >
I recommend removing the <a> elements and binding a click handler directly to the .thumb elements. That way you simplify your HTML structure and don't need the inline onclick="" attributes.
Here's a working example:
$("video").attr({
'poster': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-.jpg";
},
'src': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-preview.mp4";
}
});
$(".thumb").on('click', function(e) {
e.preventDefault();
var id = $(this).closest('.post').data('id');
changeVideo(id);
});
function changeVideo(id) {
console.log('Changing Video: ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="a-different-video-id">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
That results in a structure like this:
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted="" poster="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-.jpg" onmouseover="this.play()" onmouseout="this.pause()" src="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-preview.mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
And jQuery has bound a click handler to each .thumb, which will pass the appropriate data-id to the changeVideo() function.

Better way to use onclick functions with image gallery

I have an image gallery that shows small thumbnails on a page, and when you click on a particular thumbnail a slideshow modal opens with 2-3 pictures in each set. Instead of listing each onClick method out in my script I am wondering if there is some better way to target the same elements and get the same effect in a much cleaner and easier to read manner.
The jist of my code is that you click the thumbnail, an image list (ul) appears and you can slide through them.
I just want to simplify the the clicking and targeting of the correct ul for the selected thumbnail.
jQuery:
$('#port-img-one').on('click', function(){
$('#img-set-one').removeClass('hidden');
});
$('#port-img-two').on('click', function(){
$('#img-set-two').removeClass('hidden');
});
HTML:
<div class="row work_gallery">
<div class="offset-md-1 col-md-5 gallery_block gallery_block_left" id="block-1">
<!-- This is whats being clicked -->
<img id="port-img-one" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
</div>
<div class="col-md-5 gallery_block gallery_block_right" id="block-1">
<img id="port-img-two" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
</div>
</div>
<div class="row modal_top">
<div class="col-12 modal_img_wrapper">
<!-- The matching ul needs to be revealed -->
<ul class="images hidden" id="img-set-one">
<li>
<img class="main_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
</li>
<li>
<img class="other_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
</li>
</ul>
<ul class="images hidden" id="img-set-two">
<li>
<img class="main_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
</li>
<li>
<img class="other_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
</li>
</ul>
<ul class="triggers">
<li class="img_nav" id="one"></li>
<li class="img_nav" id="two"></li>
<li class="img_nav" id="three"></li>
<li class="img_nav" id="four"></li>
</ul>
</div>
</div>

Put on click handlers on the gallery images, add a data-images attribute to your images, and then when an image is clicked, you can get the id of the gallery to remove the hidden class from.
$('.gallery_img').on('click', function(){
var imageSetId = $(this).data('images');
$('#' + imageSetId).removeClass('hidden');
});
Your HTML would look like this for your images:
<img id="port-img-one" data-images="img-set-one" ... />

Animation not working with list item

I am trying to show animation on list item click. Same animation work with button click but not with list item.
No exception printing on console.
Here is my code.
function animateButtons(clicked_btn_id){
var circle = $('#' + clicked_btn_id + ' .circle');
if (!circle.length) {
$('#' + clicked_btn_id).append('<div class="circle"></div>');
circle = $('#' + clicked_btn_id + ' .circle');
}
setTimeout(function(){
circle.toggleClass('open');
});
setTimeout(function() {
//change image back
circle.toggleClass('open');
}, 300);
}
}
function clickedControlButton(clicked_btn_id){
animateButtons(clicked_btn_id);
}
Here is html code.
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li>
<img src="images/one.png" class="img-circle center-block img-reponsive" alt="one" onclick="clickedControlButton(this.id)" id="btnone">
<p style="color:white;" class="index-footer-btn-text" id="oneText"> one </p>
</li>
<li>
<img src="images/two.png" class="img-circle center-block img-reponsive" alt="two" onclick="clickedControlButton(this.id)" id="btntwo">
<p style="color:white;" class="index-footer-btn-text" id="twoText"> two </p>
</li>
<li>
<img src="images/three.png" class="img-circle center-block img-reponsive" alt="three" onclick="clickedControlButton(this.id)" id="btnthree">
<p style="color:white;" class="index-footer-btn-text" id="threeText"> three </p>
</li>
</ul>
</div>

You may need to add the listener to the list items and not to the images. Images do not support nested elements, meaning that you can't add any circles inside the image, so you need to add it inside the list and format it with CSS to look as you wish.
So:
Remove the onclick event from the img elements
Give the list elements some id's
Attach the events to the list elements
Format your circles using CSS
Here is a JSFiddle with the functionality you want to achieve:
https://jsfiddle.net/oz15hzsb/
Here is how to attach the listeners:
$('.nav-tabs li').click(function(){
animateButtons($(this).attr('id'));
})

How can I use jQuery to highlight ONLY the selected thumbnail?

Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!

How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.

$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});

Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.

As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});

This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});

If parent li hasclass append class to child element

I'm trying to add a class called "animated" to a child div only when the parent li has a class called "current". Additionally, I'm trying to remove the "animated" class if the parent li does not show the "current" class.
$(document).ready(function() {
if ($('ul.itemwrap li').hasClass('current')) {
$( "ul.itemwrap li" ).find( ".caption-text" ).addClass("animated");
}
else {
$( "ul.itemwrap li" ).find( ".caption-text" ).removeClass( "animated" );
}
});
problem*
the code works, somewhat, however, it's only adding the class to all child (.caption-text) elements as well as not removing them when the "current" class is added and removed throughout the carousel loop.
Html*
<ul class="itemwrap">
<li class="current"> <img src="images/img1.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img2.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>Title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img3.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder ">
<div class="container">
<div class="caption-text">
<h1>Title></h1>
</div>
</div>
</div>
</div>
</li>
</ul>

An issue with your code is that if one <li> has the class 'current', then you're adding the class animated to all ".caption-text" elements, not just the ones below the item with '.current'.
You could fix your code in a couple ways. This way processes each <li> individually:
$(document).ready(function() {
$('ul.itemwrap li').each(function() {
var item = $(this);
var caption = item.find(".caption-text");
if (item.hasClass('current')) {
caption.addClass("animated");
} else {
caption.removeClass("animated");
}
});
});
This way uses selectors to do more of the work for you:
$(document).ready(function() {
// clear .animated from all captions
$('ul.itemwrap li .caption-text').removeClass("animated");
// put back the .animated under .current
$('ul.itemwrap li.current .caption-text').addClass("animated");
});