Проблемы с jQ

Здравствуйте.
Небольшая предыстория:
Решил сделать так, чтоб, на сайте, при клике на фото оно увеличивалось в том же окне.
Здесь http://jquerytools.github.io/demos/overlay/index.html нашел как это сделать.

Добавил в css файл соответствующий код. В хэдэре подключил библиотеку jQueryTools. Сама jQuery уже была подключена ранее.

В футер добавил скрипт

Код (Text):

1.  
2. <script>
3.     $("img[rel]").overlay();
4. </script>

На главной странице получился такой код

Код (Text):

1.  
2. <div id="triggers">
3. <img src="<?php echo Product::getImage($product['id']); ?>" <?php echo Product::getRel($product['id']); ?> alt=""/>
4. </div>
5. <div class="simple_overlay" <?php echo Product::getMies($product['id']); ?>><!--бокс для увеличенного фото продукта-->
6. <a class="close"></a>
7. <!-- large image -->
8. <img src="<?php echo Product::getImage($product['id']); ?>" alt="" />
9. </div><!--бокс для увеличенного фото продукта-->

Методы getRel и getMies возвращают rel="#mies" и id="mies" соответственно, с id продукта на конце.

И всё работает! Никаких нареканий.

Решаю осуществить тоже самое на странице товара.
Хэдер и футер отдельными файлами и подключены ко всем страницам сайта, так что в них не лезу. Как и в scc.

Получается такой код

Код (Text):

1.  
2. <div id="triggers">
3. <img id="largeImg" src="<?php echo Product::getImage($product['id']); ?>"
4. <?php echo Product::getRel($product['id']); ?> alt="Фото 1" />
5. </div>
6. <div class="simple_overlay" <?php echo Product::getMies($product['id']); ?>>
7. <img src="<?php echo Product::getImage($product['id']); ?>" alt="" />
8. </div>

Но он не работает! И я не могу найти проблему.
Пробовал убирать id="largeImg" и делать код абсолютно идентичным, не помогает.
Все php скрипты работают исправно.
Пощупать странички можно тут
http://test.lilisava.ru/ - главная.
http://test.lilisava.ru/product/59 - страничка товара.

 

В том то и беда...

 

Можно попробовать, но этот скрипт же от другой библиотеки зависит? Или я не правильно понимаю?
--- Добавлено ---

Я совсем новичок, я не знаю как это

 

Сделал. Всё по прежнему. Главная работает, страница товара - нет.

 

Если это console в chrome, то там тишина. Я так понимаю там что-нибудь появляется только когда есть ошибка?
--- Добавлено ---
Там есть одинаковая ошибка при загрузке обеих страниц, так что вряд ли дело в ней. Говорит что overlay not a function. После этого молчит.

 

Ок. Спасибо. Пошел читать.

 

И так, дебагер ведет себя идентично на обеих страницах.
Console выдает сначала
Uncaught TypeError: $(...).overlay is not a function
Потом
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
И в конце
XMLHttpRequest cannot load http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Но выдает все это на обеих страницах, значит дело не в этом?

 

Попробовал подключить это дело на самую простую страницу сайта. На ней кроме слайдера с фотками вообще толком ничего нет. И опять не получается... Что-то мной упущено из виду, но я не могу понять что...

 

Беда наверно как раз в том что JavaScript толком не изучен. Я читал http://anton.shevchuk.name/jquery-book/ и http://learn.javascript.ru/javascript-specials но даже не пытался писать скрипты самостоятельно. Поэтому и нашел готовый. И ладно бы его просто не получилось применить к сайту, так получилось же...
--- Добавлено ---
С HTML дело давно было, уже и не помню что читал. Освежал в памяти тут http://www.zvirec.com/html_sod.php и на http://htmlbook.ru/

 

Нашел в чем был косяк! Оказывается когда я настраивал скрипт на главной странице, он отказывался работать из внешнего файла и я прописал его прямо в том же файле, а потом еще и в footer. Теперь если я вставляю скрипт в файл страницы товара он работает.

Вопрос 1:
Почему скрипт не работает из внешнего файла?

Вопрос 2:
На странице товара, в случае если у товара две фотки, то под большим фото появляются миниатюрки, при клике на которые основное фото переключается. за это отвечает такой вот скрипт

Код (Javascript):

1. $(document).ready(function(){
2.  
3.     $(".thumbs a").click(function(){
4.  
5.         var largePath = $(this).attr("href");
6.                   var largeAlt = $(this).attr("title");
7.  
8.         $("#largeImg").attr({ src: largePath, rel: largeAlt });
9.         return false;
10.     });
11. });

Я его немного изменил чтобы помимо адреса картинки он менял и атрибут rel.
И он меняет.

В итоге код вот такой

HTML:

1.  
2. <div id="triggers">
3. <img id="largeImg" src="<?php echo Product::getImage($product['id']); ?>" rel="#mies1"/>
4. </div>
5. <div class="simple_overlay" id="mies1">
6. <img src="<?php echo Product::getImage($product['id']); ?>" alt="" />
7. </div>
8. <div class="simple_overlay" id="mies2">
9. <img src="<?php echo Product::getSecondImage($product['id']); ?>" alt="" />
10. </div>
11. </div>
12. <p class="thumbs">
13. <a href="<?php echo Product::getImage($product['id']); ?>" title="#mies1">
14. <img src="<?php echo Product::getImageThumb($product['id']); ?>">
15. </a>
16. <a href="<?php echo Product::getSecondImage($product['id']) ;?>" title="#mies2">
17. <img src="<?php echo Product::getSecondImageThumb($product['id']) ;?>">
18. </a>
19. </p>
20.  

Основное фото переключается, атрибут rel меняется с "#mies1" на "#mies2", и по логике увеличиваться должно уже второе фото. Но нет, все равно увеличивается первое. Это как то можно исправить?

 

Может быть посоветуете какой-нибудь ресурс? По отладке везде все очень поверхностно написано, мол тыкай Ctrl+Shift+I и дебагай. А подробностей ни каких...
--- Добавлено ---
Если убрать вызов из текущего файла и подключить из внешнего, то перестает работать и ругается в консоль, все как вы говорите.
Пишет Uncaught TypeError: $(...).overlay is not a function
И мне кажется странным что ссылается он при этом не на overlay.js которым я подключаю скрипт а на jquery.js
Вот еще: если я убираю из overlay.js обрамление в виде $(document).ready(function... то ошибка та же но ссылается уже на overlay.js

 

Я в общем то так и делаю. Но не знаю что делать с ошибкой. Ну вижу я ее в консоле, и что?