In my function I would like to take an image add a dynamically created caption then wrap it all neatly in a div.
Before:
<img src="whatever" />
After:
<div class="imageBlock">
<img src="whatever" />
<span class="caption">The Caption</span>
</div>
This is what I currently have:
var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).after(imageCaption).wrap('<div class="imageBlock '+array[0]+'" />');
This is working BUT is placing the span outside of the closing div tag.
You have to pay attention to what this actually refers to.
To get what you want just reverse the order,
var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).wrap('<div class="imageBlock '+array[0]+'" />').after(imageCaption);
This is because your object that is being passed is the original image tag. Originally you call after on your tag so it does that correctly, but what gets returned from that call is still just the original image element, not both. So when you call wrap, you are only calling it on the original image tag. By wrapping first, the image tag becomes the child of the wrapped element, then after will insert it in the correct location.
This might be clearer,
var myImage = $(this);
myImage.after(imageCaption);
myImage.wrap('<div class="imageBlock '+array[0]+'" />');
See the problem?
try
$(document).ready(function() {
$('#x').wrap('<div class="imageBlock">');
$('<span class="caption">The Caption</span>').insertAfter($('#x'));
});
'x' is the ID attribute value of <img src="whatever"> element
Here is a fiddle to start you off:
http://jsfiddle.net/c3nxe/
Related
I have a problem creating a new image element to this code here:
Sound Packs
Unfortunately, I do not have access to the HTML code because it belongs to a locked template of "jimdo". I can only insert CSS codes and javascript in the "head area". Is there a way to add an image element to this HTML code with javascript?
Yes, there is a way to do this using just javascript. Firstly you need to set the window.onload callback to a function. Within this function, you can then get the element you want to add the image to. Here I added the image to the element with the attribute data-link-title which is equal to "Sound Packs".
Lastly, you can use .innerHTML on this element to add the HTML you want to add within this element. Here I added a <br /> followed by an <img> tag:
document.body.onload = function() {
let soundPacks = document.querySelector('[data-link-title="Sound Packs"]');
soundPacks.innerHTML += "<br /><img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' alt='StackOverflow Logo'/>";
}
Sound Packs
I have three clickable images. One image on the first row, two images on the second row. The image on the first row is a reflection of whichever image on the second row was last clicked. I can make the image on the second row modify the src of the image on the first row, but am having difficulty modifying the onclick parameter of the anchor tag. I can't just change the href of the first image, it has to actually mimic the clicking of the second row image. Here's my code, along with by a jsfiddle of it:
https://jsfiddle.net/2hgzmnmb/
<a onclick="document.getElementById('image1').click();" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>
<br><br>
<a id="image1" onclick="document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>
<a id="image2" onclick="document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>
I want to add the following: document.getElementById('previewLink').onclick='document.getElementById('image1').click();' to the onclick parameter for the first image on the bottom row, and: document.getElementById('previewLink').onclick='document.getElementById('image2').click();'
to the second image on the bottom row, so the image on the first row will not only look like whichever image was last clicked on the second row, but will also mimic the actual click. Right now, obviously from the code, it will only mimic clicking the first image on the second row, no matter what image was last clicked, and I'm thinking it's because my syntax isnt correct when I try to modify the onclick property of the anchor tag for the image on the first row.
I also tried doing this with variables but got a bit tied in knots.
Any ideas on how I could go about doing this? I'm close, just not there yet.
Thanks!
Fiddle: https://jsfiddle.net/2hgzmnmb/1/
this: document.getElementById('previewLink').onclick='document.getElementById('image1').click();'
should be:
document.getElementById('previewLink').onclick=this.onclick
because onclick attribute is actually running a JS code, so if you pass a string there, it will interpret it as just a string.
onclick='document.getElementById('image1').click();' is the same as the string "document.getElementById('image1').click();", it does nothing.
add the line below to each anchor tag in the second row
document.getElementById('previewLink').related_id=this.id
<a onclick="if(document.getElementById(this.related_id)!=null){document.getElementById(this.related_id).click()};" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>
<br><br>
<a id="image1" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1');document.getElementById('previewLink').related_id=this.id"><img src="http://i.imgur.com/UevhwuA.png"></a>
<a id="image2" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';document.getElementById('previewLink').related_id=this.id;alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>
I'd remove the inline handlers and use addEventListener() instead - except for demo purposes I've left your alert() messages in the inline onclick attributes to simulate the click behaviour that you want clicks on the preview image to mimic.
By putting the logic into JS in a <script> element you'll find it much easier to maintain because you can format the code in a readable manner.
Then simply use a variable to keep track of what the currently selected image is:
// the following JS should be in a script element at the end of the body
// and/or wrapped in a window onload handler
function imageClick(e) {
currentImage = e.currentTarget;
document.getElementById("previewImage").src = currentImage.querySelector("img").src;
}
var images = document.querySelectorAll(".image");
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", imageClick);
}
var currentImage = images[0]; // default to first image
document.getElementById('previewLink').addEventListener("click", function() {
currentImage.click();
});
<a id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>
<br><br>
<a id="image1" class="image" onclick="alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>
<a id="image2" class="image" onclick="alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>
Note also that I added a class to your lower images in order to make it easy to process them in a loop to add their click handler. This is optional, you could select by id instead with .querySelectorAll("#image1,#image2").
I want to create image zoom icons. the rich-text-editor i'm using writes something like
<p>
<a title="" data-original-title="" href="myimage.jpg" class="lightbox gallery cboxElement" rel="lightbox[145]">
<img style="padding-left: 10px; float: right;" src="myimage.jpg" alt="" class="img-responsive-rte" height="140" width="130">
</a>
here' some text ......
</p>
to each image.
unfortunately the css-content-property can't be used with img, so i need to prepend/append a tag in order to position the icon.
I'm using
$("<div class='enlargeicon'></div>").appendTo('.cboxElement');
to add the tag.
So far so good: I need to add also the get the value of the float for each image and insert it to the div for the icon.
Thanks for your help!
use this syntax.
var imageFloat = $('.cboxElement a img').css('float'); // get the float value of the img
$("<div class='enlargeicon' style='float:"+ imageFloat +"'></div>").appendTo('.cboxElement');
You can try this code:
$("<div />", {class: 'enlargeicon'}).appendTo('.cboxElement').css('float', $('.cboxElement').children("img").css('float'));
Edited. Try it again, pls.
Here's a Fiddle. It seems to work.
Make sure that the element that is the parent has the property that you want to be inherited.
Edited: to get the float position of the img element. :) Thank you for your suggestion Jason.
i realized that i have to loop through the document. the alert shows up the correct value of each float. but how can i insert this value inside of the span?
$(document).ready(function(){
$('.img-responsive-rte').each(function(i) {
//alert($(this).css('float'));
$(this).after('<span style="float: ">');
})
});
thanks a lot
i also tried this, which outputs the correct value for each float - but also inside the img-tag (instead of after). how do i have to change it to make it work?
$('.img-responsive-rte').each(function() {
var x = $( this ).css( "float" );
$( ".img-responsive-rte" ).html( "That div is <span style='float:" x + ";'>" + x + "</span>." );
});
thank you for your reply
is it possible at all to get the within a tag by using after, append, html or anything else?
I was trying to get images alt attribute which is inside another tag but the thing is I have similar images all over the place the only way I can access those is by using this keyword.
jQuery(".content p").mouseenter(function () {
var temp = jQuery(this+' img').attr('alt');
jQuery(this).append("<span>shit men</span>");
});
HTML
<div class="content">
<p><img src="sites/all/themes/nexus/images/image-frame.png " alt="Product1"></p>
<p><img src="sites/all/themes/nexus/images/image-frame.png " alt="Product2"></p>
</div>
By using this I can only access <p> tag but I want to access <img> tag through this keyword and the above code is not working. My question is it possible to concatenate tags to this e.g this+' img' ?
Basically you'll need to get the IMG inside selected element, so just find it.
jQuery(".content p").mouseenter(function () {
var temp = jQuery(this).find('img').attr('alt');
jQuery(this).append("<span>shit men</span>");
});
$('img', this).attr('alt'); // source from adeneo
I'm replacing one image with another in javascript, then adding a link to it, but it doesn't seem to be working. Any suggestions?? Please and thank you!!
function showImage2(){
document.getElementById("tbc").src = "images/s2.jpg";
var elem = document.getElementById("Slideshow");
elem.style.display = "none";
document.getElementById('tbc').style.display='block';
document.getElementById('tbc').style.usemap='ss2Map';
var link = document.createElement('a'); // create the link
link.setAttribute('href', 'wastewater.html'); // set link path
link.appendChild("images/s2.jpg"); // append to link
}
link.appendChild("images/s2.jpg"); // append to link
This line won't do anything. You can only append an element, not a text string. You need to append document.getElementById("tbc") instead if I understand your markup correctly.
If that's not what you're trying to append, you can use var el = document.createElement('img') to create an img tag and then set the src attribute using el.setAttribute('src','images/s2.jpg')
After this, the above line would become link.appendChild(el); which would work.
I think all you really need is to have one image with a link and one image without the link. Onload, the image without the link is shown and the other image with the link is hidden. Once click on a button or something, then hide the image without the link and show the image with the link correct?
<img id="image1" src="http://us.123rf.com/400wm/400/400/tonygers/tonygers1108/tonygers110800022/10200687-manipulated-nasa-photographs-of-the-earth-and-moon-isolated-together-on-a-black-background.jpg" />
<a style="display:none;" id="image2" href="http://www.google.com" target="_blank"><img src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2011/08/us-astronaut-bruce-mccandless-space-walk.jpg" /></a>
Click Me
<script>
function showImage2(){
var imageOne = document.getElementById('image1');
var imageTwo = document.getElementById('image2');
imageTwo.style.display = 'block';
imageOne.style.display = 'none';
}
</script>
You can see the working code here. http://jsfiddle.net/QbbJU/1/
appendChild() can only take a DOM node, not a string.
To set the text of an element, you can either set innerHTML or textContent, or append a text node (from document.createTextNode())
You also probably want to put the link somewhere in your page.