Форум

pankrat · #1 (**permalink**) 20.08.2016, 15:49

Здравствуйте!
Помогите пожалуйста решить проблему прописывания ссылки для картинки
На сайте есть слайдер картинок, на странице он выводится вот так

<div class="slider">
             <a href="http://сайт.info/"><img src="http://сайт.info/templates/movie-groovieV2/img/4546_original.jpg" alt="Img 2" /></a>
                <img src="{THEME}/img/103083_original.jpg" alt="Img 2" />
                <img src="{THEME}/img/6736_original.jpg" alt="Img 3" />
                <img src="{THEME}/img/10754_original.jpg" alt="Img 3" />
            </div>

Вот так если прописать ссылки для всех изображений то слайдер работает не корректно, появляются в смене изображений белый фон, уберешь <a href и слайдер нормально работает.

Вот такой код отвечает за сам слайдер

$(function () {
            $('.slider img:gt(0)').hide();
            setInterval(function () {
                $('.slider :first-child')
                        .fadeTo(500, 0)
                        .next('img')
                        .fadeTo(500, 1)
                        .end()
                        .stop(true, true)
                        .appendTo('.slider');
            }, 3000);
        });

рони · #2 (**permalink**) 20.08.2016, 16:04

pankrat,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 20.08.2016, 16:06

pankrat,
если вы обернули картинки, то измените селекторы в скрипте вместо img напишите a

pankrat · #4 (**permalink**) 20.08.2016, 16:09

Сообщение от рони

pankrat,
если вы обернули картинки, то измените селекторы в скрипте вместо img напишите a

.next('img') здесь нужно изменить?

Заменил, открывается первая картинка потом происходит смена не на другую картинку а на белое полотно и всё слайдер дальше не работает

рони · #5 (**permalink**) 20.08.2016, 16:20

Сообщение от pankrat

.next('img') здесь нужно изменить?

да

pankrat · #6 (**permalink**) 20.08.2016, 16:23

Сообщение от рони

да

Заменил, открывается первая картинка потом происходит смена не на другую картинку а на белое полотно и всё слайдер дальше не работает

рони · #7 (**permalink**) 20.08.2016, 16:52

pankrat,
работает! далее только css поправить.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider a{

    position: absolute;
  }
  .slider{
     width: 640px;
     height: 480px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function () {
            $('.slider a:gt(0)').hide();
            setInterval(function () {
                $('.slider a:first-child')
                        .fadeTo(500, 0)
                        .next('a')
                        .fadeTo(500, 1)
                        .end()
                        .stop(true, true)
                        .appendTo('.slider');
            }, 3000);
        });

  </script>
</head>

<body>
<div class="slider">
             <a href="http://javascript.ru/"><img src="http://www.fonstola.ru/pic/201303/640x480/fonstola.ru-91576.jpg" alt="Img 2" /></a>
             <a href="http://javascript.ru/"><img src="http://files.vividscreen.info/soft/368b834b2d1a426882a89edab24232e9/Autumn-Forest-640x480.jpg" alt="Img 2" /></a>
             <a href="http://javascript.ru/"><img src="http://www.allfons.ru/pic/201201/640x480/allfons.ru-4352.jpg" alt="Img 2" /></a>
             <a href="http://javascript.ru/"><img src="http://uvdhmao.ru/upload/iblock/a6e/a6e740a7fa90f2aae6f1ac0dcd5ec5cf.jpg" alt="Img 2" /></a>
            </div>


</body>
</html>

laimas · #8 (**permalink**) 20.08.2016, 18:25

pankrat,
и еще так:

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
     position: relative;
     width: 640px;
     height: 480px;
  }
  .slider *{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  .slider a {
    z-index: 1;
  }
  
  .slider a:first-child {
    z-index: 10;
  }
  .slider a:nth-child(2) {
    z-index: 5;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(function () {
        setInterval(function () {
            $('.slider a:first-child').fadeTo(500, 0, function() {
                $(this).appendTo('.slider').css({opacity:1});
            })
        }, 3000);
    });
  </script>
</head>

<body>
<div class="slider">
    <a href="#"><img src="http://www.fonstola.ru/pic/201303/640x480/fonstola.ru-91576.jpg" alt="Img 1" /></a>
    <a href="#"><img src="http://files.vividscreen.info/soft/368b834b2d1a426882a89edab24232e9/Autumn-Forest-640x480.jpg" alt="Img 2" /></a>
    <a href="#"><img src="http://www.allfons.ru/pic/201201/640x480/allfons.ru-4352.jpg" alt="Img 3" /></a>
    <a href="#"><img src="http://uvdhmao.ru/upload/iblock/a6e/a6e740a7fa90f2aae6f1ac0dcd5ec5cf.jpg" alt="Img 4" /></a>
</div>
</body>
</html>

рони · #9 (**permalink**) 20.08.2016, 18:28

laimas,

ещё интервал выкинуть за ненадобностью.

laimas · #10 (**permalink**) 20.08.2016, 18:33

Сообщение от рони

ещё интервал выкинуть за ненадобностью

А кто же слайдером управлять будет?

Форум

Справочник

Discord чат

Курсы javascript