Крошечный плагин полосы прокрутки - обзорный div, несмотря на фиксированную ширину - PullRequest
Новая
       19

Крошечный плагин полосы прокрутки - обзорный div, несмотря на фиксированную ширину

0 голосов
/ 21 марта 2011

Я использую плагин Tiny Scrollbar с Jquery для просмотра фотоальбомов.Работает нормально, за исключением одной проблемы с упаковкой.

Пример: http://67.23.251.125/~emelieze/test/index.php?t=collage&p=collage/Test&scroll=yes

Как вы, вероятно, видите, изображения (или, скорее, элементы div, содержащие изображения) расположены не в одной строке, они делают это только при прокрутке кправо.Overview-div имеет фиксированную ширину и высоту, но он по-прежнему переносится в viewport-div (черная граница делает это очевидным.) Ширина Overview-div рассчитывается с помощью php, поэтому помещать его в таблицу стилей нельзя.

Полоса прокрутки-div и ее содержимое выглядит следующим образом: 

<div id='scrollbar2' > 
<div class='viewport' style='height: 330px; '> 
    <div class='overview' style='width: 2560px; height: 330px; '> 

    <div class='scrollimage' style='width: 500px;'> 


   <img src='cms/album/collage/Test/blue.png'> 
   <br> 
  example 3</div>      
    <div class='scrollimage' style='width: 500px;'> 


   <img src='cms/album/collage/Test/green.png'> 
   <br> 
  example 5</div>      
    <div class='scrollimage' style='width: 500px;'> 


   <img src='cms/album/collage/Test/orange.png'> 
   <br> 
  example 1</div>      
    <div class='scrollimage' style='width: 500px;'> 


   <img src='cms/album/collage/Test/red.png'> 
   <br> 
  example 4</div>      
    <div class='scrollimage' style='width: 500px;'> 


   <img src='cms/album/collage/Test/yellow.png'> 
   <br> 
  example 2</div> 

    </div> 
    </div> 

    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div></div></div></div>

CSS: 

#scrollbar2 { margin: 0px auto 40px auto; clear: both;}  
#scrollbar2 .viewport { overflow: hidden; position: relative; }  
#scrollbar2 .overview { list-style: none; padding: 0; margin: 0; position: absolute; border: 1px solid black; overflow: hidden;}  
#scrollbar2 .scrollbar { position: relative; overflow: hidden;  margin: 0px; clear: both; height: 15px; }  
#scrollbar2 .track { background-color: #EEE; height:4px; position: relative; padding: 0px; }  
#scrollbar2 .thumb { background-color: #CCC; background-position: 100% -15px; height: 4px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0px; }  
#scrollbar2 .thumb .end{ overflow: hidden; background-position: 0 -15px; height: 13px; width: 5px;}  
#scrollbar2 .disable { display: none; }  

.scrollimage {float: left;  border: 0px solid #000; position:relative; margin:0px 10px 0px 0px;}

Внутренний заголовок: 

$(document).ready(function(){var scroll = $('#scrollbar2,.scrollbar,.small_menu,.track,.viewport');
scroll.css('width', (screen.width)/1.5  + 'px')});

$(window).bind('load',function(){

$('#scrollbar2').tinyscrollbar({ axis: 'x'});
});

Как я могу остановить обзор-div от преобразования в viewport-div?

1 Ответ

1 голос
/ 28 марта 2011

Вы должны установить для обзора тот же размер, что и для всех объединенных элементов, поэтому 5 x 500 = 2500 пикселей.Окно просмотра должно иметь фиксированный размер.он может быть динамическим, но тогда вам придется использовать метод обновления tinyscrollbar.

...