Jump to content

Report

  • Similar Content

    • By GstarMax
      Здравствуйте
      Сделал небольшой слайдер.
      Изначально кликая на миниатюры картинок, слайды переключаются. Но если пролистать полный круг и кликнуть на миниатюру, то слайды перестают переключаться, а происходит переход по ссылке.
      Как это можно исправить? В какую сторону смотреть?
      Сам слайдер залил на filestore.com.ua
      JQuery такой


      $(document).ready(function(){
      var l;

      /* меняет слайды при клике на кружечки */
      $("#nomer a").click(function(eventObject){
      l=$(this).attr("href");
      $(".active").removeClass();
      $(this).attr("class","active");
      $("#big").hide().attr("src",l).fadeIn(250);
      $(".bighref").attr("href", $(this).attr("rel"));
      eventObject.preventDefault();
      });

      /* меняет слайды при клике на миниатюры */
      $(".a-carousel-image-link img").click(function(eventObject){
      l=$(this).attr("src");
      $(".active").removeClass();
      $("#big").hide().attr("src",l).fadeIn(250);
      $(".bighref").attr("href", $(this).attr("rel"));
      eventObject.preventDefault();
      return false;
      });

      /* гортает миниатюры вверх */
      $(".b-carousel-button-down").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
      $(".h-carousel-items").animate({top: "-184px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
      setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
      $(".h-carousel-items .a-carousel-image-link").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
      $(".h-carousel-items .a-carousel-image-link").eq(0).remove(); // удаляем первый элемент карусели
      $(".h-carousel-items").css({"top":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
      }, 300);
      });

      /* гортает миниатюры вниз */
      $(".b-carousel-button-up").click(function(eventObject){ // при клике на левую кнопку выполняем следующую функцию:
      $(".h-carousel-items .a-carousel-image-link").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
      $(".h-carousel-items").css({"top":"-184px"}); // устанавливаем смещение набора -222px
      $(".h-carousel-items").animate({top: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
      $(".h-carousel-items .a-carousel-image-link").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
      });
      });

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy