Jquery - copying first img src from div with 2 images, to another div

I've been looking for a solution to this for a while now, have found several options, but none of them were actually working in my case...

html/php code:

<div class="something">
    <img src="images/gallery/<?php echo $row_get_img['imagename']; ?>">
    <img src="images/gallery/pixelfiller.png">
    //Divs are on top of one another(*code not transcribed fully*)
</div>

<div id="fullscreen">
    <div class="imgfull"></div>
</div>

The objective is to grab the 1st img inside the "something" class, and fill the "imgfull" div with the image.

the jquery script i have so far is this:

jquery开发者_Python百科 code:

$("#content .something").click(
   function() {
       $("#fullscreen").show("slow");

$("#fullscreen").click(
   function() {
       $("fullscreen").hide("slow");
)

I have already tried a lot of options, find(), attr(), get() and even append(). The one i figured was closer to getting what i needed done i assume is attr(), but I can't figure out why.

What i really need is that, by clicking on the div "something", the source atribute of the first image inside the clicked div, must be sent to the div "imgfull".

With the attr() I've managed to get the source of the first image in the document, not the div, I'm guessing i need to use $(this) along with attr, but i just can't figure out out, also this solution must be fit inside the jquery script presented first.

I don't know if this is asking for too much, but thanks in advance for any answer to this problem.

---

Try

$(".something img:first").clone().appendTo(".imgfull");

That will take the image element, clone it and append the clone to the .imgfull div.

---

You can do something like this (assuming you only want 1 image inside the divs with the class imgfull):

$('.something').click(function(){
     $('.imgfull').html('<img src="' + $(this).find('img:eq(0)').attr('src') + '" />');
});

Here's a working example.

---

You can do something like this (jsFiddle):

<div id="source">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="img1" />
    <img src="http://maps.google.com/intl/en_us/images/logos/maps_logo.gif" alt="img2" />
</div>
<a href="#" id="move">Move</a>
<div id="dest"></div>

$('#move').click(function(){
    $('#dest').append('<img src="' + $('#source img:first').attr("src") + '" alt="img3" />');
});

This is with click event, but the point is valid regardless of the event it is bound to.

---

This line of code will clear out the #fullscreen .imgFull div, grab the first img tag from the .something div and append it to the #fullscreen .imgFull div.

$('#fullscreen .imgfull').empty().append($('.something img:first-child').clone());

Edit: jsFiddle

---

You could try:

$("#content .something img").click(
   function() {
       $('#fullscreen .imgfull').empty();
       $('<img src="' + this.src + '" />').appendTo('#fullscreen .imgfull');
   });

JS Fiddle.