I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after
That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});
You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.
Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.
Related
How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?
If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";
Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'
If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]
Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');
First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";
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>
This may sound a dumb question. I have a set of images inside a page. And these images doesnt have an ID but a class. I want to get these elements by their class names and replace each of them with different content. How should I do that.
The following using vanilla JavaScript (no jQuery) and does:
Select images in your page which have a class assigned (in this example imageClass). The document.querySelectorAll() allows you to select DOM elements using CSS3 selectors.
Change "content" for each image (src link), so yo ucan show up different images.
Click the button in the example to change "content" for images.
(function() {
var changeContent = function() {
document.querySelectorAll('.imageClass').forEach(function(image) {
image.src = 'https://placeimg.com/340/280/people'
});
};
document.getElementById('btn').addEventListener('click', changeContent);
})();
<button id="btn" type="button">Change Images</button>
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">
Sorry if it's a noob question !
I'm using a script to translate my page with this code:
<script>
var translations= { 'en' :
{'title' : 'Title', 'textimg' : 'English text'},
'fr' :
{'title' : 'Titre', 'textimg' : 'Texte français'}
};
function doTranslate(language) {
for(id in translations[language]) {
document.getElementById(id).innerHTML = translations[language][id];
}
}
</script>
And this html:
<img src="img/Fr-Flag.png">
<img src="img/UK-Flag.png">
<h2 id="title">Title</h2>
The problem comes when I use an image (little icon): the text changes, but src seems to disapear, so when the text change, the image is not displayed:
<img id="textimg" src="img/fav-rond.png">English text</img>
How to solve this ?
Please see this answer about content inside the img tags: Div tag within img tag
But a possible solution is to remove the id from img and create a new element around the text with that id. For example:
<img src="img/fav-rond.png" />
<span id="textimg">English text</span>
And a demo: https://jsfiddle.net/7j2ckw0r/1/
This should solve your issue.
document.getElementById(id).setAttribute("id", translations[language][id])
You shouldn't be using innerHTML to solve this issue.
The <img> tag does not allow any information within, it is a "Empty element"
If you add any text inside, that becomes an invalid HTML text.
What you can do is adding an alt attribute:
<img id="textimg" src="img/fav-rond.png" alt="English text"/>
I strongly recommend you to visit this link, you will find the optimal way to translate your html page in pure JavaScript code.
JQuery search dom elements just after rendering and replace keys by its corresponding values
It isn't possible to add text to an image tag, instead place a span element directly after the image and access that instead.
<img src="img/fav-rond.png" /><span id="textimg">English text</span>
I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.
<div id="img"><img src="download1.jpg"></div>
<div><img src="" class="img2"></div>
<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
</script>
Fiddle
Tried using a fiddle and it works, here is the code which I used.
HTML
<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>
<div><img src="" class="img2"></div>
<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />
Jquery
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.
You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:
$('.source-img').on('click', function(){
var src = $(this).children('img').attr('src');
$('#destination').children('img').attr('src', src);
});
Check out this jsFiddle.
If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.
If you're looking for a better method, see this JSFiddle
It uses the clone function
$('.imgs').click(function(){
$(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});
It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).
If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.