Застрял в поведении галереи миниатюр jQuery - PullRequest
Новая
       7

Застрял в поведении галереи миниатюр jQuery

0 голосов
/ 09 января 2011

Я пытаюсь создать простой просмотрщик миниатюр с помощью jQuery.Вот код: 

        $(function(){
        $("ul.thumbnails li").click(function(e){
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
        });

        <div class="image-gallery">

    <img class="featured" src="big.jpg">

    <ul class="thumbnails">

    <li id="thumb01">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
    <li id="thumb02">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
    <li id="thumb03">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
</ul>

.thumbnails li {
margin: 0;
padding: 5px 5px 0 5px;
list-style: none;
float: left;
overflow: hidden;
}

thumbnails li img {
width: 50px;
height: 50px;
margin: 0;
padding: 0;
float: left;
}

Если я нажму на миниатюру, браузер сразу перейдет к полному изображению, а не просто поменяет img src на jQuery.Но я, если щелкну где-нибудь внутри <li>, это сработает.

Я знаю, что это должно быть просто, но я не знаю, где я иду не так.Я пытался изучить другие галереи, такие как http://www.sohtanaka.com/web-design/examples/image-rotator/, но не смог найти то, что мне не хватает.

Я действительно мог бы использовать некоторую помощь от вас, ребята:)

Ответы [ 2 ]

2 голосов
/ 09 января 2011

Это происходит потому, что вам нужно запретить браузеру переходить к изображению при переходе по ссылкам. Вы можете сделать это, используя функции protectDefault, которые останавливают текущее действие события. В этом случае «нажмите». 

  $(function(){
     $("ul.thumbnails li").click(function(e){
     var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
     var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
     $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)

     e.preventDefault(); //Stop browser default behaviour 

  });
1 голос
/ 10 января 2011

После установки нового источника убедитесь, что функция щелчка return false; предотвращает поведение браузера по умолчанию.

...