Question

First time poster here. I’ve assembled a scrolling website that also has a sliding panel gallery. Which is where the problem is – when a user clicks on a thumbnail, a corresponding large image slides up using an “animate” command. The user is required to click again on the large image to return to the thumbnail view, to navigate further.

THE PROBLEM: It turns out this isn’t very intuitive. People like to click where they want to click, not in a prescribed / recommended sequence. While in the large image view, nothing else is visible even if a user has clicked on “Home” or some other section, which scrolls into position upon click but is invisible behind the large gallery image.

I need to find the code to close the large image view when a user either clicks on the image, or on any of the other menu sections visible at the bottom,and scroll to the relevant clicked section. All these sections use a “goToByScroll” script. The initial thumbnail view of the gallery also slides into view using a “goTobyScroll” script.

Per this response from the help forum on the jquery site, the # image and # wrapper are what need to close upon click.

Thanks for reading, and for any help.

UPDATE: (Apologies at the belated update. As an amateur coder this stuff can be intimidating – I depend on others to actually do anything that is more than mere cut-paste:-)Thanks to both posters for taking the time and trouble. For the benefit of those visiting via search, here is the code that actually worked in this case:

---

$(‘#top’).live(‘click’,function(){
$this = $(‘#wrapper > img’);
$(‘#description’).empty().hide();

                $('#thumbsWrapper').css('z-index','100')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $('#wrapper > img');
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });

});

Thanks also to everybody involved with running/moderating SO.

Answer 1

put this code inside goToByScroll() function

$('#wrapper img').trigger('click')

$(‘#wrapper img’) only shows if you have something is shown. but add some class to the main image so its more specific. Something like

$('#wrapper img.big_preview').trigger('click')