Time ago I had a header implemented with a Bootstrap carousel: You know, something like this:
<div class="carousel">
<div class="item"><img src="pic1.jpg"></div>
<div class="item"><img src="pic2.jpg"></div>
</div>
Pay attention to that link on "pic2.jpg", this will be fun...
Recently, I have been asked to use <picture> elements, so now it is posible to display images for mobile devices:
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic1-small.jpg">
<img src="pic1.jpg">
</picture>
</div>
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</div>
And here is the tricky question: I need to add a link only in the mobile image (pic2-small.jpg).
(Well, in fact could be links on every image, or none at all, only in the mobile image, only in the desktop image... This is managed by the administrator user)
So, I can't do this because the link should be only for pic2-small, not pic2:
<div class="item">
<a href="example.com">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</a>
</div>
What I did is this:
<div class="item" onclick="header_onclick(this)">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg?target=pic2-small-link">
<img src="pic2.jpg">
</picture>
<a id="pic2-small-link" href="example.com" style="display: none"></a>
</div>
<script>
function header_onclick(carousel_item)
{
var current_src = carousel_item.querySelector("img").currentSrc;
if (typeof current_src === "undefined") {
return;
}
var src_parts = current_src.split("?target=");
if (src_parts.length < 2) {
return;
}
var link = document.getElementById(src_parts[1]);
if (link) {
link.click();
}
}
</script>
An onclick event in the carousel item and a javascript function.
A target value in the URL of the image.
A hidden <a> with the destination URL.
The magic is in this line:
var current_src = carousel_item.querySelector("img").currentSrc;
currentSrc has the URL of the image that the browser is currently showing according to the screen size. So, from that URL I take the target parameter and use it to get the corresponding link and then execute it.
All this is working, but I feel it too hacky for my taste. I'm not very experienced with the <picture> element, so my question is: this could be resolved in a better way?
Related
I am a newbie, I want to show random videos when loading the website, I have found this code, change some things and achieve what I wanted, but now I need each video to have a small description and a link I attach this image I want something similar to this, is there someone here who can help me with this, thanks in advance.
https://piic.me/img-134
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<script>
var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");
var oracleVidArray = [
"http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/6b_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/elementor1_xlarge_preview.mp4"
];
window.onload = function oracleFunction() {
clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
//video.style = "display: block";
video.load();
}
</script>
You can also see the original code here:
Randomly changing video src with JS
I just want to include this in the js code above, (each video has a different url and description)
<figure class="wp-block-video">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a></figcaption>
</figure>
Add class "none" in:
<figure class="wp-block-video none">
Edit css class:
.none { display:none; }
Put your code with "<figure" after code with "<video" as below:
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<figure class="wp-block-video none">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a>
And in function oracleFunction() remove class none.
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 have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>
contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){
I wrote this to find a video element within an owl-carousel slide and then set owl-carousel control's CSS only (this control appears on runtime of webpage) for that specific slide.
The code is not working at all, I'm new to use js.
$(".item").children().find("video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
For the HTML
<div id="post-media" class="owl-carousel item-2">
<div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
<div class="item">
<video controls="" class="embed-responsive-item" style="width:100%; height:100%">
<source src="video/clip1.mp4" type="video/mp4">
</video>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
</div>
If you only desire shifting the position of owl-controls no need for jquery. You can use CSS only:
.owl-carousel .owl-controls
{
margin-top:10px;
}
If you know css3, you can use same queries with jQuery
$(".item video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
I have a list of images and when the image is clicked, I need to do an ajax URL call and validate some parameters.
If the validation is okay, I will have to show the fancybox else I should display another fancybox.
My Issue:
When I click on the image and if the validation is false the other fanybox displays as expected. But if the validation is true, Firebug throws an error saying "too much recursion".
PS:: The expectations is that a video.js player will be shown if the validation is true.
HTML Sample:
<a id="videolink" href="#1" title="Test">
<img class="vidimg" src="1.png" videoId="1" width="180" height="180" />
</a>
<div style="display:none">
<video id="1" poster="1.png" class="video-js vjs-default-skin">
<source src="1362993728.mp4" type='video/mp4'>
<source src="1362993728.webm" type='video/webm'>
<source src="1362993728.ogv" type='video/ogg'>
</video>
</div>
jQuery:
$("a#videolink").click(function(){
$videoId = $(this).children("img.vidimg").attr("videoId");
$isValid = "true" or "false" ; // validation using .ajax() call
if($isValid == 'true'){
$(this).fancybox().click();
}else{
$("#myModal").fancybox().click()
}
});
The "too much recursion" is shown on the line by Firebug:
$videoId = $(this).children("img.vidimg").attr("videoId");
The other fanybox content to be displayed in case of "false":
<div style="display:none">
<div id="myModal"> Invalid Item</div>
</div>
The below changes helped me to have this work as expected.. (there are still some issues in having the fancybox video play).
HTML Sample:
<div style="display:none">
<div id="1">
<video poster="1.png" class="video-js vjs-default-skin">
<source src="1362993728.mp4" type='video/mp4'>
<source src="1362993728.webm" type='video/webm'>
<source src="1362993728.ogv" type='video/ogg'>
</video>
</div>
</div>
jQuery:
$("img.vidimg").click(function(){
$videoId = $(this).attr("videoId");
$isValid = "true" or "false" ; // validation using .ajax() call
if($isValid == 'true'){
$('#' + $videoId ).fancybox().click();
}else{
$("#myModal").fancybox().click()
}
});
Any comments on this related to performance or bad code practice with reference to this code?
I will create a new question here for the video player issue. After this change, the video does not play. :(