Реализация плагина prettyPhoto jQuery - PullRequest
Новая
       6

Реализация плагина prettyPhoto jQuery

1 голос
/ 15 августа 2011

Я пытаюсь реализовать плагин prettyPhoto jQuery на этой веб-странице.

http://mcmach.com/mcmachine/photogallery.html

Я хочу использовать опцию одиночного изображения и установить rel="prettyPhoto" для ссылок на изображения. Я новичок в jQuery и новичок в JavaScript. Любой совет будет принят во внимание.

Ответы [ 2 ]

11 голосов
/ 15 августа 2011

Вот некоторые большие проблемы, которые я нашел на вашей странице ...

В разделе <head> у вас есть это ... 

<script type="text/jscript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/jscript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.4.4.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.6.1.min.js"></script>

Первая проблема: Вы включили prettyPhoto перед jQuery.Вам нужно будет "включить" jQuery до любых плагинов jQuery.

Вторая проблема: Вы включаете три версии jQuery.Вы не можете «включать» более одной версии или экземпляра jQuery.По какой-то причине вы включаете и загружаете версии 1.3.2, 1.4.4 и 1.6.1.Просто используйте последнюю версию.

Третья проблема: Вы не вызываете prettyPhoto.После того, как вы «включите» плагин, вам нужно будет вызвать его с помощью JavaScript.

Все должно выглядеть примерно так ... 

<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('a[rel^="prettyPhoto"]').prettyPhoto({
            // any configuration options as per the online documentation.
        });
    });
</script>

Sidenote: Для наиболее эффективной загрузки страницы прочитайте мой ответ в этой теме о размещении ваших включений JavaScript в конце раздела <body> чуть выше тега </body>.

CSS: Вам также не хватает ссылки на файл CSS для prettyPhoto.Это должно быть в разделе <head> вашей страницы. 

<link rel="stylesheet" type="text/css"  href="/path/to/prettyPhoto.css" media="screen" />

Ваш HTML: 

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
0 голосов
/ 15 августа 2011

Это прямо из документации к этому плагину: 

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
...