CODEWITHSUNDEEP
javascriptjqueryimagegalleryclone
mmm
mmm

Reputation: 2297

jquery next with clone for a photo gallery

The image gallery that I'm making uses jquery clone to duplicate the image thumbnail that is clicked on and appends it to the #big div, this helps with centering and fixed positioning. The problem I'm having is when I click #right_arrow or #left_arrow, I can't seem to figure out how to select the next or previous item in the list and append that to the body.

I know jquery has .next() but I'm having trouble figuring out how that works.

here's the jsFiddle: http://jsfiddle.net/reveries/UgQre/

            $(document).ready
            $('img, div.wrapper').each( function() {
                var $img = $(this);
                $img.addClass('thumbnail');
                $img.wrap('<li></li>');

                $img.click(function() {
                    $img.clone().appendTo('#big');
                    $('#big').fadeToggle('slow');
                    $('#right_arrow').fadeIn('slow');
                    $('#left_arrow').fadeIn('slow');
                });

            $('#big').click(function(){
                $img.addClass('thumbnail');
                $('#big').fadeOut('slow');
                $(this).html('');
                $('#right_arrow').fadeOut('slow');
                $('#left_arrow').fadeOut('slow');
            })
            $('#right_arrow').click(function(){
                $('#big').html('');
            })
            $('#left_arrow').click(function(){
                $('#big').html('');
            })

        });

Upvotes: 0

Views: 223

Answers (1)

Abe Haskins
Abe Haskins

Reputation: 1378

Here is a fixed version of your fiddle: http://jsfiddle.net/abeisgreat/fu3fX/

Your code has a few issues that keep it from working properly. Firstly, your .click() calls are within your .each, which means that #big, #right_arrow, #left_arrow will all have multiple bindings of the same function, which isn't what you want.

Secondly, you're right in assuming that .next() and .prev() is what you want to use, the problem is that $img.next() doesn't exist because you're wrapping each img in an li tag in your .each(). Because of this $img has no sibilings and .next() and .prev() will be not return the next img tag. So you really need to call $img.parent().next().children(), to get the next image.

The only major change I made was to add a global called $selected_li, which contains the li of the selected image. Once we have that, we can do this.

$('#left_arrow').click(function(){
    $('#big').html('');
    $selected_li.prev('li').children('img').clone().appendTo('#big');
    $selected_li = $selected_li.prev('li')
})

To progress backwards or the exact same with .next() to move forward. You were very close, like I said I think the big issue was the wrapping with li which removed any sibilings from your img tags!

Hope this helps, Abe

Upvotes: 1

Related Questions