0

第一次在这里发海报。我已经组装了一个滚动网站，它也有一个滑动面板画廊。这就是问题所在 - 当用户单击缩略图时，相应的大图像会使用“动画”命令向上滑动。用户需要再次单击大图像以返回缩略图视图，以进一步导航。

问题：事实证明这不是很直观。人们喜欢点击他们想点击的地方，而不是按照规定/推荐的顺序。在大图像视图中，即使用户点击了“主页”或其他部分，其他任何内容都看不到，点击后会滚动到适当的位置，但在大画廊图像后面是不可见的。

当用户单击图像或底部可见的任何其他菜单部分时，我需要找到关闭大图像视图的代码，然后滚动到相关的单击部分。所有这些部分都使用“goToByScroll”脚本。画廊的初始缩略图视图也使用“goTobyScroll”脚本滑入视图。

根据 jquery 网站上帮助论坛的回复，#image 和 #wrapper 是点击后需要关闭的内容。

感谢您的阅读，并提供任何帮助。

更新：（在迟来的更新中道歉。作为一个业余编码人员，这些东西可能会令人生畏——我依靠其他人来做任何不仅仅是剪切粘贴的事情：-）感谢两位海报的花时间和麻烦。为了那些通过搜索访问的人的利益，这里是在这种情况下实际工作的代码：

$('#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();
                });

});

还要感谢所有参与运行/审核 SO 的人。

4

2 回答 2

1

将此代码放入 goToByScroll() 函数中

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

$('#wrapper img') 仅在您显示某些内容时才显示。但是在主图像中添加一些类，使其更具体。就像是

$('#wrapper img.big_preview').trigger('click')
于 2012-07-09T09:14:03.643 回答
0

创建您的处理程序并将其分配给您的图像和您提到的其他区域。

var isOpen = false;
...

$('container').delegate('.my-image', 'click' function(e)){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
}.delegate('other-area', 'click', function(){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
})

使用布尔值来确定状态是打开还是关闭。如果您愿意，也可以使用类名。在 jQuery 中，您还可以选择使用 toggle() 函数。

于 2012-07-09T09:15:43.403 回答