I am working on a website that needs to use javascript. I need the Javascript to use an external page. I don't quite understand how to do this. I have 5 files on my computer that needs to be able to replace an image file's name and alt. I cant use an http though.
I have the code for an image:
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
I need use javascript to change the cablecare and alt part to a new image file and description while using onmouseover.
The code I have so far is
Javascript:
function switchPix(file, desc){
var line = '<img src= asian.jpg width=\'480\' height=\'270\' alt= +desc+/>';
document.getElementById("pix").write(line);
}
html:
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<li>Asian Art Museum</li>
I have to use the word file to replace cablecar with asian so the file name is asian.jpg
at the end the code is suppose to change the image on the page to another image when the mouse is put over one of five links.
Sorry if this is a bit confusing I really am having trouble understanding it myself and wasn't given nearly enough information to understand how to do it myself.
Hi try to use this code
<figure id="pix" class="right">
<script src="scripts/gallery.js">
</script>
<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
</figure>
<ul>
<!-- fix onmouseover (all small case) and string parameters -->
<li>Asian Art Museum</li>
and the javascript code like this work
function switchPix(file, desc) {
var $elm = document.getElementById("gallery");
$elm.src = file;
$elm.alt = desc;
}
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');
});
I am having an issue placing a YouTube video in my Product Image Gallery. Currently, I have a large photo as the main product photo and thumbnails change the main product photo. An example is on my website here. When I try to place a video in the code below, I get a broken image link.
I'd like for the YouTube video to play when the thumbnail is selected. If I could get some assistance with this, that would be great. Being new to coding has limited my ability in solving this problem.
Right now, this is a pure HTML solution and the code is below. I am open to javascript though if that is easier.
I appreciate any and all help with this! Thank you
HTML Main Product Photo
<div class="image"><img name="preview" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt=""/></div>
Thumbnails
<div class="thumbnails">
<img onclick="preview.src=img1.src" name="img1" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt="" /><img onclick="preview.src=img2.src" name="img2" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/end.jpg" alt="" /><img onclick="preview.src=img3.src" name="img3" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/lhsl.png" alt="" /><img onclick="preview.src=img4.src" name="img4" src="https://www.youtube.com/watch?v=TTiEz5j48x4" alt="" />
So here you are: Working Fiddle
(function ($, w) {
w.contentToggle = {
addVideo: function (videoId) {
$('.image').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + videoId +'?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
},
addImage: function (imageSrc) {
$('.image').html('<img name="preview" src="' + imageSrc + '" alt=""/>');
}
};
})(jQuery, window)
It is just a small script which changes the html content of .image on click of the thumbnails. Because jQuery is already included to your website I used it. Of course you can do things like this with pure JS (vanilla).
Hope you got the basic concept of switching contents with jQuery.
With this js snippet you have a new object (contentToggle) available at the global scope. This object contains two functions addVideo() and addImage().
Have fun improving this approach.
You are inserting a video link in a <img> tag, so it's the reason why doesn't work.
A solution could be insert it in a iframe as:
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
I hope it's helps.
It has to be because of SSL/TLS certification or Copyright issues. Every video on web have a embed code. You have to copy that and paste in your main 'div'.
like I have a embed code for a video:
<iframe width="854" height="480" src="https://www.youtube.com/embed/3R1ysTlxiVY" frameborder="0" allowfullscreen></iframe>
now cut the this specific part,
src="https://www.youtube.com/embed/3R1ysTlxiVY"
and copy to your desired container. Now, this is will not be contained into specific area as it is given any height-width, so you have to set width-height for that. You can attach the whole iframe in that case. if you don't allow full screen just set
allowfullscreen="0"
I hope this might work for you.
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 building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.
You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>
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);
});
});