Понедельник, 18.06.2018, 01:21
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
  • Популярное казино Вулкан в интернете
  • Как научиться получать прибыль
  • О причинах популярности бесплатных порталов объявлений
  • Значение цветов в жизни человека
  • Поддержка PHP и MySQL: особенности и возможности
  • Как поступить за границу и что для этого надо?
  • Разработка веб-сайтов. Как создать собственный веб-сайт?
  • Новые слоты в онлайн казино
  • В чем основные преимущества городских рюкзаков для мужчин
  • Разработка сайтов в интернете
  • Разработка сайта
  • Что влияет на стоимость сайта?
  • Как самостоятельно создать блог без усилий
  • Как добавить карту сайта в Wordpress
  • В чем заключается SEO-продвижение сайта?
  • Продвижение ссылками – будет ли работать в 2015 году?
  • Программы обработки, сравнения и анализа прайсов
  • Комплексное продвижение сайта как основа репутационного маркетинга
  • У кого заказывать разработку сайта
  • Как создать интернет-магазин?
  • Наш опрос
    Каким EMAIL Вы пользуетесь?


    Всего ответов: 291

    установить такой вид опроса
    Статистика
    Яндекс.Метрика
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0


    Зарегистрировано 30611 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1128 материала(ов), Оставлено 5134 комментариев, На форуме создано тем и ответов.

    установить такую статистику

    Блок CW результаты

    Победы
    Победы(10)

    Поражения
    Поражения(5)


    Установить CW блок на свой сайт
    Внимание!
    Наш сайт адаптирован под браузер Mozilla Firefox
    скрипты для uCoz
    Скачать/Download
    В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Музыкальный шаблон
    eddison написал:
    doe it use file catalog or forum?
    Новость: Что такое деревопласт? Приобретение забора из деревопласта?
    написал:
    Интересный материал для строительства, даже не слышал о таком. smile
    Новость: Мини-кабинет личного профиля сайта uCoz как на CSL.lv
    Игорь написал:
    Добрый день
    Есть ли сейчас какой-то функционал,на основе которого можно сделать подобие личного кабинета пользователя со статистикой?
    Нужен минимум, как пример:
    http://joxi.ru/82Q9JP6t1EaRg2 - главная страница
    http://joxi.ru/Q2K9kPNt9Y6WQr - форма регистрации
    http://joxi.ru/n2Y9pP3tj31n42 - меню пользователя простейшее
    Через какие инструменты можно будет создать подобное?

    Читать все комментарии
    Топ комментаторов

    установить такой информер
    VKONTAKTE

    FACEBOOK
    Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [25.10.2013, 16:58]

    Фото-слайдер книжка-аккордеон на uCoz

    Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

    Очередная уникальная адаптация различных классных готовых решений для uCoz сайтов от Apocalypse и на этот раз это удивительно красивый фото-слайдер книжка-аккордеон для сайта бесплатного хостинга uCoz, который сделан исключительно на CSS 3 и HTML кодах без использования каких-либо скриптов. Очень полезная штука, при правильном подходе сможет украсить любой сайт и привлечь большее количество пользователей.

    При нажатие на одну из картинок в этом слайдере - она плавко открывается, как бы листая книжку. Очень красиво и прикольно. Смотрится отлично.

    Не забудьте сменить в коде Ссылка на картинку на саму ссылку на картинку в слайдере.

    Установка:

    В самый низ вашего css вставляйте:


    figure {
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    }

    .ia-container {
    width: 685px;
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
    border: 7px solid rgba(255, 255, 255, 0.6);
    }
    .ia-container figure {
    position: absolute;
    top: 0;
    left: 50px;
    /* width of visible piece */
    width: 335px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    .ia-container > figure {
    position: relative;
    left: 0 !important;
    }
    .ia-container img {
    display: block;
    width: 100%;
    }
    .ia-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    /* just cover visible part */
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 100;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }
    .ia-container input:checked {
    width: 5px;
    left: auto;
    right: 0px;
    }
    .ia-container input:checked ~ figure {
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    left: 335px;
    }
    .ia-container figcaption {
    width: 100%;
    height: 100%;
    background: rgba(87, 73, 81, 0.1);
    position: absolute;
    top: 0px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    }
    .ia-container figcaption span {
    position: absolute;
    top: 40%;
    margin-top: -30px;
    right: 20px;
    left: 20px;
    overflow: hidden;
    text-align: center;
    background: rgba(87, 73, 81, 0.3);
    line-height: 20px;
    font-size: 18px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
    .ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption {
    background: rgba(87, 73, 81, 0);
    }
    .ia-container input:checked + figcaption span {
    -webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
    opacity: 1;
    top: 50%;
    }
    .ia-container #ia-selector-last:checked + figcaption span {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
    }
    .ia-container input:hover + figcaption {
    background: rgba(87, 73, 81, 0.03);
    }
    .ia-container input:checked ~ figure input {
    z-index: 1;
    }
    @media screen and (max-width: 720px) {
    .ia-container {
    width: 540px;
    }
    .ia-container figure {
    left: 40px;
    width: 260px;
    }
    .ia-container input {
    width: 40px;
    }
    .ia-container input:checked ~ figure {
    left: 260px;
    }
    .ia-container figcaption span {
    font-size: 16px;
    }
    }
    @media screen and (max-width: 520px) {
    .ia-container {
    width: 320px;
    }
    .ia-container figure {
    left: 20px;
    width: 180px;
    }
    .ia-container input {
    width: 20px;
    }
    .ia-container input:checked ~ figure {
    left: 180px;
    }
    .ia-container figcaption span {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 10px;
    margin-top: -20px;
    }
    }

     


    В то место, где должен быть слайдер, вставляйте:

     


    <section class="main">
    <div class="ia-container">
    <figure>
    <img src="Ссылка на картинку" alt="image01" />
    <input type="radio" name="radio-set" checked="checked" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image02" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image03" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image04" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image05" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image06" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image07" />
    <input type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    <figure>
    <img src="Ссылка на картинку" alt="image08" />
    <input id="ia-selector-last" type="radio" name="radio-set" />
    <figcaption><span>Заголовок</span>

    </figcaption>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </div>
    <!-- ia-container -->
    </section>


    При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Фото-слайдер книжка-аккордеон на uCoz



    Расскажи друзьям интересные новости:


    - Установить на свой сайт блок социальных закладок
    Категория: HTML коды для uCoz | Добавил: scripts_for_ucoz | Теги: фото, Аккордеон, слайдер, книжка
    Просмотров: 6156 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
    Всего комментариев: 1
    1 kopna   (25.02.2014 12:34)
    Установил. Слайдер не работает. При нажатии на фото - никакой реакции.

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Для добавления необходима авторизация

    Хостинг от uCoz