Галерея изображений Горизонтальная прокрутка с помощью Divs

В настоящее время я пытаюсь создать галерею изображений, где пользователь может прокручивать изображения для каждой страницы по горизонтали (влево-вправо, поскольку это предназначено для мобильных телефонов и планшетов). Я не могу понять, где я ошибся, у кого есть идея?Галерея изображений Горизонтальная прокрутка с помощью Divs

Мой код находится на http://jsfiddle.net/8tDYk/

CSS:

.media{ 
    width: 100%; 
    height: 288px; 
    float: left; 
    display: inline-block; 
    overflow-x: auto; 
    -ms-overflow-x: auto; 
    overflow-y: hidden; 
    -ms-overflow-y: hidden; 
    white-space: nowrap; 
} 

.image{ 
    float: left; 
    height: 240px; 
    width: 75%; 
    margin: 3.2%; 
    text-align:center; 
    border: 7px solid white; 
}

HTML:

<div class="media"> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
    </div> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
    </div> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
    </div>  
</div>

источник

2013-08-23 Tom

Если элемент имеет float:left;, он будет позиционироваться справа от предыдущего элемента (если есть место) В противном случае элемент будет позиционировать себя на линии под ним.

Вы можете увидеть это, когда вы устанавливаете overflow-y: visible; на .media

Одним из способов предотвращения этого не происходит, чтобы сделать дополнительный внутренний DIV, в котором вы установите ширину явно (Javascript большая помощь там), как это:

<div class="media"> 
    <div class="imageContainer"> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
    </div> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
     </div> 
     <div class="image"> 
      <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a> 
     </div> 
    </div> 
</div>

затем можно использовать JQuery, чтобы установить ширину imageContainer так:

<script type="text/javascript"> 
    var imageWidth = 240; 
    $(document.ready() 
    { 
    $(".imageContainer").width($(".image").length*imageWidth); 
    }); 
</script>

:: UPDATE ::

Работа jsfiddle here

источник

2013-08-23 10:32:46

Кроме того, вы можете использовать некоторый javascript, чтобы заставить прокрутку работать больше, как вы ожидали бы от жестов салфетки. –

И javascript здесь добавит дополнительную ширину на изображение? Я правильно понял? : P – Tom

Это правильно :) –

Вот Fiddle

в вашей .image ширины набора классов в пикселях, как

.image 
{ 
    width: 400px; 
    ..... 
}

источник

2013-08-23 10:28:24

Но я не знаю, сколько изображений будет, может быть 1, и это может быть 104. Нет ли способ автоматически настроить этот ? – Tom

Проблема в вашем .media элемент, он устанавливается на 100%, так как переполнение-х будет work.Check этот fiddle. В соответствии с этим контент, который вы хотите прокрутить, находится в другом div, имеющем другой стиль. Разметка

<div class='scroll'> 
<div class="media"> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a> 
    </div> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a> 
    </div> 
    <div class="image"> 
     <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a> 
    </div>  
    </div></div>

CSS-это

.media 
{ 
width: 100%; 
height: 288px; 
float: left; 
display: inline-block; 
overflow-x: auto; 
-ms-overflow-x: auto; 
overflow-y: hidden; 
-ms-overflow-y: hidden; 
white-space: nowrap; 
} 

    .image 
    { 
    float: left; 
    height: 240px; 
    width: 75%; 
    margin: 3.2%; 
    text-align:center; 
    border: 7px solid white; 
    }

источник

2013-08-23 10:38:07

Галерея изображений Горизонтальная прокрутка с помощью Divs

ответ

Смежные вопросы