I have a site with several embedded YouTube videos using iframes. I hide all of them to start, they're being covered up by a thumbnail image. They need to show when the thumbnail image is clicked.
I had a working solution, but it required me adding classes or ids to each iframe/thumbnail. I will not be able to add any classes or ids to the iframe or the thumbnail image.
Here is what I had:
$( document ).ready(function() {
<!-- Hide iFrames -->
$(".contentIframe1").hide();
$(".contentIframe2").hide();
<!-- iFrame1 Click Function -->
$(".play-thumbnail1").click(function(){
$(".contentIframe1").show();
});
<!-- iFrame2 Click Function -->
$(".play-thumbnail2").click(function(){
$(".contentIframe2").show();
});
});
HTML:
<iframe class="contentIframe1" width="1280" height="720" src="https://www.youtube.com/embedurl" frameborder="0" allowfullscreen></iframe>
<div class="play-button"></div>
<img class="play-thumbnail1" src="imgurl" alt="" />
Would it be possible to get the same effect without adding different classes to each thumbnail and iframe?
Here's the new html for every single iframe on the page:
<iframe width="1280" height="720" src="https://www.youtube.com/embedurl></iframe>
<div class="play-button"></div>
<img class="play-thumbnail" src="imgurl" alt="" />
Here's the new jQuery:
$( document ).ready(function() {
<!-- Hide iFrames -->
$("iframe").hide();
<!-- iFrame Click Function -->
$(".play-thumbnail").click(function(){
$("iframe").show();
});
});
This of course just hides and shows them all at the same time. I figured I'd have to use .each() to loop through each of the thumbnails and somehow make it only show the corresponding iFrame.
Is this even possible?
You can use children() to get the corresponding iframe
$(".play-thumbnail").click(function(){
//if you need to hide currenly visible iframes use $('iframe').hide()
$(this).closest('div').children("iframe").show();
});
Add class to them -
<iframe class='myclass' ...
And Try this -
$('.myclass').each(function() {
$(this).hide();
})
If you need to add some checks then -
$('.myclass').each(function() {
if (check) {
$(this).hide();
}
})
Related
I'm creating a popup which has an iframe to display content from some other website:
<div id="popup-wrapper">
<div id="iframe-wrapper">
<iframe id="register-frame" src="some url" />
</div>
</div>
I want this to be hidden by default and show up when user clicks a button, here's my jquery:
$(document).ready(function() {
$("#popup-wrapper").hide();
$("#iframe-wrapper").hide();
$("#register-frame").hide();
});
Both the outer divs disappear but the iframe does not, what am I doing wrong?
i have no error when i close the tag iframe, your syntax is not good
<iframe id="register-frame" src="some url"></iframe>
In my page having two iframe iframe-menu and iframe-content.
I want to hide iframe-content elements ('.options') on anywhere click event in entire page i.e outside of .options div.
Main Page :
<body>
<iframe src="menu.html" id="iframe-menu" height="100%"></iframe>
<iframe src="content.html" id="iframe-content" height="100%"></iframe>
</body>
content.html in iframe-content
<div class="container">
<div class="options">Hello</div>
</div>
I have use a jquery code. But it's working only when click on current iframe.
$(document.body).click(function(event) {
var target = $(event.target);
if (!target.parents().andSelf().is('.options')) {
$('.options').hide();
}
});
I want to hide div.options on anywhere click on the main page.
Best way is to use .hide()
$('body').click(function(event) {
if (!$(event.target).hasClass('.options')) {
$(".test").contents().find(".options").hide();
}
});
Try setting a class name for the iframe & hide the element using .content().find()
Check JSFiddle
JSFiddle
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?
Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.
I have a few a tags with the name video_button_a
<a id="first_video" class="video_button_a" href="#"></a>
<a id="second_video" class="video_button_a" href="#"></a>
When I click on any of these links i need to embed this in between
<embed
src="http://reelworks.net/player.swf"
width="480"
height="200"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="swfMovie=http://www.reelworks.net/video/runningsahara400x200.flv&swfThumb=http://www.reelworks.net/video/green.jpg&play_btn_scale=.65&playover_color=d7d3c0&playbk_alpha=.65&playbk_color=d7d3c0&play_color=1a1a1a',"
/>
I was thinking append but i didnt know the syntax
$('.video_button_a').click(function(){
// code goes here
});
Is append the way to go and if so how do I start the video, is there a way to put that code on the page and start the video
try this:
$('.video_button_a').click(function(){
$('#player').html('<embed src="http://reelworks.n.... />');
//return false (if you want to)
});
I don't know if you want to embed the code inside the "a" tag which I don't think it is a good idea since it is a flash video - that is why i have a "player" id for a separate div. You could also create something like this:
html
<div id="first_video" class="video_button_div"></div>
<div id="second_video" class="video_button_div"></div>
js
$('.video_button_div').one('click', function() {
$(this).html('<embed src="http://reelworks.n.... />');
//return false (if you want to)
});
css
.video_button_div {
cursor:pointer;
//etc
}
I hope this helps!