Develop Reference

How to play a video in jQuery image slider?

I have a jQuery slider that I wrote in jQuery in WordPress site.
I want to enable it to play video if the src extension is "mp4".
Any ideas?
Here is an example of the HTML generated: (please note the first img src is a link to a video)
I would like to enable the visitor click play button to start the video.
<div id="img-container" style="width: 2828.1px; padding-right: 886px;">
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2015/12/VideoClip.mp4" height="1080" width="842" alt="" title="" style="height: 414px; width: 323px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railings.png" height="612" width="600" alt="" title="" style="height: 414px; width: 230px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railing-1.png" height="600" width="462" alt="" title="" style="height: 414px; width: 177px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div style="clear: left;"></div>
</div>

Here is the code I was looking for: (will replace every mp4 link with video tag):
$('.picture_holder .picture > img').each(function(index){
console.log("index="+index+" Video src = "+ $(this).attr('src') + "<<<");
let imgsrc = $(this).attr('src');
if (imgsrc.indexOf(".mp4") >0) {
console.log("want to replace");
$(this).parent().prepend('<video width="320" height="600" controls><source src="'+imgsrc+'" type="video/mp4"></video>');
$(this).remove();
}
});
It replaces the img element with video element.
I use parent().prepend() simply because replaceWith() is not working here.
Few fixes are still missing to place it correctly, but it works.

Targeting specific div to update image

I am using a simple piece of JS to change the image that is in a div from plus to minus. I have multiple divs on this page which are generated dynamically. How could I specifically change the sign on the div that is clicked. Currently I have the same class for each div. This means whenever I click any div only the first divs image changes, not the div that was clicked.
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("plus")) {
image.src = "img/minus.svg";
} else {
image.src = "img/plus.svg";
}
}
Is the only way to fix this dynamically assigning new class to each div and generating multiple scripts for teach class?
EDIT:
I am using the same method as before but on a slightly different layout. Any reason why this isnt working?
<div class="open-link" style="display: block;">
<a href="#" class="img-change">
<p class="inner">Expand <br><img id="myImage" src="img/arrow-down.svg" width="20" height="20"></p>
</a>
</div>
JS
$(document).on('click','a.img-change',function(){
var $img = $(this).find('p.inner');
if($img.attr('src').match("down"))
$img.attr('src','img/arrow-up.svg');
else
$img.attr('src','img/arrow-down.svg')
});

Every img in your markup has the same id, this is bad, all elements, if they have an id, should be unique. This does NOT mean you should use a unique id on every image and a specific script for every button! That would be bad. Just remove the duplicate id's!
Then this is pretty easy, use jQuery to attach a click event to every div and look for the image within it
take off the in-line onclick
<div class="hover2 opacity">
and use jQuery
$(document).on('click','div.hover2',function(){
var $img = $(this).find('p.heading img');
if($img.attr('src').match("plus"))
$img.attr('src','img/minus.svg');
else
$img.attr('src','img/plus.svg')
});

You don't need to assign an id to the <img/> elements
HTML
<div class="hover2 opacity" onclick="changeImage(this)">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view
<span class="s-right">
<img src="img/plus.svg" width="20" height="20">
</span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage(el){
var img = el.querySelector('span > img');
img.src = (img.src.match("plus")) ? "img/minus.svg" : "img/plus.svg";
}

You can try this:
$(document).ready(function() {
$(".opacity").on("click", function() {
var source = $(this).find("img").attr("src"); // Gives source of image inside the presently clicked div
console.log(source);
if (source.match("plus")) {
console.log("match");
$(this).find("img").attr("src", "img/minus.svg");
} else {
$(this).find("img").attr("src", "img/plus.svg");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>

U still can use $(this).find('img') to find img for selected div and change the src.
Example
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage1" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage2" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
So it your javascript, u can use this
$(document).on('click','div.hover2',function(){
$(this).find('img').attr("src","img/minus.svg");
}
Jsfiddle link -> https://jsfiddle.net/w1yb5fcc/1/

Replace an image with another when a different image is hovered on

I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>

How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.

Several triggers not fully working and code is extra long

I have a page that has 7 image boxes, these boxes are alert boxes for our customers agents for any type of alerts being sent out. I have them all set as a link, when clicked the box turns from orange to blue and an information box is opened next to it, each image has its own info box. I have it partially working but it is not function how I want. I need it so if box1 is opened and the user clicks box2 the box1 should revert back to orange and its info box needs to close so that box2's info box can populate the space. Right now the image boxes stay blue when you click on other boxes and the code I have to close the info boxes is bugging out if you click off another image box. Here is part of my code and my HTML:
(Update) Here is a jsbin link of my example as it should be working. However, the click event is not working on my system, its not even trying to scroll to the top of teh page which normally happens when the trigger breaks but the href=# is there. Here is my new code:) JSBin
//JS
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element
(ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$abox.find('.blue').show();
$abox.find('.orange').hide();
$abox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
}
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box' + i);
}
});
//CSS
.alertBox2
{
float:left; display:block;
}
.alertDetails
{
display:none; background-color:#fff; width:250px; height:585px; float:left; position:relative; left:5px; top:8px;
}
//HTML
<div><a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div><a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
<div><a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
</div>
<p id="alertDP">Click on any Alert to the left to see details</p>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

Edit: A link demonstrating my understanding of your issue. http://jsbin.com/ecelil/1/edit
A few observations, clicking on any one aBox only toggles its own infoBox. In the click handler for aBox2 you seem to have noticed that and tried to fix it by passing three infobox selectors to jQuery. However jQuery doesn't work that way. It accepts only one selector. That selector can however match those three elements.
Replace the first line of each of the three aBox click handlers with $('.infoBox1, .infoBox2, .infoBox3').toggle();
As for the code being too long, well, for loops, variables and css class selectors are your friends :)
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element (ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$aBox.find('.blue').show();
$aBox.find('.orange').hide();
$aBox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
};
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box'+i);
}
});
// css
.blue-info-box {
background-image: url('Images/blue_alert_box.jpg');
}
.orange-info-box {
background-image: url('Images/orange_alert_box.jpg');
}
// html
<div>
<a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

how to display some information of image in another div by clickin on image with jQuery?

how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image

If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
​<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div> ​​​​​​​​​​​​​
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.

Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});