I have a 940x520px JPG on my webpage inside of a DIV and I would like to make it a link so when you click on it a YouTube video of 940x520px replaces the JPG and automatically starts playing.
What would be the best way of using Javascript to make this work?
Thanks
Use an onClick (or click if you are using jQuery) to repalce the image with the code for the embedded youtube player.
<div class="image">
<img class="img" />
</div>
<div class="youtube" style="display:none;">
<!--Youtube code here-->
</div>
<script>
$(document).ready(function () {
$(".img").click(function () {
$(".image").hide();
$(".youtube").show();
});
});
</script>
Related
I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?
I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});
Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)
I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>
I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here
I'm very new to PHP and jquery, and am trying to set up an image gallery with thumbnails that when clicked, display a larger image in the div above them.
So far, I have this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',"http://something.com/image.jpg");
});
});
What I want to do is change the image source to be from an array of images. When someone clicks thumbnail A, for instance, I want it to load the corresponding large image A into the div above the thumbnails. I have two arrays, one for the thumbnails and one for the larger images. Seems like a pretty basic thing to do, but like I said, I am totally new at this!
Thanks!
Your javascript code looks correct. Can I see your html code.
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container">
<img id="large" src="" />
</div>
<div id="thumbnail-container">
<img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
<img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>
</div>
<script>
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
});
});
</script>
</body>
</html>
And I simply use your js code on the sample above.
You need to pass the array to your javascript first, store in a javascript array, and with proper index (javascript only accept number index), and load it with click event.
there is two way(from my knowledge) to do this.
1) At ur index page, after you load your JS file, you echo <script>loading_function("array_in_string")</script>;, and process the string in JS and store into array.
2) using Ajax, call to server and request for the full list.
In the HTML of the thumbnail images, add a data-tag such as
<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />
Then change your JS to this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
var imgPath = $(this).data("full-imgpath");
$("#large").attr('src',imgPath);
});
});
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 question regarding Orbit Slider.
I want to place a youtube video in the slider.
I used div and embed to replace img and was successful. The video can play and stop.
My question is how can I make the slider's timer stop when user presses PLAY on the video in the slider?
If you look at the Orbit slider javascript it works using events. Look for these bits of code in the Orbit JS file
this.$element.bind('orbit.start', function (event, index) {
self.startClock();
});
this.$element.bind('orbit.stop', function (event, index) {
self.stopClock();
});
These bind the events 'orbit.stop' and 'orbit.start' events to the HTML element (which usually has an ID 'featured' when using the Foundation way of setting up Orbit). So if you trigger these events e.g. 'orbit.stop' from the HTML element it will call the function stopClock(). The following should help...
HTML
<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>
Javascript
$('#stop-button').on('click',function(){
$('#featured').trigger('orbit.stop');
});
$('#start-button').on('click',function(){
$('#featured').trigger('orbit.start');
});
/*using the setup
<div id="featured">
<img src="../images/orbit-demo/demo1.jpg" />
<img src="../images/orbit-demo/demo2.jpg" />
<img src="../images/orbit-demo/demo3.jpg" />
</div>
*/