каждая картинка в главном фрейме галереи должна иметь свою ссылку - PullRequest
0 голосов
/ 09 сентября 2011

Я хочу сделать галерею с миниатюрами и основной картинной рамкой, что мне удалось сделать.Теперь я хочу связать каждую картинку с другим .html.В случае, показанном ниже, все картинки загружают c8.html при нажатии, я только хочу, чтобы c8.jpg связывался с c8.html, c7.jpg - c7.html и т. Д. Насколько я понимаю, эта проблема возникает из-за замены main-imgнапример c8.jpg с c7.jpg, и код переключается на <a href="c8.html"><img src="images/gallery/c7.jpg" id="main-img"/></a>.

Спасибо за ваше время и помощь!

Андраз

<script>
    jQuery(document).ready(function($) {
        $("#gallery li img").click(function(){
            $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
        });
    });
</script>

<div id="gallery">
  <a href="c8.html"><img src="images/gallery/c8.jpg" id="main-img"/></a>
<ul>
  <li><img src="images/gallery/thumb/c1.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c2.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c3.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c4.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c5.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c6.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c7.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c8.jpg" alt=""/></li>
</ul>

1 Ответ

0 голосов
/ 09 сентября 2011

Вам просто нужно сделать следующее в функции щелчка

$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
$('#main-img').parent().attr('href',$(this).attr('src').match(/c\d/)[0]+".html");

регулярное выражение /c\d/ будет соответствовать только до 9, если у вас больше, вам придется изменить этобит.

...