Is there a way to fetch the content of a div and place that ocntent in the 'src' parameter of an image? I'm working on a project that uses json to load translation files, and tehrefore I can't load an image directly, but figured I could at least load the image name.
So:
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img src="DIV CONTENTS HERE">
Ideas appreciated! (Am also using jquery so open to that as well)
The button demonstrates that ablility. Use the button's onclick code wherever you need.
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="myImage" />
<button onclick="document.getElementById('myImage').src=document.getElementById('flag-name').innerText">Change</button>
You can simply do it in jQuery by getting the text of the div and then setting the source of image like this:
var source = $("#flag-name").text();
console.log("before - " + $("#image").attr("src"));
$("#image").attr("src",source);
console.log("after - " + $("#image").attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="image" src="DIV CONTENTS HERE">
You need an event to start the jQuery/javascript -- so I added a button. Also, you will find it easier to target specific DIV and IMG tags if you give them IDs or classes.
$('button').click(function(){
var mySrc = $('#flag-name').text();
$('img').attr('src', mySrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">http://placeimg.com/300/200/animals</div>
<img src="DIV CONTENTS HERE">
<button>Go</button>
Related
I have this HTML class where I want to replace the img src with different image. Have been able to find something close but nothing quite working.
HTML:
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
Javascript:
$('div.playoff-img:contains("src/img/imga.png")').replaceWith('src/new/image/imgb.png');
You need an attribute selector and use .attr to set the src attribute.
$('div.playoff-img img[src="src/img/imga.png"]').attr('src', 'src/new/image/imgb.png');
The Js way of solving this problem
document.getElementsByTagName("img")[0].setAttribute("src","http://www.gstatic.com/webp/gallery/4.jpg");
The jQuery way of solving this problem
$(".playoff-img img").attr("src", "http://www.gstatic.com/webp/gallery/4.jpg");
simple and easy !
$(".playoff-img img").attr("src", "put new source address here");
Use [attr*="value"] to select an attribute that contains a particular string. Next you will want to use attr() to set the attribute to something new.
$('div.playoff-img img[src*="src/img/imga.png"]')
.attr('src', 'src/new/image/imgb.png');
<!-- use jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
<script>
$(function(){
$(".playoff-img").attr("src", "put new source address here");
});
</script>
Get image tag from html and string content using JQuery. I want to need image tag form content and replace it with it's alt attribute. For. example:
Given my html string content.
Hello this is long content with multiple images
<img alt=":*" src="kissing_heart.png"> and smiley is <img alt=":D" src="smiley.png">.
So how to done?
Please check this output which i have updated with your code. This is what you wanted to be, Only the thing that i did, i have wrapped all the contents inside a div and iterate over each image to replace with its alt attribute.
$("#mycontent img").each(function () {
var altText = $(this).attr("alt");
$(this).replaceWith(altText);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mycontent">
Hello this is long content with multiple images
<img alt=":*" src="kissing_heart.png"> and smiley is <img alt=":D" src="smiley.png">.
</div>
The jQuery solution, as asked.
$("img").each(function() {
var altText = $(this).attr("alt");
$(this).replaceWith(altText);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello this is long content with multiple images
<img alt=":*" src="kissing_heart.png"> and smiley is <img alt=":D" src="smiley.png">.
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 have some code on my page that looks like this:
<div class="img-center">
<img src="img-path.jpg" alt="alt-text" class="feature-image" />
</div>
I am setting up a Print Stylesheet and due to some javascript manipulation of the content (and possibly a bug in firefox) the img prints off center. The solution I am going to do is have the img inserted dynamically into another div that will show when printed but I do not know how to have jQuery read the img div and then copy it into the other div. The code example for the other div would be something like this:
<div id="feature-container-print">
<img src="jQuery inserted copy of above img-path.jpg" alt="alt-text" />
</div>
How is this done? Please provide an example.
$('#feature-container-print img').attr('src',$('.feature-image').attr('src'));
I believe this would work:
$('.feature-container-print img').attr('src', $('.img-center img').attr('src'));
$('.img-center img').hide();
$('.feature-container-print img').show();
My CMS's lightbox-style photo gallery outputs code like below. I've provided code for two thumbnails.
The parameter values for "m" and "s" will always be "150" and "true." I'd like to change that to m=250 and s=false.
I'm new to JavaScript and jQuery. If you have a suggestion, please help me out with where to put the code on the page. Thank you.
<div class="thumbTight MainContent">
<div class="thumbContents">
<a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
<img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&m=150&s=true" alt="Banana" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
<div class="thumbTight">
<div class="thumbContents">
<a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
<img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&m=150&s=true" alt="Cantaloupe" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
In your document ready handler, use each to iterate over the thumbnails (images inside divs with the thumbContents class) and assign the src attribute to the original src attribute with the required substitutions.
$(function() {
$('.thumbContents img').each( function() {
var $img = $(this);
$img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
});
});
You can run this jQuery after the page has loaded. The images will start loading with the different URL, your code will run and change the image URLs and then the new one will load and display. There is nothing you can do client-side to prevent the initial display unless you actually use CSS such that they images are initially hidden and only made visible AFTER you've set the desired URL.
$(".thumbTight img").each(function() {
this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});
You can see a demo here: http://jsfiddle.net/jfriend00/UdnFE/.