Я нашел галерею JQUERY, которая мне действительно нравится, однако у меня есть проблемы с ней.
Мне нравится галерея, но она появится только после того, как вы нажмете название города на странице.
Я задавался вопросом, знает ли кто-нибудь, как заставить это работать, не нажимая что-либо, таким образом галерея только появится сама? Я весь день ломал голову!
Загрузите zip здесь и получите ссылку для предварительного просмотра окончательного результата!
http://tympanus.net/codrops/2010/10/07/slider-gallery/
Я пришел к выводу, что проблема заключается в странице индекса, где внизу находится java, а не внешние java-файлы в zip-файле, предоставляемом создателем.
Если кто-нибудь знает и может мне помочь, я был бы очень благодарен!
Заранее спасибо !!
код
$(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();
});
});