I am working with a 3 image gallery. When you click on the images a popup appears with an iframe inside. Currently the 3 different images when clicked all show the same video in the popup. I am wondering how to call the different videos for the different images. Also, is it possible to automatically start the video so you do not have to press play when the popup appears? Thank you guys my code is as follows.
<script>
$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
<div id="videos">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder1.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
<div id="videos1">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder2.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
<div id="videos2">
<div id="header_start">
<a class="login-window" href="#login-box"><img src="/images/video_holder3.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
<div class="login-popup" id="login-box">
<iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
<a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
</div></div>
I've created a FIDDLE
There were some mistakes in your jQuery code, I've made some changes. When you click on an image you can access to the correct .login-popup like this:
var $loginBox = $(this).parent().next('.login-popup');
Try to get "inspired" and make the modifications you need to get exactly what you want.
It is also important you keep in mind that IDs should be unique in your code. Use classes if you want to give the same properties and style to multiples elements.
Related
I'm trying to get this ad to work, and I have it set up so that it will turn into a gif onMouseOver, and thats working fine, but I want it to go back to the static image onMouseOut. Here is my code
HMTL
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="">
</a>
</div>
CSS
.RightAdvert {
float: left;
width: 8%;
}
The Advertisment class doesn't have any styles
Script
<script>
function playAnimation() {
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
</script>
Add a method on onmouseout event, onmouseout="showStatic()
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="showStatic()">
</a>
</div>
Then change the gif with static image in function showStatic() function:
<script>
function playAnimation()
{
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
function showStatic()
{
document.getElementById('animation').src = "squeezy-cheesy.png";
}
</script>
I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change
function setImage(source) {
// console.log(source);
$('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
$('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
console.log($('#zoom_img').attr("href"));
$('.easyzoom').easyZoom();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a id="zoom_img" href="">
<img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
</a>
</div>
You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:
//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api = easyzoom.data ('easyZoom');
//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {
//std_src = the source to your standard-image (small verison)
//zoom_src = the source to your zoom-image (big version)
api.swap (std_src, zoom_src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>
<br><br>
<div class="easyzoom easyzoom--overlay">
<a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
<img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
</a>
</div>
When loading the page automatically iframe also loading, it must not have to do like that
When i click button, then only iframe need to load but in iframe there is url
Can you give me example in jsfiddle, please
<input type="button">Load</input>
<div class="copy">
<iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
You can hide your iframe onload and then display when clicked.
<button id="btnLoad" type="button">Load</button>
<div class="copy">
<iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
<script>
const btnLoad= document.getElementById('btnLoad');
btnLoad.addEventListener("click", function(){
document.getElementById("font").style.display = "block";
});
</script>
Use an <a>nchor and an <iframe>. No JavaScript required.
Set a [name] attribute for <iframe>
ex. <iframe name="iframe0" src="about:blank" ...></iframe>
Set the <a>nchor [href] attribute to the url of intended destination.
ex. <a href="https://www.example.com" ...>...</a>
Set the <a>nchor [target] attribute to the <iframe> [name] attribute.
ex. <a href="https://www.example.com" target="iframe0"...>...</a>
Demo
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Consolas;
}
.btn {
text-align: center;
}
a {
text-decoration: none;
}
<button class='btn'>
VIDEO
</button>
<figure class='box'>
<iframe name='frame0' src="about:blank" frameborder="0" width="480" height="270"></iframe>
</figure>
Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.
Just Check the fiddle
What I have now satisfies me in terms of an overall effect: Click on "show me", it displays an YT Video, when clicked once again - vid will hide etc. BUT even when site is loaded in the first place (and YT video is hidden) - all of its (Mb) size is counted as it was displayed causing the website to load slowly. My question is how to load the embeded video (with its size) only after I clicked on "Show me" element.
This is what I have:
HTML:
<div class="#">
<span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
<span class="#" id="shown">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
</span>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(){
$("#shown").toggle();
});
});
CSS:
#shown {
display: none;
}
Try something like this:
HTML:
<div class="#">
<i class="icon fa-angle-down"></i>Show Me
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened");
$(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened");
$(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/
I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>