Галерея изображений с контейнером Div - PullRequest
Новая
       9

Галерея изображений с контейнером Div

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

Я пытаюсь создать такую ​​галерею с помощью jquery:

enter image description here

Я хочу иметь различное фоновое изображение в каждом контейнере div, а также другое изображение (img) в каждом див.

Я также хочу, чтобы div постепенно исчезали один за другим, а также исчезали при загрузке новой страницы.

Как бы я это настроил?

1 Ответ

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

Лучше всего использовать jQuery и использовать функции fadeIn и fadeOut. Вы можете связать воедино функции fadeIn, чтобы после загрузки одна из них перешла к следующей. 

jQuery('#div1').fadeIn('slow', function() {
     jQuery('#div2').fadeIn('slow', function() { 
          //repeat for div3, div4, etc etc..
     }) 
});

Кроме того, для фоновых изображений вы просто присваиваете каждому div свой идентификатор и устанавливаете фоновые изображения с помощью CSS: 

#div1 {
  background-image: url(images/test.jpg);
  width: 100px;
  height: 100px;
  background-repeat: none;
}

Для изображений внутри div, просто поместите их, используя HTML: 

<div id="div1">
    <img src='test.jpg' width='100' height='100' alt="test" />
</div>
...