I am using ght ebelow script to get the image name in title and alt attribute.
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
my question is there ant posibility of generating the caption using image title.
$("img").each(function () {
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
$img.attr('alt', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
});
Related
I am trying to show an image in the popover,
after i created an element i add attributes to show an popover.
var item = document.createElement('div');
var att2 = document.createAttribute("data-toggle");
var att3 = document.createAttribute("title");
var att4 = document.createAttribute("data-content");
var att5 = document.createAttribute("data-placement");
att4.value = "<img src ='blablabla.png' />;"
att3.value = itemname;
att2.value = "popover";
att5.value = "top"
item.setAttributeNode(att5);
item.setAttributeNode(att2);
item.setAttributeNode(att3);
item.setAttributeNode(att4);
any idea ? the output in the popover content is <img src ='blablabla.png' />;
SOLUTION
just add html:true into
$('[data-toggle="popover"]').popover({html:true,trigger:"hover",container: 'body'});
function addImg(theDiv,theImg) {
var element = document.createElement("img");
element.src = theImg;
document.getElementById(theDiv).appendChild(element);
}
<div id="myDiv" onclick="addImg('myDiv','https://media1.popsugar-assets.com/files/thumbor/7NnYpYvDfxr_HYUpa4tySashCM8/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2017/03/17/915/n/1922398/40d6ad1840bc51bf_GettyImages-89938282/i/1997.jpg')">
Click me to append image
</div>
Is this kinda what you're after? Hard to tell from your explanation.
I have an image in my HTML page, and I would like it to change to a different image every 15 seconds.
<img src="img/img 1.jpg" alt="image">
In my local folder img, I have two images which are img 1.jpg and img 2.jpg. How do I change the img 1.jpg to img 2.jpg after 15 seconds?
Try it:
$(document).ready(function(){
var img = 0;
var slides = new Array();
while (img < 5) {
img++;
// put your image src in sequence
var src = 'assets/images/earth/Sequence' + img + '.jpg';
slides.push(src);
}
var index = 0,timer = 0;
showNextSlide();
timer = setInterval(showNextSlide, 15000);
function showNextSlide() {
if (index >= slides.length) {
index = 0;
}
document.getElementById('earth').src = slides[index++];
}
});
Try this (pure JS)
var myArray = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6']
var count = 0;
setInterval(function() {
//use this below line if you want random images
//var rand = myArray[Math.floor(Math.random() * myArray.length)];
if (count >= myArray.length) count = 0; // if it is last image then show the first image.
// use this below line if you want images in order.
var rand = myArray[count];
document.getElementById('img').src = rand;
document.getElementById('img').alt = rand; // use 'alt' to display the image name if image is not found
count++;
}, 1000); // 1000 = 1 second
<img src="img/img 1.jpg" alt="image" id='img' />
To do this, you're going to need some Javascript to change the image. Here is a link to a popular website for help with Javascript, HTML, CSS, and a whole lot more. What you'll want to be looking at specifically though, is the setInterval() function on this page: http://www.w3schools.com/js/js_timing.asp
If you don't know Javascript at all, it is also not a bad place to start learning! If that's all you need it for though, you'll need very little Javascript at all.
Firstly include jQuery library in your page.
Then use this script:
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
if (_img_id == 3) {
_img_id = 1;
};
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
The users on my review type of platform highlight titles (of movies, books etc) in <em class="title"> tags. So for example, it could be:
<em class="title">Pacific Rim</em>
Using jQuery, I want to grab the content within this em class and add it inside a hyperlink. To clarify, with jQuery, I want to get this result:
<em class="title">Pacific Rim</em>
How can I do this?
Try this:
var ems = document.querySelectorAll("em.title");
for (var i = 0; i < ems.length; ++i) {
if (ems[i].querySelector("a") === null) {
var em = ems[i],
text = jQuery(em).text();
var before = text[0] == " ";
var after = text[text.length-1] == " ";
text = text.trim();
while (em.nextSibling && em.nextSibling.className && em.nextSibling.className.indexOf("title") != -1) {
var tmp = em;
em = em.nextSibling;
tmp.parentNode.removeChild(tmp);
text += jQuery(em).text().trim();
++i;
}
var link = text.replace(/[^a-z \-\d']+/gi, "").replace(/\s+/g, "+");
var innerHTML = "<a target=\"_blank\" href=\"http://domain.com/?=" + link + "\">" + text + "</a>";
innerHTML = before ? " " + innerHTML: innerHTML;
innerHTML = after ? innerHTML + " " : innerHTML;
ems[i].innerHTML = innerHTML;
}
}
Here's a fiddle
Update: http://jsfiddle.net/1t5efadk/14/
Final: http://jsfiddle.net/186hwg04/8/
$("em.title").each(function() {
var content = $(this).text();
var parameter_string = content.replace(/ /g, "+").trim();
parameter_string = encodeURIComponent(parameter_string);
var new_content = '' + content + '';
$(this).html(new_content);
});
If you want to remove any kind of punctuation, refer to this other question.
$('em.title').html(function(i,html) {
return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>
UPDATE 1
The following updated version will perform the following:
Grab the contents of the em element
Combine with the contents of the next element, if em and remove that element
Create a query string parameter from this with the following properties
Remove the characters ,.&
Remove html
Append the query parameter to a predetermined URL and wrap the unmodified contents in an e element with the new URL.
DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'');
return $('<a/>',{href:'http://domain.com/?par='+encodeURIComponent(text),html:$(this).html()});
});
Or DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
UPDATE 2
Per the comments, the above versions have two issues:
Merge two elements that may be separated by a text node.
Process an em element that's wrapped in an a element.
The following version resolves those two issues:
DEMO
$('em.title:not(:has(a))').filter(function() {
return !$(this).parent().is('a');
}).html(function() {
var nextNode = this.nextSibling;
nextNode && nextNode.nodeType != 3 &&
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
Actually,if you just want to add a click event on em.title,I suggest you use like this:
$("em.title").click(function(){
q = $(this).text()
window.location.href = "http://www.domain.com/?="+q.replace(/ /g,"+")
}
you will use less html code on browser and this seems simply.
In addition you may need to add some css on em.title,like:
em.title{
cursor:pointer;
}
Something like this?
$(document).ready(function(){
var link = $('em').text(); //or $('em.title') if you want
var link2 = link.replace(/\s/g,"+");
$('em').html('' + link + '');
});
Ofcourse you can replace the document ready with any type of handler
$('.title').each(function() {
var $this = $(this),
text = $this.text(),
textEnc = encodeURIComponent(text);
$this.empty().html('' + text + '');
});
DEMO
I am uploading an image and i expect base64 data of that image.I am trying below code that works to get image data as base64.
1) function getImage(file,count) //file is files[i] of input:file passed from for()
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var data = event.target.result;
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);//not working value is undefined
console.log('height:'+this.height);//not working value is undefined
//image.title = 'click to edit';
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
}
reader.readAsDataURL(file);
}
}
This works fine and it creates an img tag with image loaded correctly.
But I want to know the image width and height before creating img element, so i tried below code,
2) function getImage(file,count)
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var img = new Image();
var data = event.target.result;
img.onload = function(){
console.log(img.width);
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);
console.log('height:'+this.height);
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
};
}
reader.readAsDataURL(file);
}
}
But the second code does not prints log and img tag is not created. so what is the problem?What wrong in my code?Any better way to achieve this?.
just single line makes my problem null,
Thanks to this.
function getImage(file,count)
{
if(file)
{
var reader = new FileReader();
reader.onload = function(event)
{
var img = new Image();
var data = event.target.result;
img.src = data; //this line solved my problem..
img.onload = function(){
var image = document.createElement("img");
image.id = 'img'+count;
image.class = 'edit';
image.src = data;
console.log('width:'+this.width);
console.log('height:'+this.height);
image.data = count;
data = image.dataset;
data.ref=count;
document.getElementById('image'+count).appendChild(image);
jQuery(document.getElementById('image'+count)).removeClass('disable');
jQuery(document.getElementById('img'+count)).addClass('action editable img ');
};
}
reader.readAsDataURL(file);
}
}
Waiting for any better answer..
In my application, a large number of divs is dynamically rendered in an HTML page through the use of JavaScript. In fact, there are more than 100 dynamically created divs. Loading the content from server side, it is taking more time to load dynamic divs than static divs. How can I reduce the time it takes to load dynamic divs? This is the sample code I am using:
var ul_slide = document.createElement('ul');
var slide_div = document.createElement('div');
slide_div.setAttribute("class", "slide");
for (var i = 0; i < data.arrayItems.length; i++) {
alert(data.arrayItems.length);
var postId = data.arrayItems[i].postId;
var tag = data.arrayItems[i].tag;
var li_slide1 = document.createElement('li');
var img_link1 = document.createElement('a');
var linka = "#" + postId;
img_link1.setAttribute("href", linka);
img_link1.setAttribute("class", "click");
var img_slide1 = new Image();
img_slide1.style.width = "159px";
img_slide1.style.height = "100px";
img_slide1.setAttribute("src",data.arrayItems[i].url);
img_link1.appendChild(img_slide1);
li_slide1.appendChild(img_link1);
ul_slide.appendChild(li_slide1);
slide_div.appendChild(ul_slide);
div.innerHTML = "";
div.appendChild(slide_div);
}