Показать сообщение отдельно
  #2 (permalink)  
Старый 12.08.2015, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

простейшая галерея на jquery
polearmik,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
  <style type='text/css'>
    .gallery-box{
  width:600px;
  padding:25px 0 0;
  margin:0 auto;
}
.view{
  position:relative;
  margin:0 0 5px;
}
.big-image img{
  display:block;
  width:300px;
  height:150px;
}
.prev, .next{
  position:absolute;
  width:40px;
  height:40px;
}
.prev{
  bottom:20px;
  left:20px;
  background:url(http://coderpro.ru/images/images/controls.png) no-repeat 0 0;
}
.next{
  bottom:20px;
  left:250px;
  background:url(http://coderpro.ru/images/images/controls.png) no-repeat -48px 0;
}

.thumbnails{
  width:605px;
}
.thumbnails a{
  float:left;
  margin:0 5px 0 0;
}
.thumbnails a img{
  width:70px;
  height:39px;
  border: 2px solid transparent;
  display:block;
}
.thumbnails .active img{
  border-color:#069;
}
  </style>
<script>
$(function() {
    function a(c, d, a, f) {
        var e = c.length,
            b = 0;
        c.each(function(g, a) {
            $("img", a).on("click", function(e) {
                e.preventDefault();
                b = g;
                //d.src = this.src;
$(d).stop().animate({opacity: 0}, 400, function() {
         d.src = a.href; $(d).animate({opacity: 1}, 400);
});
                c.removeClass("active");
                $(a).addClass("active")
            })
        });
        a.click(function(a) {
            a.preventDefault();
            b--;
            b < 0 && (b = e - 1);
            $("img", c.eq(b)).click()
        });
        f.click(function(a) {
            a.preventDefault();
            b++;
            b %= e;
            $("img", c.eq(b)).click()
        })
    }
    $(".gallery-box").each(function(c, d) {
        a($(".thumbnails a", d), $(".big-image img", d)[0], $(".prev", d), $(".next", d))
    })
});
</script>

</head>
<body>
  <div class="gallery-box">
    <div class="view">
        <div class="big-image"><img src="http://coderpro.ru/images/images/img11.jpg" alt="image11"></div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>

    <div class="thumbnails">
        <a href="http://coderpro.ru/images/images/img11.jpg" class="active">
        <img src="http://coderpro.ru/images/images/img11.jpg" alt="image11"></a>
        <a href="http://coderpro.ru/images/images/img12.jpg"><img src="http://coderpro.ru/images/images/img12.jpg" alt="image12"></a>
        <a href="http://coderpro.ru/images/images/img13.jpg"><img src="http://coderpro.ru/images/images/img13.jpg" alt="image13"></a>
        <a href="http://coderpro.ru/images/images/img14.jpg"><img src="http://coderpro.ru/images/images/img14.jpg" alt="image14"></a>
    </div>
</div>
<div class="gallery-box">
    <div class="view">
        <div class="big-image"><img src="http://xsaxs.ru/wall/30/megapolis_vecher_neboskreby_tuman_prev.jpg" alt="image11"></div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>

    <div class="thumbnails">
        <a href="http://xsaxs.ru/wall/30/megapolis_vecher_neboskreby_tuman_prev.jpg" class="active">
            <img src="http://xsaxs.ru/wall/30/megapolis_vecher_neboskreby_tuman_prev.jpg" alt="image11"></a>
        <a href="http://www.desktophdwallpapers.eu/thumbs/hong-kong-t2.jpg"><img src="http://www.desktophdwallpapers.eu/thumbs/hong-kong-t2.jpg" alt="image12"></a>
        <a href="http://www.kartinki.me/mini/201209/7562.jpg"><img src="http://www.kartinki.me/mini/201209/7562.jpg" alt="image13"></a>
        <a href="https://im2-tub-ru.yandex.net/i?id=f089c3a82a9415434bf21a96b70fce5d&n=33&h=170"><img src="https://im2-tub-ru.yandex.net/i?id=f089c3a82a9415434bf21a96b70fce5d&n=33&h=170" alt="image14"></a>
    </div>
</div>

</body>

</html>

Последний раз редактировалось рони, 13.08.2015 в 20:47.
Ответить с цитированием