-1
У меня есть галерея расширений с ползунком внутри и на внешней странице. Я хочу использовать две галереи на одной странице. Первый работает отлично, но второй не работает. Похоже, что-то не хватает, но я не знаю, что это.Функция JQuery не работает во второй раз
<!-- FIRST -->
<div class="portfolio-top"></div>
<!-- Portfolio Plus Filters -->
<div class="portfolio">
<!-- Portfolio Wrap -->
<div id="portfolio-wrap">
<!-- Portfolio Item FullScreen Expander -->
<div class="portfolio-item one-four uclu one_third">
<div class="portfolio-image">
<img src="ekipman/studyo-1.jpg" alt="Stüdyo"/>
</div>
<div class="project-overlay">
<div class="open-project-link">
<a class="open-project" href="studyo.html" title="Göster"></a>
</div>
<div class="project-info">
<div class="zoom-icon"></div>
<h4 class="project-name">Stüdyo</h4>
<p class="project-categories">Atölye Stüdyo</p>
</div>
</div>
</div>
<!-- Portfolio Item FullScreen Expander -->
</div>
<!--/Portfolio Wrap -->
</div>
<!--/Portfolio Plus Filters -->
<div class="portfolio-bottom"></div>
<!-- Project Page Holder-->
<div id="project-page-holder">
<div class="clear"></div>
<div id="project-page-data"></div>
</div>
<!--/FIRST-->
<!-- SECOND -->
<div class="portfolio-top"></div>
Jquery:
$(window).load(function() {
// Project Page Expander
(function(){
var container = $("#project-page-holder");
var $items = $('#portfolio-wrap .open-project-link');
index = $items.length;
$('#portfolio-wrap .open-project-link').click(function(){
if ($(this).hasClass('active')){
} else
{ lastIndex = index;
index = $(this).index();
$items.removeClass('active');
$(this).addClass('active');
var myUrl = $(this).find('.open-project').attr("href") + " .item-data";
$('#project-page-data').animate({opacity:0}, 400,function(){
$("#project-page-data").load(myUrl,function(e){
var $helper = $('.helper');
var height = $helper.height();
$('#project-page-data').css("min-height", height);
$('.project-slider').css({'height' : ''});
$('#maximage').css({'height' : ''});
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right',
pause: 1,
},
});
});
$('#project-page-data').delay(400).animate({opacity:1}, 400);
});
$('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top -40}, 900);
//Project Page Open
$('#project-page-holder').slideUp(600, function(){
$('#project-page-data').css('visibility', 'visible');}).delay(1100).slideDown(1000,function(){
$('#project-page-data').fadeIn('slow',function(){initBxModal();});
$('.element_fade_in').each(function() {
$(this).appear(function() {
$(this).delay(100).animate({opacity:1,right:"0px"},1000);
});
});
});
}
return false;
});
//Project Page Close
$(document).on('click', '#project_close', function(event) {
$('#project-page-data').animate({opacity:0}, 400,function(){
$('#project-page-holder').delay(400).slideUp(400);
});
$('html, body').delay(1000).animate({ scrollTop: $(".portfolio-top").offset().top - 70}, 800);
$items.removeClass('active') ;
return false;
});
})(); });
$(window).load(function() {
// Project Page Expander
(function(){
var container = $("#project-page-holder2");
var $items = $('#portfolio-wrap2 .open-project-link2');
index = $items.length;
$('#portfolio-wrap2 .open-project-link2').click(function(){
if ($(this).hasClass('active')){
} else
{ lastIndex = index;
index = $(this).index();
$items.removeClass('active');
$(this).addClass('active');
var myUrl = $(this).find('.open-project2').attr("href") + " .item-data";
$('#project-page-data2').animate({opacity:0}, 400,function(){
$("#project-page-data2").load(myUrl,function(e){
var $helper = $('.helper');
var height = $helper.height();
$('#project-page-data2').css("min-height", height);
$('.project-slider').css({'height' : ''});
$('#maximage2').css({'height' : ''});
$('#maximage2').maximage({
cycleOptions: {
fx: 'fade',
speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right',
pause: 1,
},
});
});
$('#project-page-data2').delay(400).animate({opacity:1}, 400);
});
$('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top -40}, 900);
//Project Page Open
$('#project-page-holder2').slideUp(600, function(){
$('#project-page-data2').css('visibility', 'visible');}).delay(1100).slideDown(1000,function(){
$('#project-page-data2').fadeIn('slow',function(){initBxModal();});
$('.element_fade_in').each(function() {
$(this).appear(function() {
$(this).delay(100).animate({opacity:1,right:"0px"},1000);
});
});
});
}
return false;
});
//Project Page Close
$(document).on('click', '#project_close', function(event) {
$('#project-page-data2').animate({opacity:0}, 400,function(){
$('#project-page-holder2').delay(400).slideUp(400);
});
$('html, body').delay(1000).animate({ scrollTop: $(".portfolio-top").offset().top - 70}, 800);
$items.removeClass('active') ;
return false;
});
})(); });
Проблема заключается в том, когда я нажимаю на второй он не работает. Спасибо.
Может быть, вы могли бы описать разницу между каждой функции ?! И «это не работает» ничего не значит, точнее, –
Для динамически добавленных элементов управления используйте [event-delgation] (http://learn.jquery.com/events/event-delegation/). Это лучшее, что я понял из длинного кода – Satpal
Так ведь у вас есть только одна функция ??? По крайней мере, проверьте свою консоль на наличие ошибки –