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.
Related
I'm trying to swap out the title attribute on all images on the page that contain the string slide in the class name. The image class names vary and are followed by a unique numeric string (ex: slide-1234, slider-4321) so it's important it just contains the string slide. I want to replace it with the WordPress post title. Here is my code so far (doesn't work)
<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>
Very simple, but unfortunately doesn't work. I used alert to debug and was able to print the title, but the selector is the issue.
Here's the HTML
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I believe your script is running before the DOM is fully loaded. You can either place the script code at the bottom of the body tag OR try wrapping your code with $(document).ready(function(){...}).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var title = 'someTitle';
$('img[class*=slide-]').attr('title', title);
});
</script>
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I have a bit of a problem with a gallery.
I'm trying to fit images & videos in a row and have them keep an equal height.
I could achieve that with the following code but only in the case of a row full of images. If I try to place a video, it doesn't work...
var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
var row = $(this),
rowItems = row.find(".gallery-item"),
totalMarginSpace = (4 * (rowItems.length - 1)),
itemsWidthSum = 0,
diff,
rowItem,
rowItemWidth;
videos.addEventListener('loadeddata', function() {
rowItems.height(1000);
for(var i = 0 ; i < rowItems.length ; i++) {
rowItem = rowItems[i];
rowItemWidth = $(rowItem).outerWidth();
itemsWidthSum += rowItemWidth;
}
if(rowItems.length >= 3) {
diff = (row.width() - totalMarginSpace) / itemsWidthSum;
rowItems.height(999 * diff);
} else {
rowItems.height(250);
}
}, false);
});
Here's my HTML :
<section class="gallery-section">
<div class="img-row">
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item margot" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
</div>
Any ideas on how to get my code to work ?
Thank you !
Code updated : I replaced item.width by item.offsetWidth (as width return nothing with videos).. It's a bit better but now the rows containing the videos are smaller than the one without.
Solution found ! Thanks for all your help but I really wanted to use JS to resolve my problem.
Ok so it did come from the videos because they were not completely loaded yet. So I added an eventlistener. I updated my code in case anyone wants to use it.
Try making a table
<table>
<tr>
<th>your imgs</th>
<th>your videos</th>
...
</tr>
</table>
then try to adjust the table with responsive CSS with this tutorial. I don't know if I understood your problem but I hope this helps.
I know we shouldn't have img tags without a src path, but this is the code I'm stuck with trouble shooting. I've tried a few different forms of Javascript and JQUERY, but I'm still learning. I've used all of the other links on stackoverflow that were specifically for hiding images without src paths, but none have helped. I mixed a few of them and this script is the closest I could get to work with dynamic images (The images are being called out dynamically)
HTML:
<div class="item"><img src="{{imgMain}}" alt="" id="imgOne"/></div>
<div class="item"><img src="{{imgTwo}}" alt="" id="imgTwo"/></div>
<div class="item"><img src="{{imgThree}}" alt="" id="imgThree"/></div>
JQUERY:
$(document).ready(function(){
$(img).each(function(){
if ($(this).attr("src") === "_")
$(this).remove();
else
$(this).addClass("show");
});
});
register the onload event on img tag :)
function showOnLoad(e){
e.target.style.display = "inline";
}
.hide{
display: none;
}
<img class="hide" onload="showOnLoad(event)" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" />
<img class="hide" onload="showOnLoad()" src="" />
<div id="result" > </div>
<div class="item"><img src="something" alt="" id="imgOne" class="x" /></div>
<div class="item"><img src="something" alt="" id="imgTwo" class="x"/></div>
<div class="item"><img src="_" alt="" id="imgThree" class="x"/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.x').each(function(){
if ($(this).attr("src") === "_")
$(this).remove();
else
$(this).addClass("show");
});
});
</script>
I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.
The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.
If image in position 1 is clicked, I want to play video_1 in the player, and so on.
The URL of video will be in this format <source src="videos/video_1.mp4"
Here is my markup
<body style="background-color: #0094ff">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<video width="640" height="360" controls id="player">
<source src="videos\video_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row">
<div class="col-md-12 slider">
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
})
$('.slider').on('click', '.slick-slide', function () {
alert("Slide clicked");
//how can I show the video with the position of the clicked slide?
})
</script>
</body>
How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?
UPDATE
Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.
To answer your question exactly do this:
$('.slider').on('click', '.slick-slide', function () {
var index = $('.slider').slick('slickCurrentSlide');
$('#player source').attr('src', 'videos/video_'+index+'.mp4');
})
But better control would be:
Add a data-video to each img tag:
<div class="col-md-5 col-xs-3">
<img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>
You can then swap out the video like so:
$('.slider').on('click', 'img', function () {
var data = $(this).data(); // Grab data from IMG
$('#player source').attr('src', data.video);
})
I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});