我找到了一个我非常喜欢的JQUERY画廊，但是我遇到了问题。 我喜欢这个画廊，但只有在您点击页面上的城市名称后才会出现。 我想知道是否有人知道如何使它工作而不点击任何东西，所以画廊将只是自己出现？我整天都在绞尽脑汁！
在此处下载zip并提供预览最终结果的链接！ http://tympanus.net/codrops/2010/10/07/slider-gallery/
我得出结论，问题出现在索引页面上，底部的java与创建者提供的zip文件中的外部java文件相对。
如果有人知道并且可以帮助我，我将无法感激！
提前致谢!!
$(function() {
//caching
//the main wrapper of the gallery
var $fp_gallery = $('#fp_gallery')
//the overlay when the large image is displayed
var $fp_overlay = $('#fp_overlay');
//image loading status
var $fp_loading = $('#fp_loading');
//the next and previous buttons
var $fp_next = $('#fp_next');
var $fp_prev = $('#fp_prev');
//the close button
var $fp_close = $('#fp_close');
//the main container for the thumbs structure
var $fp_thumbContainer = $('#fp_thumbContainer');
//wrapper of jquery ui slider
var $fp_scrollWrapper = $('#fp_scrollWrapper');
//total number of images
var nmb_images=0;
//which gallery is clicked (index)
var gallery_idx=-1;
//scroller wrapper
var $fp_thumbScroller = $('#fp_thumbScroller');
//jquery ui slider
var $slider = $('#slider');
//the links of the galleries (the cities)
var $fp_galleries = $('#fp_galleryList > li');
//current image being viewed
var current = 0;
//some control flags:
//prevent fast clicks on next and previous
var photo_nav = true;
//User clicks on a city / gallery;
$fp_galleries.bind('click',function(){
$fp_galleries.removeClass('current');
var $gallery = $(this);
$gallery.addClass('current');
var gallery_index = $gallery.index();
if(gallery_idx == gallery_index) return;
gallery_idx = gallery_index;
//close the gallery and slider if opened
if($fp_thumbContainer.data('opened')==true){
$fp_scrollWrapper.fadeOut();
$fp_thumbContainer.stop()
.animate({'height':'0px'},200,function(){
openGallery($gallery);
});
}
else
openGallery($gallery);
});
//opens a gallery after cliking on a city / gallery
function openGallery($gallery){
//current gets reseted
current = 0;
//wrapper of each content div, where each image is
var $fp_content_wrapper = $fp_thumbContainer.find('.container:nth-child('+parseInt(gallery_idx+1)+')');
//hide all the other galleries thumbs wrappers
$fp_thumbContainer.find('.container').not($fp_content_wrapper).hide();
//and show this one
$fp_content_wrapper.show();
//total number of images
nmb_images = $fp_content_wrapper.children('div').length;
//calculate width,
//padding left
//and padding right for content wrapper
var w_width = 0;
var padding_l = 0;
var padding_r = 0;
//center of screen
var center = $(window).width()/2;
var one_divs_w = 0;
/*
Note:
the padding left is the center minus half of the width of the first content div
the padding right is the center minus half of the width of the last content div
*/
$fp_content_wrapper.children('div').each(function(i){
var $div = $(this);
var div_width = $div.width();
w_width +=div_width;
//if first one, lets calculate the padding left
if(i==0)
padding_l = center - (div_width/2);
//if last one, lets calculate the padding right
if(i==(nmb_images-1)){
padding_r = center - (div_width/2);
one_divs_w= div_width;
}
}).end().css({
'width' : w_width + 'px',
'padding-left' : padding_l + 'px',
'padding-right' : padding_r + 'px'
});
//scroll all left;
$fp_thumbScroller.scrollLeft(w_width);
//innitialize the slider
$slider.slider('destroy').slider({
orientation : 'horizontal',
max : w_width -one_divs_w,//total width minus one content div width
min : 0,
value : 0,
slide : function(event, ui) {
$fp_thumbScroller.scrollLeft(ui.value);
},
stop: function(event, ui) {
//when we stop sliding
//we may want that the closest picture to the center
//of the window stays centered. Uncomment the following line
//if you want that behaviour
checkClosest();
}
});
//open the gallery and show the slider
$fp_thumbContainer.animate({'height':'240px'},200,function(){
$(this).data('opened',true);
$fp_scrollWrapper.fadeIn();
});
//scroll all right;
$fp_thumbScroller.stop()
.animate({'scrollLeft':'0px'},2000,'easeInOutExpo');
//User clicks on a content div (image)
$fp_content_wrapper.find('.content')
.bind('click',function(e){
var $current = $(this);
//track the current one
current = $current.index();
//center and show this image
//the second parameter set to true means we want to
//display the picture after the image is centered on the screen
centerImage($current,true,600);
e.preventDefault();
});
}
//while the gallery scrolls we want that the slider scrolls as well
$fp_thumbScroller.scroll(function(){
$slider.slider('value',parseInt($fp_thumbScroller.scrollLeft(),10));
});
//User clicks next button (preview mode)
$fp_next.bind('click',function(){
if(photo_nav){
photo_nav = false;
navigate(1);
}
});
//User clicks previous button (preview mode)
$fp_prev.bind('click',function(){
if(photo_nav){
photo_nav = false;
navigate(0);
}
});
//User clicks next button (thumbs)
$('#fp_next_thumb').click(function(){
slideThumb(1);
});
//User clicks previous button (thumbs)
$('#fp_prev_thumb').click(function(){
slideThumb(0);
});
//User clicks close button
$fp_close.bind('click',function(){
if(!photo_nav) return;
//windows scroll if any
var windowS = $(window).scrollTop();
//the large image being viewed
var $large_img = $('#fp_preview');
//the current thumb
var $current = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
//offset values of current thumb
var current_offset = $current.offset();
//the large image will animate in the direction of the center
//after that it is removed from the DOM
$large_img.stop().animate({
'top' : current_offset.top + windowS + 'px',
'left' : $(window).width()/2 - $current.width()/2 + 'px',
'width' : $current.width() + 'px',
'height' : $current.height() + 'px',
'opacity' : 0
},800,function(){
$(this).remove();
//hide the overlay, and the next, previous and close buttons
hidePreviewFunctions();
});
});
答案 0 :(得分：0)
如果您观察到代码，他们会使用名为openGallery的页面中定义的函数，并将其称为openGallery($gallery)
如需了解更多信息，请阅读您发布的页面中的代码，如果您有特定问题，请告诉我们。 （最好给出一个有关你所处位置的实例，这样我们就可以更进一步...... ）
由于您只有一个元素，因此您只需触发按钮上的单击即可。
所以找到以下代码并改变最后一行
$fp_galleries.bind('click',function(){
$fp_galleries.removeClass('current');
var $gallery = $(this);
$gallery.addClass('current');
var gallery_index = $gallery.index();
if(gallery_idx == gallery_index) return;
gallery_idx = gallery_index;
//close the gallery and slider if opened
if($fp_thumbContainer.data('opened')==true){
$fp_scrollWrapper.fadeOut();
$fp_thumbContainer.stop()
.animate({'height':'0px'},200,function(){
openGallery($gallery);
});
}
else
openGallery($gallery);
}).trigger('click');
最后一行是我所做的唯一更改（添加了.trigger('click') ）
答案 1 :(得分：0)
如果有人正在寻找解决方案。要自动加载图库1，我使用了.load（）函数。
更改要自动加载的图库的值。 var gallery_index = 0;
$(window).load(function() {
//$fp_galleries.removeClass('current');
var $gallery = $(this);
$gallery.addClass('current');
var gallery_index = 0;
if(gallery_idx == gallery_index) return;
gallery_idx = gallery_index;
//close the gallery and slider if opened
if($fp_thumbContainer.data('opened')==true){
$fp_scrollWrapper.fadeOut();
/*$fp_thumbContainer.stop()
.animate({'height':'0px'},200,function(){*/
openGallery($gallery);
//});
}
else
openGallery($gallery);
});