Probably a simple solution. I would like to expand an embedded video underneath the "Watch the video" when it is clicked. Pretty straight forward, however I can't get this code to add the "expanded" class on click to the video__player div for the life of me. Any help here is greatly appreciated, thanks.
Code:
$(".video").click(function() {
$(".video__player").addClass("expanded");
});
.video__player {
display: none;
width: 80vw;
max-width: 560px;
max-height: 315px;
height: 0;
transition: 0.5s;
margin: auto;
}
iframe {
width: 100%;
height: 100%;
}
.expanded {
height: 45vw !important;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player">
<br><br>
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
One, as the comment says, you might not have wrapped it in a $(document).ready(function() {}); handler. Two, your allowFullScreen hasn't set a value. Unset, it's default is false. If you want to allow it fullscreen, set it to true.
Posting your full code through a JSFiddle or a repl.it would help as well, as it could be something else.
In the stackoverflow interpreter, your code seems to be working fine. Perhaps it's something with whatever interpreter you're using?
Related
I'm new to all JS and i use Popup Magnific, i did a pop-up video, the problem is that it keeps running in the background after closing, i tried to do something to make it stop, but I got into trouble with it and i don't understand how to fix it.
i would love if anyone could help.
Attaching my code:
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'custom-popup-class'
});
$("#popup").on('hidden.bs.modal', function (e) {
$("#mpopup iframe").attr("video", $("#popup iframe").attr("video"));
$.close function();
});
.custom-popup-class .mfp-container {
padding-top: 40px;
padding-bottom: 40px;
}
.custom-popup-class .mfp-content {
width: 100%;
max-width: 750px;
}
#popup1 {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
#popup1 .mfp-close {
top: -47px;
color: #FFF;
text-align: right;
right: 1px;
font-size: 40px;
}
<div class="col-md-3">
<div class="video-wrapper">
<div class="play">
<a href="#popup1" class="open-popup-link"><img src="img/3D/thumbnails/thumb1.jpg" class="img-fluid">
<img src="img/play.png" class="play-btn"></a>
<div id="popup1" class="mfp-hide">
<div class="box-video">
<video source src="img/3D/videos/birthday1.mp4" type="video/mp4" width="100%" controls preload></video>
</div>
</div>
</div>
</div>
</div>
You could have it so that when you click the button to close the window it would pause the video by adding a .pause(); , it would mean that you would need to .play(); to a play button if you wanted it to be re-playable in the future. If you give the close button an ID as well as the video an ID it could work.
In vanilla JS rather than in jQuery you could use
document.getElementById("closeButtonID").addEventListener("click", function(event){
document.getElementById("videoID ").pause();
})
Then you would just need to add a similar 2 lines to to the above but instead add .play();
Hope this helps/works!
I am trying to code a simple lightbox effect that I can use for multiple images on the same page. (Click a link, image shows up on with the website opaque in the background.) I found a nice little Javascript, but it only works for a single image on the page. I know my HTML and CSS, but I'm struggling to find a clean, simple solution for what should be a simple function. (Unfortunately, I'm not a Javascript coder, but I usually can modify scripts I find to work for what I need...this is just beyond my scope!)
Here's my Javascript:
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.querySelector('.light').style.display='block';
document.querySelector('.fade').style.display='block';
}
function lightbox_close(){
document.querySelector('.light').style.display='none';
document.querySelector('.fade').style.display='none';
}
After doing some research, and I changed the original getElementById to querySelector since I need to apply this to multiple images. But I'm thinking I need to switch back to ID, and possibly use numbered IDs to differentiate my images. But I'm not sure how to use one function for multiple instances.
My CSS is:
.fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.light {
display: none;
position: absolute;
top: 20%;
left: 50%;
width: auto;
height: auto;
margin-left: -150px;
margin-top: -100px;
border: 2px solid #FFF;
background: #FFF;
z-index:1002;
overflow:visible;
}
I haven't perfected the CSS, but I'm not worried about it at this point. I just need to get the Javascript working first.
And my HTML is something like this:
Photo 1
<div class="light">
<img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close();"></div>
<br />
Photo 2
<div class="light">
<img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close();"></div>
Like I said, this isn't my Javascript; I'm just in over my head trying to modify it for my needs. There's got to be a simple way to achieve this, but I don't know enough Javascript coding to do it myself. I probably need an array or something?? Can someone please help a girl out?? =)
Thanks!
If you don't have other purposes to deal with numbered IDs with images , you don't need to switch them back , A little revise , I hope this could help you
, demo : http://codepen.io/Carr1005/pen/PzBgom
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(index){
window.scrollTo(0,0);
document.querySelectorAll('.light')[index].style.display='block';
document.querySelectorAll('.fade')[index].style.display='block';
}
function lightbox_close(index){
document.querySelectorAll('.light')[index].style.display='none';
document.querySelectorAll('.fade')[index].style.display='none';
}
and html part
Photo 1
<div class="light">
<img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close(0);"></div>
<br />
Photo 2
<div class="light">
<img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close(1);"></div>
============================================================
There is a saying that using onClick() is a bad practice , here is why
I think in some situations is not that bad to use onclick() , but if you wanna
go in this direction , here is another example , and maybe it's a chance to look into more javascript
http://codepen.io/Carr1005/pen/wWxVYE?editors=1111
<div id="social-links">
<div><img src="pictures/facenh.png"/></div>
<div> <img src="pictures/twitternh.png" /></div>
<div> <img src="pictures/ytnh.png" /></div>
<div> <img src="pictures/mailnh.png" /> </div>
</div>
This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?
No JavaScript required, you can just use CSS.
It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.
<div id="social-links">
<div><span>Facebook</span></div>
...
</div>
Then, in your CSS, simply hide the text, and replace with image for both standard and hover.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
#social-links a span {
display: none;
}
#facebookLink {
display: block;
background: url('path-to-facebook-image.jpg');
width: 50px;
height: 50px;
}
#facebookLink:hover {
background: url('path-to-facebook-hover-image.jpg');
}
Here is a jQuery solution. Fiddle Here.
$("#facebook").hover( function () {
$(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
$(this).find("img").attr('src', 'http://placehold.it/150x150');
});
I really think this Link from #talemyn is what you are looking for also. Either way should get the job done.
I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.
Set the left to 0.
#banner img{
left: 0;
}
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}