Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2016, 23:30
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Slider on click
Здравствуйте, есть такой код. Не могу сделать так, чтобы слайдер запускался только когда я нажимаю на ссылку.
Ссылка - якорь, т.е я хочу чтобы совершался переход, а потом включался слайдер, а не автоматически при заходе на страницу.
$(document).ready(function(){
  $('#ar').click(function(){
    $('#apple_slider').cycle({
    fx:      'scrollLeft',
    speed:    2000,
    timeout:  2000
  }).toggle("normal");
  });
});
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2016, 00:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Artem_A, документация по плагину и макет где?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<title>Slider</title>
<style>
.wrapper {
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid #f00;
    width: 200px;
    height: 100px;
}
.wrapper ul {
    margin:0px;
    padding:0px
}
.slider {
    display: block;
    width:100%;
    height:100%;
}

.imageClass {
    width: 100%;
	height: 100%;
}
#ar{
  margin-top: 2000px;
}

</style>
<script>
(function ($) {
    $.fn.scrollTo = function (speed, easing, callback) {
        $('body, html').animate({
            scrollTop: this.offset().top
        }, speed, easing, callback);
        return this;
    };
}(jQuery));
$(function () {
var effects = "blindX,blindY,blindZ,cover,curtainX,curtainY,fade,fadeZoom,growX,growY,none,scrollUp,\
scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,\
turnUp,turnDown,turnLeft,turnRight,uncover,wipe,zoom".split(',');
var len = Math.floor(Math.random()*effects.length)
var slider = $('.slider').cycle({
            fx: effects[len],
            speed: 'slow',
            timeout: 1000
        }).cycle('pause');

$('a').on({click : function(event) {
event.preventDefault();
var id = $(this).attr('href')
$(id).scrollTo(1000, 'swing',function() {
   $('.slider').cycle('resume')
})
}})
});



</script>
</head>
<body>
<a href="#ar">go</a>
<div class="wrapper" id="ar">

             <ul class="slider">
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img1.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img2.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img3.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img4.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img5.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img6.jpg"/></li>
             </ul>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2016, 00:40
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

рони,
Документацию не нашел, за макет сорри
я думал все намного проще)
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2016, 00:42
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

рони,
Я еще не разбираюсь просто совсем, потому код почти как иероглифы
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2016, 00:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Artem_A,
http://jquerylist.ru/image-viewer/cycle.html
http://malsup.com/jquery/cycle/options.html

новая версия
https://github.com/malsup/cycle2
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2016, 00:45
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

рони,
<nav id="header_menu">
        <a href="#" class="active">Hello</a>
        <a href="#ar">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Team</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </nav>


<div class="about_us_slider">
          <div id="apple_slider">
            <img src="./img/main/about_us/slider/1.png" class="picture_slider_size1" alt="">
            <img src="./img/main/about_us/slider/2.png" class="picture_slider_size2"alt="">
            <img src="./img/main/about_us/slider/3.png" class="picture_slider_size3" alt="">
          </div>
        </div>
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2016, 00:45
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

рони,
нужно просто чтобы именно от #ar скакал
Ответить с цитированием
  #8 (permalink)  
Старый 21.01.2016, 01:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Artem_A,

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<title>Slider</title>
<style>
.wrapper {
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid #f00;
    width: 200px;
    height: 100px;
}
.wrapper ul {
    margin:0px;
    padding:0px
}
.slider {
    display: block;
    width:100%;
    height:100%;
}

.imageClass {
    width: 100%;
	height: 100%;
}
.about_us_slider{
  margin-top: 2000px;
}

</style>
<script>
(function ($) {
    $.fn.scrollTo = function (speed, easing, callback) {
        $('body, html').animate({
            scrollTop: this.offset().top
        }, speed, easing, callback);
        return this;
    };
}(jQuery));
$(function () {
var slider = $('#apple_slider').cycle({
    fx:      'scrollLeft',
    speed:    2000,
    timeout:  2000
        }).cycle('pause');

$('[href="#ar"]').on({click : function(event) {
event.preventDefault();
$('.about_us_slider').scrollTo(1000, 'swing',function() {
   slider.cycle('resume')
})
}})
});



</script>
</head>
<body>
<nav id="header_menu">
        <a href="#" class="active">Hello</a>
        <a href="#ar">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Team</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </nav>

<div class="about_us_slider  wrapper" >

             <ul id="apple_slider">
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img1.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img2.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img3.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img4.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img5.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img6.jpg"/></li>
             </ul>
</div>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 21.01.2016, 01:39
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

рони,
Вы гений!!! Спасибо большое!!!
все работает как надо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
draggable (запрет click для родителей компонента) khusamov ExtJS 5 13.04.2015 11:45
jQuery UI Slider Mcqueen jQuery 2 03.10.2013 00:48
jQuery UI Slider изменяет ширину ползунка SkaN2412 jQuery 1 26.11.2012 13:03
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58
Как Убрать Click here if you have Flash Player 6 ? rentey Общие вопросы Javascript 3 19.03.2010 17:48