I have 10 or so images coming in from flickr. At the moment they just come in as images with no individual ID or Class names.
So I have:
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
...and so on. What I want to do is have:
<img id="image1" src="images/01.jpg" width="300" height="273" />
<img id="image2" src="images/01.jpg" width="300" height="273" />
<img id="image3" src="images/01.jpg" width="300" height="273" />
<img id="image4" src="images/01.jpg" width="300" height="273" />
But because they are being brought in via jQuery, and not manually, I'm unsure how to add these ID's, in order, to the images. Each needs to be styled differently.
Any ideas?
use the callback function of your ajax...
if you have something like this,
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function (data) {
$.each(data.items, function (i, item) {
$("<img/>").attr({"src":item.media.m, 'id': 'images' + i}).appendTo("#images");
});
});
You can use:
jqueryEl.attr("id", "someId");
or:
jqueryEl.addClass("newClass")
where jQueryEl is a wrapped element. Or, if you have a set of images, you might find attr's function option helpful:
jquerySet.attr("id", function(index)
{
return "image" + (index + 1);
});
This is actually similar to an example in the attr docs.
If you want to post the code that fetches the images, it probably could be better integrated there. However, you could also just add this code after the images have been added. Lets pretend the images are added to a div with the id of flickr:
$("#flickr img").each(function (i, image){
image.id = "image" + (i + 1);
});
Thats it! Now each image will have image1, image2, etc as the id, in order.
Related
Here is my HTML:
<img class="image" src="" />
<img class="image" src="" />
<img class="image" src="" />
<button onclick="changeImages()">Change the images</button>
Here is my JavaScript:
function changeImages() {
document.getElementsByClassName("image").setAttribute("src", "images/image.png");
}
How can I make my code so that when I click the button, all those images change?
Thanks
getElementsByClassName() returns a collection of elements which doesn't have methods for applying attributes. You need to iterate through the collection and apply the attributes you want to each of its items. Something like:
document.getElementsByClassName("image").forEach(function(image) {
image.setAttribute("src", "images/image.png");
});
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
I have 5 small images and 1 image that is twice the size as the small ones. What I'm trying to do is whenever you hover on the small images the big image changes to the image you are hovering. I am having a hard time searching for methods and functions but luck as of yet. this is what I have
<div class="bigImg">
<img id="image0" src="images/image1.png">
</div>
<img id="image1" src="images/image1.png">
<img id="image2" src="images/image2.png">
<img id="image3" src="images/image3.png">
<img id="image4" src="images/image4.png">
<img id="image5" src="images/image5.png">
I was trying to add this function that I saw somewhere else here
function mouseOver() {
document.getElementById("image0").innerHTML = '<"image2.png"/>';
}
function mouseOut() {
document.getElementById("image0").innerHTML = '<img src="image1.png" />';
}
I wrote the img tag as
<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">
for all of the images but wasn't working. Can someone steer me in the right direction, please?
This is how I did it:
function mouseOut() {
document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/';
}
function changePic(elem) {
document.getElementById("image0").src = elem.src;
}
Here is the JSFiddle demo
If you want to do it using Jquery you can try this.
<div class="bigImg"></div>
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff" target="http://dummyimage.com/100x100/000/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff" target="http://dummyimage.com/100x100/999/fff">
JS
$('.imgLink').hover(function(){
$('.bigImg').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('.bigImg').css({'background':''});
});
Demo here
Basic concept behind this is we have to catch mouseover and mouseout events. Now, on mouse over we have to change the src attribute of that particular Image and vice versa for getting back the original image.
Try this one :
function mouseOver(element) {
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png';
}
function mouseOut(element) {
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png';
}
<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div>
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
I am currently making a website for an architecture firm, HLArchitects.
In the projects page I have created an HTML / Javascript image gallery.
When you hover over a smaller thumbnail the opacity changes from 0.5 to 1.
It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/
My problem is that after you click on one of the smaller thumbnails, which changes the bigger picture above it, and then try to hover over another smaller thumbnail, it no longer changes opacity. I used a simple CSS :hover to change the opacity along with transition: opacity 0.2s. Here is the Javascript / Jquery for the on click event of he thumbnail:
var imageFlow = document.getElementById("imageFlow");
var img = imageFlow.getElementsByTagName("img");
$("#imageFlow img").click(function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200);
setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
$('#displayImg img').fadeIn(200);
}
for (var i = 0; i < img.length; i++) {
$(img[i]).css("opacity","0.5");
}
$(this).css("opacity","1");
})
HTML:
<div id="displayImg">
<img src="images/095.jpg">
</div>
<div id="imageFlow">
<img src="images/095.jpg" alt="095" width="" height="" />
<img src="images/105.jpg" alt="105" width="" height="" />
<img src="images/106.jpg" alt="106" width="" height="" />
<img src="images/110.jpg" alt="110" width="" height="" />
<img src="images/133.jpg" alt="133" width="" height="" />
<img src="images/137.jpg" alt="137" width="" height="" />
<img src="images/138.jpg" alt="138" width="" height="" />
<img src="images/141.jpg" alt="141" width="" height="" />
<img src="images/145.jpg" alt="145" width="" height="" />
<img src="images/149.jpg" alt="149" width="" height="" />
<img src="images/160.jpg" alt="160" width="" height="" />
<img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" />
<img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" />
<img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" />
<img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" />
<img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" />
<img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" />
<img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" />
<img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" />
</div>
I would really appreciate a solution to this so that the hover effect works even after you click on one of the thumbnails.
Thank you in advance
var images = $("#imageFlow img");
images.on('click', function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200, function() {
$(this).attr("src", src).fadeIn(200);
});
}
images.removeAttr('style');
this.style.opacity = '1';
});
FIDDLE
Also, your site has two opening body tags and strange invalid markup.
CSS:
#imageFlow img:hover,
#imageFlow img.active {
opacity: 1;
}
JS:
var $img = $("#imageFlow").find("img");
$img.click(function(){
var src = this.src;
if (src != $('#displayImg img')[0].src){
$(this).addClass('active').siblings('img').removeClass('active');
$('#displayImg img').stop().fadeTo(200,0, function(){
this.src = src;
$(this).fadeTo(200, 1);
});
}
});
Take a good look at your HTML elements and fix unclosed tags, duplicate tags, duplicate ID elements etc... , and on other JS errors that pop out in console in your page. Otherwise you'll be running in loops ;)
Initially when I run this in the console I get this error:
TypeError: projs is null
var img = projs.getElementsByTagName('img');
It seems that your script is looking for something in the DOM that hasn't loaded yet.
Currently proj.js is looking for elements that haven't loaded yet.
Your script should run at the bottom of your page like the imageFlow.js.
just joined today loved this site already.
My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.
So my Q - is: How do you make the above code from a one image changer to 6?
Thanks !
Try using an id for each image (id must be unique, so there should be no elements with the same id):
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>
And this code:
function roll_over(img_id, img_src) {
document.getElementById(img_id).src = img_src;
}
Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>
hope this works