ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Галерея в виде стопки фотографий

Сообщений 1 страница 10 из 26

1

Галерея в виде стопки фотографий

Скриншот
https://forumupload.ru/uploads/0007/e3/f7/57152-1.jpg

Демо
[html]<br><br><br>
<div id="slideShowContainer">
    <div id="slideShow">
    <div id="pictures">
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-2.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-3.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-4.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-5.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64526-1.png" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64526-2.png" alt="" />

    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div>
<script>
$(document).ready(function() {
  var z = 0;
  var inAnimation = false;
  $('#pictures img').each(function() {
    z++;
    $(this).css('z-index', z);
    });
  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;
    var processZindex, direction, newZindex, inDeCrease;
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =

1; }
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
  $('#pictures img').each(function() {
    if($(this).css('z-index') == processZindex) {
       $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',

function() {
       $(this).css('z-index', newZindex)
        .animate({ 'top' : '0' }, 'slow', function() {
           inAnimation = false;
            });
         });
       }
    else {
       $(this).animate({ 'top' : '0' }, 'slow', function() {                     
         $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
          });
       }

    });
    return false;
   }
   $('#previousLink').click(function() {
    return swapFirstLast(false);
   });
   $('#nextLink').click(function() {
    return swapFirstLast(true);
   });
});
</script>
<style type="text/css">
/* Стили для слайдшоу */
#slideShowContainer{
width:310px;
height:310px;
position:relative;
margin-left:50px;
}
#slideShow{
position:absolute;
height:250px;
width:300px;
background-color:#fff;
margin:8px 0 0 6px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 408px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('https://forumupload.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{
left:-38px;
}
#previousLink:hover{
background-position:bottom left;
}
a#nextLink{
right:-38px;
background-position:top right;
}
#nextLink:hover{
background-position:bottom right;
}
</style>[/html]

Код

html

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - ваши картинки.

JS (в низ)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

и если у вас еще не подключена библиотека jQ ставьте это:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

CSS (в верх)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Настройка
Содержимое (картинки-фотки) вы ставите в html-код.
остальная настройка (ширина, высота и т.п.) происходит через css

https://forumupload.ru/uploads/0007/e3/f7/64541-1.png

Общий стиль всего контейнера (отмечен красным)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - шарина
синее - высота
зеленое - отступы от краев элемента, в который он вставлен

стиль контейнера с картинками (отмечено зеленым)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - высота
синее - ширина
зеленое - фон
розовое - отступы
жирным отмечен стиль тени

Стиль картинок (отмечено розовым)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - высота
синее - отступы

Стиль (стрелок) кнопок (отмечено синим)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - картинка кнопок
синее - позиции кнопок

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+6

2

Спасиба. Долго искала такой скрипт

0

3

А можно для каждой фотографии добавить текст?

0

4

Герда написал(а):

<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />

В эту строчку попробуйте добавить это:

Герда написал(а):

<img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />

При наведении на изображение должно выводиться описание (ТЕКСТ).

0

5

faiko
Спасиб!

0

6

faiko
Должно, но не выводится(

0

7

Anto, попробуйте так. Только картинки смените.

Код:
<div id="slideShowContainer">
    <div id="slideShow">
    <div id="pictures">
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    <img src="https://forumupload.ru/uploads/0007/e3/f7/64525-1.png" title="ТЕКСТ" alt="" />
    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div>

0

8

Jii-Jo
упорно ничего не изменяется. текст отображается у вас?

0

9

Anto
у меня - да. Попробуйте через другой браузер посмотреть. Что-бы понять, в браузере дело или нет, зайдите на мой тест и подождите секунду-вторую, потом появится "ТЕКСТ"
http://jiijocwnewlive.mybb.ru/

+1

10

Jii-Jo
да, действительно браузер. спасибо за помощь)

0