0

so: I put some images in a list dynamically trough the JQuery. I need to atrribute different ID's to each image because i want show the clicked image in another div.

Here's my JQ Code:

<script>

$.ajax({
    url: "Imagens/Trabalhos", //folder name
    success: function(data){
        var count = 0;
        $(data).find("a:contains(.jpg),a:contains(.png)").each(function(){
            // will loop through 
            var images = 'Imagens/Trabalhos/' +$(this).attr("href"); //get images names and set the path
            count++;
            var nome ='image'+count; //set the Suposed ID
            $('#ImageList').append('<li><a href="#" id="'+nome+'"><img src="' + images + '" width=90px height=120px></a></li>'); //Apply the images to the page, but the it dont recognise the id.

        });
    }
});

</script>

I know how to do to show the images in another div, but i need the ID (Right?). I'm not a pro on Jquery and i want to thanks all the answers.

Barmar
  • 741,623
  • 53
  • 500
  • 612
Tiago Brites
  • 23
  • 1
  • 1
  • 5

1 Answers1

1

You do not need an ID to be able to show an image in another div. You just need to set up an event listener like the following:

$(function() {
    $('#ImageList').on('click', 'img', function() {
        $('#destination_div').html( $(this).clone() );
    });
});

WORKING JSFIDDLE DEMO

PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • Thanks, this is definitly help me. I have another question, – Tiago Brites Jul 02 '14 at 17:23
  • Glad to know it helps. Let me know how I can be of further assistance. – PeterKA Jul 02 '14 at 17:24
  • Can you tell me how do i get the right size of each image i get? Because this way it cant give me that. – Tiago Brites Jul 02 '14 at 17:27
  • Inside the handler above `$(this).width()` and `$(this).height()` should give you the size of the image just clicked. – PeterKA Jul 02 '14 at 17:30
  • Yeah, but it will give me the size of the image on the div and not the real size of it. I want to know the real size of each image in order to resize it on the right way. I don't know if i'm being clear. – Tiago Brites Jul 02 '14 at 17:33
  • I'm not sure I understand what you mean. Can you create a jsfiddle? Perhaps that can help. – PeterKA Jul 02 '14 at 17:43
  • The firs half of my code above will put each image I have in a folder into a list. Each image have his own size. Once it put the image it will resize in order to put all at the same size. Like if i want to decrease, lets say, 60% of the initial size. Imagine that you have an image with 1024/480px and another with 480/1024, i dont wanna put both with 90/120px, i want to fit them in a imaginary box with 125/125px and deppending the size of each image, resize in order to fit there. I can't be more clear. – Tiago Brites Jul 02 '14 at 18:05
  • If the images are 'unrestricted' where you're first adding them, you can capture their actual size by using something like this after dynamically adding img markup: `$('img').load(function() { $(this).data({'width':this.width,'height':this.height}); });` which will capture the size and store it in data attributes `width` and `height` where you can retrieve that from .... check this out: http://stackoverflow.com/questions/623172/ – PeterKA Jul 02 '14 at 18:29
  • @TiagoBrites If you have another question you should create a new Question for it, not carry on a conversation in the comments. There's also _chat_ if you do want a conversation. – Stephen P Jul 02 '14 at 18:30
  • Thanks @StephenP, and sorry about that. – Tiago Brites Jul 02 '14 at 18:35