Accessing single items in an array of images [ANSWERED]

Accessing single items in an array of images

Asked By: joe
Originally Asked On: 2014-01-02 08:28:01
Asked Via: stackoverflow

I was wondering how I would be able to individually access items from the array of images so that I can increase the height/width of the single item rather than the entire class/array.

<?php
$imgdir = 'dirimages/';
$images = glob($imgdir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
?>
<script>
    jQuery(function () {
        var phpvar =   <?php echo json_encode($images) ?>;
        $.each(phpvar, function (id, image) {
            jQuery('#slidediv').append('<img class="loadimg" src="' + image + '"/>');
        });

        $('.loadimg').click(function () {
            $('.loadimg').animate({height: '500px', width: '500px'});
        });

    });
</script>

He received 2 answers
eventually accepting:

Rajaprabhu Aravindasamy’s answer to

Accessing single items in an array of images

You are selecting the entire elements by using its class name. Just try to access the current element by using $(this). Additionally, you are appending those elements dynamically, so you should use event delegation in your context by using .on().

Try,

$(document).on('click','.loadimg', function(){
    $(this).animate({height:'500px', width:'500px'});
});

The answer with the highest score with 1 points was:

Jai’s answer to

Accessing single items in an array of images

delegate the event to the closest static parent:

$('#slidediv').on('click', '.loadimg', function(){
    $(this).animate({height:'500px',width:'500px'});
});

Just because at the page load you did not have the .loading element so direct binding of event won’t work. so you have to delegate the event to the closest static parent in your case is this #slidediv or you can delegate to the document itself because that always available in the page.

Also you have bound the event to the class name so that would bind the event to every elem which has that class name, so you need to work the animate function in the context of the current selector using $(this).

If the selected answer did not help you out, the other answers might!

All Answers For: Accessing single items in an array of images

Rajaprabhu Aravindasamy’s answer to

Accessing single items in an array of images

You are selecting the entire elements by using its class name. Just try to access the current element by using $(this). Additionally, you are appending those elements dynamically, so you should use event delegation in your context by using .on().

Try,

$(document).on('click','.loadimg', function(){
    $(this).animate({height:'500px', width:'500px'});
});

Jai’s answer to

Accessing single items in an array of images

delegate the event to the closest static parent:

$('#slidediv').on('click', '.loadimg', function(){
    $(this).animate({height:'500px',width:'500px'});
});

Just because at the page load you did not have the .loading element so direct binding of event won’t work. so you have to delegate the event to the closest static parent in your case is this #slidediv or you can delegate to the document itself because that always available in the page.

Also you have bound the event to the class name so that would bind the event to every elem which has that class name, so you need to work the animate function in the context of the current selector using $(this).

Of course, you should really check out the original question.

The post Accessing single items in an array of images [ANSWERED] appeared first on Tech ABC to XYZ.