[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

JS Animated. Как добавить ссылки на изображения TM Слайдера

Этот урок покажет, как добавить ссылки на изображения TM Слайдера в шаблоне JS Animated (показано на шаблоне 42378, поэтому названия файлов, папок и строк у Вас могут быть другие). Если у Вашего шаблона JS Animated (анимированный с помощью
JS) есть TM Слайдер, то для того, чтоб добавить ссылки на изображения слайдера нужно

JS Animated. Как добавить ссылки на изображения TM Слайдера

  1. Зайти в папку “js” и через программу Dreamweaver открыть файл под названием script.js.
  2. Проверьте есть ли в этом файле данная строка
  3. banners:’fade’,
    

    или похожая на нее (например, banners:’fade’, и т.п.)

  4. Если нет этой строки, то добавьте ее. Получится что-то такое:
  5.  <script type="text/javascript">
    $(document).ready(function(){
    $(".works-list a.tooltips").easyTooltip();
    });
    $(function(){
    $('.slider')._TMS({
    prevBu:'.prev',
    nextBu:'.next',
    playBu:'.play',
    duration:800,
    easing:'easeOutQuad',
    preset:'diagonalFade',
    pagination:true,
    slideshow:6000,
    numStatus:false,
    pauseOnHover:false,
    banners:'fade',
    });
    })
    </script>
  6. Если строка уже там, то ничего не меняйте.
  7. Через Dreamweaver откройте .html файл, в котором находится слайдер (например, index.html). Найдите скрипт слайдера (в программе Dreamweaver в режиме Split кликните просто
    на слайдер для того, чтоб выделить код). Например:
  8. <div class="slider">
    <ul class="items">
    <li><img src="images/slide-1.jpg" alt=""></li>
    <li><img src="images/slide-2.jpg" alt=""></li>
    <li><img src="images/slide-3.jpg" alt=""></li>
    <li><img src="images/slide-4.jpg" alt=""></li>
    </ul>
    </div>
  9. Теперь добавьте туда ссылки на изображения слайдера.
  10. <div class="slider">
    <ul class="items">
    <li><img src="images/slide-1.jpg" alt=""><a href="index-1.html" class="banner"></a></li>
    <li><img src="images/slide-2.jpg" alt=""><a href="index-2.html" class="banner"></a></li>
    <li><img src="images/slide-3.jpg" alt=""><a href="index-3.html" class="banner"></a></li>
    <li><img src="images/slide-4.jpg" alt=""><a href="index-4.html" class="banner"></a></li>
    </ul>
    </div>
  11. Сохраните изменения. В папке “css” откройте файл slider.css
  12. В css добавьте ссылку на изображения слайдера.
  13. .banner {
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:1!important;
    
  14. Сохраните изображения и откройте в браузере файл .html, чтобы проверить если ли сейчас ссылки у изображений.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:

JS Animated. Как добавить ссылки на изображения TM Слайдера