We Keep Coding

Conditionally change the image source based on its id value

How can I set or change the image using JavaScript or jQuery? The src attribute of img tags with id less than or equal to 3 (that is, img with id as 1, 2, 3) should be changed to (or set to) flower image, then that of img tags with id as 4, 5, 6 be animal image and that of img with id more than 6 (that is, 7, 8) be the default image.
I want to do this using the lesser than and greater than operators (< and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?
I tried to do this but it is not working.
<div id="image">
<img id="img-1" src="..... "/>
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/>
<img id="img-4" src="..... "/>
<img id="img-5" src="..... "/>
<img id="img-6" src="..... "/>
<img id="img-7" src="..... "/>
<img id="img-8" src="..... "/>
</div>
Please answer with the full code using the image that make me understand.

It's hard to understand what you're looking for. Consider adding some details in your question. BUT: I made an example of how you at least can change the src or an image.
The easiest way (not the BEST, or most intelligent way) is to change the src attribute on your images. I made a fiddle to show what I mean. https://jsfiddle.net/nbhey2nz/ In short: When you click on the first button, it changes the src on images 1-3. When you click on the second button, it changes the src on images 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE!
If I understand your updated question correctly, you want to do this with an operator < and > right?
Well, I updated my fiddle to suit your update: https://jsfiddle.net/nbhey2nz/2/ This time doing it in a JavaScript way, so you get both versions. Notice I changed the image ID to only the integer, not the img-1 way. You could do it this way too, but then you would have to trim the text, and that's kind of not what you were asking about! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})

**Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000#gmail.com)**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image change by areraj</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
</script>
<style>
img{width:50px; height:50px; display:inline-block; margin-right:5px;}
</style>
</head>
<body>
<div id="image">
<img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
</div>
</body>
</html>

Why can't I modify the properties of images by referencing them as children of their parent div in jquery

Being that this is my HTML with the four images:
$('div#slideshow').children(function(index){
$(this).width('90%');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Could you perhaps explain why this is or what I've done wrong with my jQuery command? I'm stumped.

The .children() function does take a parameter, but it's not intended to be a function that operates on the child elements. It's for filtering the child elements.
You could use .children().each() with your code, or you could just do this:
$("#slideshow > img").width("90%");
The library has implicit iteration built in, so when your selector matches multiple elements it will make the changes to each one automatically.

Children is used for filtering, it doesn't do a callback for each element. For that, you need each:
$(function() {
$('div#slideshow').children().each(function(index) {
$(this).width('90%');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Or just use css:
#slideshow > img {
width: 90%;
}
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>

Change the order of images by clicking buttom [duplicate]

This question already has answers here:
Changing the order of elements
(4 answers)
Closed 8 years ago.
Help me to solve this trivial problem.
I need to change an image order within button_Click. How can I do this?
Actualy I need the **simplest** way, **no jQuery**.
Will be very grateful for piece of working code with explanation - It's a headache for me
[Here][1] is my code
PS I already got some advises, but all them conneted to jQuery
No jQuery
<div id="one">
<input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
<h1 style="font-size: 12"> Header HeaderHeaderHeader</h1>
<p style="font-size:8"> text text text </p>
</div>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>

Hope you find the below code working as per your requirement.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src= "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>
<script>
function myFunction() {
var temp=document.getElementById("demo1").src;
document.getElementById("demo1").src = document.getElementById("demo2").src;
document.getElementById("demo2").src = document.getElementById("demo3").src;
document.getElementById("demo3").src = temp;
}
</script>
</body>
</html>

Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.
<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;
for(i=1;i<=count;i++)
{
//If value of i is equal to count then, assign the first image source
// captured in temp variable to the last image inside the div.
if(i==count){
document.getElementById("pict_0"+i).src=temp;
}
//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input>
<br/>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>

jQuery. Add and remove elements working only once

It seemed like nothing special but...
I'm trying to add and remove div, add element function working as expected, but if I delete element, nothing else are working - I cannot add nor delete. And one more problem there - selectors using css class that are same for all elements, but event triggering only on first element.
Here is JS:
//Here i want to clone element and insert its after last element
$("div.addnewitem").on('click', function () {
var $d = $("div.item:first").clone();
$($d).insertAfter("div.item:last");
});
//Here i'm deleting element
$("div.deleteitem").on('click', function (event) {
$(event.target).closest("div.item").remove();
});
And HTML markup:
<div class="item">
<div class="itemphoto">
<img alt="" src="../img/woolrich.png">
</div>
<div class="bigshadow">
<img alt="" src="../img/bigshadow.png">
</div>
<!--This must add new element after last one-->
<div class="addnewitem">
<img alt="" src="../img/addnewitem.png">
</div>
<!--This must delete current div-->
<div class="deleteitem">
<img alt="" src="../img/deleteitem.png">
</div>
<div class="about">
<input type="text" class="link" placeholder="Ссылка на вещь..." name="item_url">
<input type="text" class="link" placeholder="Ссылка на изображение" name="item_image" />
<input type="text" class="name" placeholder="Вещь и бренд..." name="item_name">
<textarea class="review" placeholder="Короткое описание (около 120 символов)..." name="item_desc"></textarea>
<input type="text" class="pricestylist" placeholder="Цена (xxx руб/$)" name="item_price">
</div>
</div>

try the fiddle demo
first").clone(true); , the true was missing, it is withDataAndEvents attribute,
for more details, check clone()

how to generalize a click function in jquery

I have 13 small pictures and 13 big pictures,if any of the small pictures are clicked it'll show the related big picture, I was just wondering if it was possible to generalize the click function so I don't have to repeat the dame code 13 times, thanks
<div id="press_images">
<img id="s1" class="small" src="images/press/small/1.png" />
<img id="s2" class="small" src="images/press/small/2.png" />
<img id="s3" class="small" src="images/press/small/3.png" />
<img id="s4" class="small" src="images/press/small/4.png" />
.....
<img id="s13" class="small" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" src="images/press/big/1.jpg" />
......
<img id="b13" src="images/press/big/13.jpg" />
</div>
$("#s1").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
so I was wondering if I could change the $("#s1").click(function() so I don't have to repeat it 13 times.
thanks

The following should work :
$(".small").click(function(){
var id_img=$(this).attr('id').replace('s','');
$('.big img').hide();
$('#b'+id_img).show();
$('.big').show(300);
return false;
});

Try this
// For all <img>'s with class `small`
$("img.small").click(function() {
// Get the index from the small image's ID
var index = this.id.substr(1);
// Hide all other big images
$(".big img").hide()
// Show the related big images
$('#b' + index).show();
// Show the big image container
$('.big').show(300);
return false;
});

That's how I'd do it:
<div id="press_images">
<img id="s1" rel="b1" class="small" src="images/press/small/1.png" />
<img id="s2" rel="b2" class="small" src="images/press/small/2.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" class="big" src="images/press/big/1.jpg" />
<img id="b2" class="big" src="images/press/big/2.jpg" />
</div>
$(".small").click(function(){
$( ".big img" ).hide();
$( "#"+ $(this).attr("rel") ).show();
}
Notice that I use "rel" to link the elements. I consider it to be cleaner than assuming that b1 is related to s1. I like CoC, but I'm not sure that in that case it'd be the best idea.

<div id="press_images">
<img id="small1" class="small small-img" src="images/press/small/1.png" />
<img id="small2" class="small small-img" src="images/press/small/2.png" />
<img id="small3" class="small small-img" src="images/press/small/3.png" />
<img id="small4" class="small small-img" src="images/press/small/4.png" />
.....
<img id="small13" class="small small-img" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="big1" class="big-img" src="images/press/big/1.jpg" />
......
<img id="big13" class="big-img" src="images/press/big/13.jpg" />
</div>
$(".small-img").click(function(e){
var imgBig = String($(this).attr("id")).replace("small", "big");
e.stopPropagation();
$(".big-img").hide();
$("#" + imgBig ).show();
$(".big").show(300);
});

Put a class in every image. for example:
<img id="s1" class="small clickable-image" src="images/press/small/1.png" />
And then:
$(".clickable-image").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
EDIT: then of course, you have to change the line $('#b1').show(); but, it's easy, you just have to get the element ID and build the ID of the bigger image. Just like Justin Johnson does in his answer.

The most flexible option is to use index and eq and get rid of all explicit html helpers, like ID or rel
$('#press_images img').click(function() {
var n = $('#press_images img').index(this);
$(".big img").hide().eq(n).show()
});