| |
|
|
| | Здравствуйте.
Извиняюсь, если обнаглел.
Подскажите, пожалуйста, как в данном случае сделать вертикальный скролл.
Вот так всё работает;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="http://www.peredovik.net/bitrix/templates/main/template_styles.css">
<script src="http://www.peredovik.net/js/jquery.js" type="text/javascript"></script>
<script src="http://www.peredovik.net/js/mousewheel.js" type="text/javascript"></script>
<script src="http://www.peredovik.net/js/scrollable.js" type="text/javascript"></script>
</head>
<body>
<style>
#galery {padding:12px; padding-left:0px}
#galery div {float:left;}
#scrollable { width:100%; }
DIV.items { height:444px; }
</style>
<table><tr>
<td valign="top" height="140" id="galery">
<DIV id="scrollable">
<div class="i12 prev"><a href="javascript:void(null)"><img src="http://www.peredovik.net/images/StrTop.gif" border="0" /></a></div>
<DIV class="items">
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/d2a/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/d2a/99_131_1/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/018/018fe76a0ea4b7c9e489284257681c46.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/018/99_131_1/018fe76a0ea4b7c9e489284257681c46.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/edb/edb28ccab29464cf1c42e02e9dbf6b96.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/edb/99_131_1/edb28ccab29464cf1c42e02e9dbf6b96.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/d2a/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/d2a/99_131_1/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/018/018fe76a0ea4b7c9e489284257681c46.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/018/99_131_1/018fe76a0ea4b7c9e489284257681c46.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/edb/edb28ccab29464cf1c42e02e9dbf6b96.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/edb/99_131_1/edb28ccab29464cf1c42e02e9dbf6b96.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/d2a/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/d2a/99_131_1/d2a7673e64a6e718fe4b8ed3c3e3f74a.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/018/018fe76a0ea4b7c9e489284257681c46.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/018/99_131_1/018fe76a0ea4b7c9e489284257681c46.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
<div class="i13"><div class="i14 catalog-detail-image"><table cellpadding="0" cellspacing="0"><tr><td height="131" width="99" align="center"><a rel="catalog-detail-images" href="http://www.peredovik.net/upload/iblock/edb/edb28ccab29464cf1c42e02e9dbf6b96.jpg" title="Стул складной"><img border="0" src="http://www.peredovik.net/upload/resize_cache/iblock/edb/99_131_1/edb28ccab29464cf1c42e02e9dbf6b96.jpg" alt="Стул складной" /></a></td></tr></table></div></div>
</DIV>
<div class="i15 next"><a href="javascript:void(null)"><img src="http://www.peredovik.net/images/StrBottom.gif" border="0" /></a></div>
</DIV>
<SCRIPT type=text/javascript>$(function() { $("#scrollable").scrollable({horizontal:true}); });</SCRIPT>
</td>
</tr>
</table>
|
Но это горизонтальный.
Если убираем:
#galery div {float:left;}
|
то верстка для вертикального... Но она не работает...
Можно ли как-то поправить scrollable.js для вертикального варианта?
Или стоит поискать какие-то другие решения (библиотеки)? | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(17.08.2011 в 19:08)
| | | читайте описание плагина.
настройки вот этой строчкой задаются
<SCRIPT type=text/javascript>$(function() { $("#scrollable").scrollable({horizontal:true}); });</SCRIPT>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.08.2011 в 19:42)
| | | Спасибо, разобрался. | |
| |
|
|
