I have a RSS description as follows:
'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.'
i have to extract img src from this in jquery.
Consider this approach:
Create a div element with an ID.
In your javascript code, set InnerHTML value to your div with the value of description.
Use querySelectorAll and get the source of the image.
Example:
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
// Set InnerHTML values:
document.getElementById('myDiv').innerHTML = description;
// Get src:
var mySrcValue = document.querySelectorAll('#myDiv > a > img')[0].src;
// Show src value:
document.getElementById('myResult').innerHTML = "<b>" + mySrcValue + "</b>";
<span>This is your div:</span>
<br />
<div id="myDiv"></div>
<br/>
<br/>
<span>IMG SRC Result is:</span>
<div id="myResult"></div>
You don't need jquery to do this, javascript is enough.
You can extract the src attribute with a one line code (split and regex) :
var result = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
result.innerHTML = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
<div id="result"></div>
Related
I have several different galleries of images that have image captions. I'm attempting to append a download link of the corresponding image to the end of each of the gallery captions. The download link needs to be based on the img src for each image.
I can get it to append the download link to the caption. However, it's also appending a download icon for each image contained in the gallery on every image caption. Instead of one download link per image.
HTML
<div>
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" data-rel="lightbox-gallery-1">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-823">
</a>
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-823">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2515">
CRKIS-2515
</a>
</figcaption>
<!-- EoCaption -->
</figure>
<br />
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-817">
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-817">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2379B">
CRKIS-2379B
</a>
</figcaption>
<!-- EoCaption -->
</figure>
</div>
jQuery
$(document).ready(function() {
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').append('</span>');
});
});
I have been trying to figure this out for a couple days now and I'm so close I'm just not sure how to get it to append only one download icon for the corresponding image. Thank you in advance for any help that can be provided.
My CODEPEN DEMO
Your html is a bit hairy to parse. Here is some jQuery that reproduces your output with the desired icon count:
images = ['http://srsounds.com/j3/images/easyblog_articles/2943/han_solo.jpg', 'https://lumiere-a.akamaihd.net/v1/images/chewie-db_2c0efea2.jpeg?region=0%2C154%2C1592%2C796'];
labels = ['CRKIS-2515', 'CRKIS-2379B']
images.forEach(function(value, index) {
$('body').append("<img src=" + value + " width=350><br>" + labels[index] + " <i class='fa fa-download' aria-hidden='true'></i><br><br>");
$('body').css('color', 'steelblue');
})
If you want to use these icons bring in awesome fonts:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
There may be other requirements in terms of your gallery layout, but hopefully this will help you get started on a cleaner approach.
If you're having issues adding link attributes to your icons, or achieving additional layouts let me know.
******** EDIT ********
If you want/need to stick with your original approach, then change your jQuery to this:
$(document).ready(function() {
download_ids_hold = [];
imgSrc_hold = [];
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
imgSrc_hold.push(imgSrc)
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').each(function(ind_2, elem_2) {
add_id = 'a_' + Math.floor((Math.random() * 100000) + 1);
download_ids_hold.push(add_id)
if(index == 0) {
$(this).append('<a id=' + add_id + ' download><i class="fa fa-download" aria-hidden="true"></i></span></a>');
}
})
});
for(id=0;id<download_ids_hold.length;id++) { $('#' + download_ids_hold[id]).attr('href', imgSrc_hold[id]) }
});
We track the image sources and download ids, and use them appropriately at the end.
I need to parse html string and replace sources of images with it's base64 data.
for example:
input html:
<p>This is some text</p>
<p><img src="sys_attachment.do?sys_id=e57ff4badb984300e330b04ffe9619ce" alt="" width="auto" height="auto" /> </p>
I need to extract sys_id value from src="sys_attachment.do?sys_id=e57ff4badb984300e330b04ffe9619ce" and replace the entire src with it's base64 alternative, to get something like this:
<p>This is some text</p>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAIKCAY....." alt="" width="auto" height="auto" /> </p>
I tried this, but it's not working as expected
var htmlString = '<img src="sys_attachment.do?sys_id=e57ff4badb984300e330b04ffe9619ce"/>';
var res = htmlString.match(/^<img src="sys_attachment.do?sys_id=.*"$/g);
Any ideas how this can be solved?
Get src using htmlString.match(/=.*/)[0].replace("=",'');.
Change it to Base64 using btoa.
var htmlString = '<img src="sys_attachment.do?sys_id=e57ff4badb984300e330b04ffe9619ce"/>';
var sys_id = htmlString.match(/=.*/)[0].replace("=",'');
sys_id = btoa(sys_id);
htmlString = htmlString.replace(/src=\"[^"]*"/,'src="data:image/png;base64,'+sys_id+'"');
console.log(htmlString);
I have a page of about 15-20 YouTube videos I’d like to dynamically update the img src to point to the YouTube hosted thumbnails. From a logic perspective, I want to find every DIV with a class of “videos”, get the ID of that class and update the image source with the dynamically inserted value, e.g., http://img.youtube.com/vi/DbyNtAQyGs/0.jpg in the first example. All IDs are unique because they are the YouTube video IDs and there is only one img tag under each “videos” class.
This code would run on page load so it would have to be pretty fast to ensure the values are set before the browser passes the each img tag in the DOM. Hoping I can get one of those one liners instead of vars and multiple lines.
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
<div id="Fh198gysGH" class="videos">
<img src="" width="212" height="124" />
</div>
Current Code
$('.videos img').attr('src', 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id')); + '/0.jpg');
You can use:
$('.videos img').attr('src', function() { return 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id') + '/0.jpg'; })
Loop through the .videos elements:
$('.videos').each(function(){
var $this = $(this),
_id = $this.attr('id'); // Capture the ID
// Construct the img src
$this.find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
});
Bonus: chain in the click event for your anchor:
$this.find('a').click(function(e){
e.preventDefault();
loadPlayer(_id);
}).find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
So you can simplify your markup:
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.
You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO
I have this divs in my html
<img src="images/cocina1.jpg" name = "main_img" alt="alternate_text" height="250" width="150" />
<div class="imgbox" id="thumbnail_1"> <img src="images/cocina1.jpg" alt="alternate_text" height="250" width="150" /> <br />
<p>Medico1</p>
</div>
and the following JS
function changeTo1(){
var newP = "some Paragraph"
document.getElementById('id_descripcion_txt').innerHTML = newP;
document.main_pic.src = "images/medico1.jpg"
document.getElementById('thumbnail_1').innerHTML = " <img src=\"images/cocina0.jpg\" alt=\"alternate_text\" height=%22250%22 width=\"150\" /> <br /> <p>Medico0</p> "
}
Now, after clicking on the image that calls changeTo1(), the first part of the JS works: the 'id_descripcion_txt' does changes its innerHTML to "some Paragraph", but the other 2 statements, of changing main_pic src and the "thumbnail_1" innerHTML to something else don't work.
Any ideas?
Thanks
changing main_pic src and the "thumbnail_1" innerHTML to something
else don't work.
On making the changes,
document.main_img.src = "images/medico1.jpg";
and
height=\"350\" instead of height=%22250%22
it worked for me.
It's probably failing on the image change. I think you want this HTML (note marked change):
<img src="images/cocina1.jpg" id="main_img" alt="alternate_text" height="250" width="150" />
^^^^^^^^^^^^^
And this JS:
document.getElementById("main_img").src = ...
Also, you had different terms for the image ('main_pic' in one, and 'main_img' in the other).
Are you getting a javascript error? Unless there's a typo in your posted code,
document.main_pic
does not exist. Try
document.main_img.src = "images/medico1.jpg";
If you want to change the one of your image through java script, then use this code, here in this example i have a banner and a text, when i click on the button then banner and text both changed.
<html>
<head>
<script type="text/javascript">
function changeImgandText()
{
if(document.getElementById('banner'))
banner.innerHTML = '<img src="img1.jpg"width="100%" height=220>';
demo.innerHTML="Pir you are great !";
}
</script>
<p id='banner'><img src="img2.jpg" width="100%" height=220> </p>
<b id='demo'>dude</b> </br>
<input type='button' onclick='changeImgandText()' value='Change Text'/>
</head>
</html>