We Keep Coding

get image src if there is more then image src just get one image src

I am trying to get image src using jquery like this:
HTML
<div class="post_container">
<img src="http://imageurl.com">
</div>
<div class="appendedimageContainer"></div>
Javascript
var imageSrc = $('.post_container img').attr('src');
$(".appendedimageContainer").append('<div class="appended"><img src="'+imageSrc+'"></div>');
The code above works in a healthy way, but the question I would like to ask is here. If the pictures are more than one I want them not to be append. I just want to get one of them append.
For example if a situation as follows:
<div class="post_container">
<img src="http://imageurl1.com">
<img src="http://imageurl2.com">
<img src="http://imageurl3.com">
<img src="http://imageurl4.com">
</div>
<div class="appendedimageContainer"></div>
Just let one of them get a image url and ignore other image src. Can you help How can I do this?

Use nth-child selector to obtain your desired image, e.g.
var imageSrc = $('.post_container img:nth-child(0)').attr('src');

you can use first() to get the first element :-
var imageSrc = $('.post_container img').first().attr('src');

Load clicked image only

I have a CSS lightbox gallery on my website, however it loaded the thumbnails and the large images at the same time.
Below are the contents of my various files;
HTML:
<div class=galerie>
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
</div>
CSS:
.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}
I've added a script (jQuery):
<script>
$("a.galimg").click(function() {
$(".lightbox").each(function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
});
</script>
And now the large files are loaded only after I click a thumbnail.
The problem is that they all load at once, and I want only the clicked one to load at a time.
Is there a way to do this?
I know the each function does that, is there any other function I could use?

I'm not sure why you want to do something like this (would be easier if you post a link to your site) but i'll try to help.
Just don't use 'each' function. So your code should look something like this:
$("a.galimg").click(function() {
var imgID = $(this).attr('href');
$(imgID).attr("src", $(this).data('srcbig'));
});
And for HTML:
<div class=galerie>
<img src=/images/thumbnail.jpg /><img src="" alt="remember about me">
</div>
You could even delete the second 'a href' and image and just create it dynamically. It all depends on how your lightbox library works and what you need.

Attr sets an attribute, if you're trying to use it, I would go with something like this. I'm not sure what you're trying to set the attribute to, but this is the syntax:
<script>
$("a.galimg").click(function() {
$(this).attr("data-src", "your desired data attribute");
})
});
</script>
http://www.w3schools.com/jquery/html_attr.asp

Switch and replace Images on click

Im trying to replace and switch pictures on click But im getting stack on my code. I can get the big picture to change but the small doesnt change.
here what i have so far :
html
<div class="image_container">
<a href="" >
<img class="big_image" src="picture1" />
</a>
</div>
<div class="pics_container">
<img class="lilla" src="picture2" />
<img class="lilla" src="picture3" />
</div>
$('.lilla').on('click',function(){
$('.big_image').attr('src',$(this).attr('src'));
$(this).attr('src',$('.big_image').attr('src'));
})
What i want is when i click on picture 2 or 3 it will be in the place of picture1 and the picture1 will take place of the clicked picture 2 or 3 .
In my example the small picture works good to replace picture1 but picture1 didnt replace the clicked one. what i have missed pls ?
working Demo fiddle here

You'll need a variable to store the source from the big image before you swap it out
$('.lilla').on('click',function(){
var big_src = $('.big_image').attr('src');
$('.big_image').attr('src', $(this).attr('src'));
$(this).attr('src', big_src);
});

I would apply a class on each picture then reference upon that. So in an on click function I would do the following.
Example
$('#imagereplacing).attr('src',$('.exampleClass').attr('src'));

Reload specific div

I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.

Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO

You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.

How to display main image when clicked on its thumbnail using jQuery

My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.

You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute

I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!

Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.