Форум

gpg10 · #1 (**permalink**) 12.03.2014, 13:23

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrollable.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>

<style>
.scrollable {
position:relative;
overflow:hidden;
width: 660px;
height:90px;
}

.scrollable .items {
width:20000em;
position:absolute;
}

.items div {
float:left;
}
</style>

</head>

<body>

<div style="margin:0 auto; width: 634px; height:120px;">

<a class="prev browse left"></a>


<div class="scrollable" id="scrollable">


<div class="items">


<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
</div>


<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>


<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
</div>

</div>

</div>


<a class="next browse right"></a>
</div>

<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
</script>

</body>
</html>

рони · #2 (**permalink**) 12.03.2014, 14:35

gpg10,
сделайте пример с рабочими ссылками на скрипты и
Пожалуйста, отформатируйте свой код!

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

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

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

gpg10 · #3 (**permalink**) 12.03.2014, 16:06

<style>
.scrollable {
position:relative;
overflow:hidden;
width: 660px;
height:90px;
}

.scrollable .items {
width:20000em;
position:absolute;
}

.items div {
float:left;
}
</style>

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrollable.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>



</head>

<body>

<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">

<!-- root element for the items -->
<div class="items">

<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
</div>

<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>

<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
</div>

</div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div>

</body>
</html>

<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
</script>

рони · #4 (**permalink**) 12.03.2014, 16:20

gpg10,
ок уже лучше, но можно было прежнее сообщение отредактировать ... но хотелось бы так как ниже с полными путями ... в jquery тут особой необходимости нет ... всё работает, кроме скролинга колёсиком мышки в ие ... но это вопрос к создателям плагина

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css"
      href="http://jquerytools.org/media/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css"
      href="http://jquerytools.org/media/css/scrollable-buttons.css" />
<style type="text/css">
/* стиль для видимой части скроллера */
.scrollable {
    position: relative;
    overflow: hidden;
    width: 416px;
    height: 120px;
}

/* стиль враппера со всеми элементами */
.scrollable .items {
    width: 20000em;
    position: absolute;
}

</style>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script> -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
   $(function() {
  // initialize scrollable
  $(".scrollable").scrollable({circular: true,mousewheel: true});
});
</script>

</head>

<body>
 <div style="margin:0 auto; width: 500px; height:122px; background-color: #F4A460">
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">

  <!-- root element for the items -->
  <div class="items">

    <!-- 1-5 -->
    <div>
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
      <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
      <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
    </div>

    <!-- 5-10 -->
    <div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>

    <!-- 10-15 -->
    <div>
      <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
      <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
      <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
      <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
    </div>

  </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div>
</body>

</html>

gpg10 · #5 (**permalink**) 12.03.2014, 16:26

тоесть ошибка была в том, что я не указал параметры в scrollable({circular: true,mousewheel: true});
?

рони · #6 (**permalink**) 12.03.2014, 17:01

gpg10,
я незнаю про вашу ошибку ничего -- нет кода того, что вы использовали -- могу только предполагать что у вас старая версия scrollable для которой нужно старое jquery - сейчас этот плагин входит в состав библиотеки jquery.tools и работет даже без jquery -- подробнее тут http://jquerytools.org/

gpg10 · #7 (**permalink**) 12.03.2014, 17:47

Спасибо )

Форум

Справочник

Discord чат

Курсы javascript