2014-01-24 2 views
0

Прежде всего, я хотел бы извиниться, если этот вопрос, который у меня есть, был разрешен уже пятьдесят пять миллионов раз. К сожалению, я не нашел ответа здесь. Кроме того, я очень зеленый путь к jQuery, так что простите мое невежество по этому вопросу.Новичок, имеющий проблемы с конфликтом jQuery

Я использую jQuery для 3-х областей (не уверен, какой термин использовать) - прокрутка к функции, галерея fancybox и кнопка «назад к началу». Любые двое из них прекрасно работают вместе, когда я пытаюсь реализовать все три, я теряю fancybox.

Вот код из головы:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<link href="js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" /> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script> 
<script type="text/javascript"> 
$(function() { 
    function filterPath(string) { 
     return string 
      .replace(/^\//,'') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
      .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 
    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 
     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if (locationPath == thisPath 
       && (location.hostname == this.hostname || !this.hostname) 
       && this.hash.replace(/#/,'')) { 
      // Ensure target exists 
      var $target = $(this.hash), target = this.hash; 
      if (target) { 
       // Find location of target 
       var targetOffset = $target.offset().top; 
       $(this).click(function(event) { 
        // Prevent jump-down 
        event.preventDefault(); 
        // Animate to target 
        $(scrollElem).animate({scrollTop: targetOffset}, 900, function() { 
         // Set hash in URL after animation successful 
         location.hash = target; 
        }); 
       }); 
      } 
     } 
    }); 

    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
     } else { 
      $('.scrollup').fadeOut(); 
     } 
    }); 

    $('.scrollup').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
    }); 

}); 
</script> 

и снизу тела тега:

<script type="text/javascript"> 

$(document).ready(function(){ 
    $(".fancybox").fancybox(); 
}); 
</script> 
<script type="text/javascript"> 
$(".fancybox").fancybox({ 
    nextEffect : 'fade', 
    prevEffect : 'fade', 
    padding  : 0, 
    margin  : [15, 15, 40, 15], 
    afterLoad : addLinks, 
    beforeClose : removeLinks 
}); 

function addLinks() { 
    var list = $("#links"); 

    if (!list.length) {  
     list = $('<ul id="links">'); 

     for (var i = 0; i < this.group.length; i++) { 
     $('<li data-index="' + i + '"><label></label></li>').click(function() { 
      $.fancybox.jumpto($(this).data('index'));}).appendTo(list); 
     } 

     list.appendTo('body'); 
    } 

    list.find('li').removeClass('active').eq(this.index).addClass('active'); 
} 

function removeLinks() { 
    $("#links").remove();  
} 
</script> 
+1

Вы получаете какие-либо ошибки в консоли? – SLaks

+0

Вы пробовали jQuery.noConflict()? –

+0

Когда вы публикуете вопросы с этим много кода, обычно считается хорошей формой для отступов/кодирования, чтобы было легко читать .... –

ответ

0

слишком много информации, чтобы положить в комментарии, так:

  1. Используйте консоль отладки. С Firefox (и с Chrome) вы можете открыть консоль javascript и посмотреть, есть ли какие-либо ошибки: Read this article for Firefox Tools - и не забудьте проверить раздел «Веб-консоль».
  2. Отклоните свой код. Я отредактировал ваш вопрос, чтобы отразить правильный отступ. Это значительно облегчает проблемы.
  3. Ниже приведена часть кода, которая будет вызывать ошибку javascript, которая остановит все javascript от работы на странице.

код:

function addLinks() { 
    var list = $("#links"); 

    if (!list.length) {  
     list = $('<ul id="links">'); 

     for (var i = 0; i < this.group.length; i++) { 
     $('<li data-index="' + i + '"><label></label></li>').click(function() { 
      $.fancybox.jumpto($(this).data('index'));}).appendTo(list); 
     // Changed below to close the parenthesis for the .click function... 
     }); 

     list.appendTo('body'); 
    } 

    list.find('li').removeClass('active').eq(this.index).addClass('active'); 
} 
+0

Единственная ошибка в нем говорится так: TypeError: $ target.offset (...) не определено http://andrealynnwhitfield.com/#contact Line 43 – oldbroad

+0

Ошибка из Chrome: Uncaught TypeError: Не удается прочитать свойство " top 'неопределенного (индекс): 43 event.returnValue устарел. Вместо этого используйте стандартное событие event.preventDefault(). – oldbroad

+0

@oldbroad Это из-за этой строки в вашем коде: 'if (target) {', который должен читать 'if ($ target) {' –