проблемы с лайтбоксом jquery - PullRequest
Новая
       4

проблемы с лайтбоксом jquery

0 голосов
/ 28 ноября 2011

Я впервые играю в jquery, и нам нужно сделать простой фотоэффект.

Проблема в том, что я делаю все, что говорят учебники, но без эффекта лайтбокса.

Вот заголовок моего HTML-документа (без тегов заголовка): 

  <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />
  <script src="jquery.js" type="text/javascript"></script>
  <script src="js/assignment.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
  <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
   <script type="text/javascript">  
      $(function() {
        $("a.lightbox").lightBox();
    }) ;
      </script>

Вот мои ссылки: 

  <aside id="comment">
    <h2>The Apes!</h2>
    <span>Lead Singer</span><span>Drums</span>
    <span>Guitar</span><span>Bass</span>
        <a href="images/Bill.jpg" class="lightbox"><img src = "images/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>
        <a href="images/Ryan.jpg" class="lightbox"><img src = "images/Ryan.jpg" rel="lightbox" alt="Guitar" title="Band member 2" /></a>
        <a href="images/Kerry.jpg" class="lightbox"><img src = "images/Kerry.jpg" rel="lightbox" alt="Drums" title="Band member 3" /></a>
        <a href="images/Bob.jpg" class="lightbox"><img src = "images/Bob.jpg" rel="lightbox" alt="Bass" title="Band member 4" /></a>
        </aside>

Чего мне не хватает? Как я понимаю, я даю ссылку на фотографию (ссылка на изображение Билла - полный размер) и ссылку, которая является той же фотографией, уменьшенной в моем CSS.

Aaarrgh.

1 Ответ

0 голосов
/ 16 марта 2012

Если вы где-то не уменьшаете версию миниатюр в CSS, ваши img src и hrefs указывают на одни и те же изображения. Лайтбокс не увеличивает размер изображения, он просто отображает его. Если вам нравится использовать одни и те же имена изображений (я делаю), поместите меньшие изображения в другую папку, чем большие.

Пример: 

`<a href="images/large/Bill.jpg" class="lightbox"><img src = "images/thumbs/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>`
...