Понедельник, 18.02.2019, 19:48
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
  • Современные казино онлайн. Как можно выигрывать деньги?
  • Последние новости Новгорода
  • Hовости Свердловской области
  • Марш Материнского Гнева. Московские начинания дошли и до Питера
  • Яркое онлайн казино для незабываемых эмоций
  • Азбука денег. Что мешает Вам иметь денег столько, сколько Вам хочется?
  • Сумки стильные сегодня и сейчас
  • Как выбрать качественный браузер?
  • Современные игры в интернете. Как играть в казино гральні-автомати.укр ?
  • Качественный софт от компании InBet по доступным ценам
  • Разработка сайта
  • Что влияет на стоимость сайта?
  • Как самостоятельно создать блог без усилий
  • Как добавить карту сайта в Wordpress
  • В чем заключается SEO-продвижение сайта?
  • Продвижение ссылками – будет ли работать в 2015 году?
  • Программы обработки, сравнения и анализа прайсов
  • Комплексное продвижение сайта как основа репутационного маркетинга
  • У кого заказывать разработку сайта
  • Как создать интернет-магазин?
  • Наш опрос
    Нужны ли опросы на сайте?


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

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


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

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

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

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

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


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

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Игровые автоматы Вулкан казино онлайн бесплатно
    написал:
    http://volpavsen.usite.pro/
    Новость: Контент в uLightbox uCoz + стили CSS для uCoz
    Сергей Пахомов написал:
    Можете подсказать а как в приведённый CSS добавить border-radius
    Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
    Aleksandrs написал:
    ну кто уже получает посетителей для своего сайта? у кого сколько кредитов?
    Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
    написал:
    Еще можно такой вариант, повторяю, только после (не удаляя $MESSAGE$)

    <br><legend><img src="http://img15.lostpic.net/2018/12/27/19e957f8a56dd9216e82c18319ba85aa.gif"</legend>
    <b><?substr($MESAGE$,0,550)?>
    <?$RELATED_ENTRIES$(8)?>
    <?substr($MESAGES$,550,50000)?></b>

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

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

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

    Слайдер изображений для Укоз сайта

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

    Сегодня Мы для Вас постарались и нашли что-то новенькое и интересное для веб-мастера? Что же это? А Мы говорим о слайдере изображений для uCoz портала, а при желание можно установить и на любую другую CMS. Так же хочу отметить, что материал был подготовлен веб-мастером Apocalypse, который уже неоднократно радовал Нас интересными решения для сайтов укоз. Более подробно чуть ниже в материале.


    Для начала посмотрите ДЕМО

    Установка:

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

    #container {
    margin-top: 40px;
    }
    #navigate {
    text-align: center;
    }
    #navigate a, span {
    position: relative;
    top: 3px;
    background: #0099cc;
    text-decoration: none;
    color: #fff;
    padding: 4px 8px 0 8px;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
    }
    #navigate a:hover {
    color: #d3d3d3;
    }
    #navigate span {
    display: none;
    color: #999;
    }
    #img_container {
    overflow: hidden;
    width: 500px;
    margin: 0 auto;
    border: 8px solid #0099cc;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    }
    #img_box {
    position: relative;
    width: 3000px;
    margin: 0;
    }
    #img_box img {
    float: left;
    }
    #imgthumb_box {
    text-align: center;
    }
    #imgthumb_box a {
    margin-left: 4px;
    }
    #imgthumb_box a img {
    border: 6px solid #e3e3e3;
    position: relative;
    top: 10px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    }
    #imgthumb_box a img:hover {
    border-color: #666;
    }

    Следующий код вставляйте после < /head >:
    <script>
    $(document).ready(function () {
    var total = $("#img_box img").length;

    $("#imglink1 img").css({
    "border-color": "#0099cc",
    "top": "-5px"
    });

    $(".thumblink").click(function () {
    var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
    var move = -($("#img" + imgnumber).width() * (imgnumber - 1));

    $("#img_box").animate({
    left: move
    }, 500);

    $("#imgthumb_box").find("img").removeAttr("style");
    $(this).find("img").css({
    "border-color": "#0099cc",
    "top": "-5px",
    "border-top-width": "-5px"
    });
    return false;
    });

    $("#navigate a").click(function () {
    var imgwidth = $("#img1").width();
    var box_left = $("#img_box").css("left");
    var el_id = $(this).attr("id");
    var move, imgnumber;

    if (box_left == 'auto') {
    box_left = 0;
    } else {
    box_left = parseInt(box_left.replace("px", ""));
    }

    // if prev
    if (el_id == 'linkprev') {
    if ((box_left - imgwidth) == -(imgwidth)) {
    move = -(imgwidth * (total - 1));
    } else {
    move = box_left + imgwidth;
    }

    imgnumber = -(box_left / imgwidth);
    if (imgnumber == 0) {
    imgnumber = total;
    }
    } else if (el_id == 'linknext') {
    // if in the last image, move to first
    if (-(box_left) == (imgwidth * (total - 1))) {
    move = 0;
    } else {
    move = box_left - imgwidth;
    }

    imgnumber = Math.abs((box_left / imgwidth)) + 2;
    if (imgnumber == (total + 1)) {
    imgnumber = 1;
    }
    } else if (el_id == 'linkfirst') {
    move = 0;
    imgnumber = 1;
    } else if (el_id == 'linklast') {
    move = -(imgwidth * (total - 1));
    imgnumber = total;
    }

    // styling selected image
    $("#imgthumb_box").find("img").removeAttr("style");
    $("#imglink" + imgnumber).find("img").css({
    "border-color": "#0099cc",
    "top": "-5px",
    "border-top-width": "-5px"
    });

    $("#navigate a").hide();
    $("#navigate span").show();

    $("#img_box").animate({
    left: move + 'px'
    }, 400, function () {
    $("#navigate a").show();
    $("#navigate span").hide();
    });

    return false;
    });
    });
    </script>

    Далее туда, где должен быть слайдер:
    <div id="container">
    <div id="img_container">
    <div id="img_box">
    <img id="img1" src="Ссылка на большое изображение" />
    <img id="img2" src="Ссылка на большое изображение" />
    <img id="img3" src="Ссылка на большое изображение" />
    <img id="img4" src="Ссылка на большое изображение" />
    <img id="img5" src="Ссылка на большое изображение" />
    <div style="clear:both;"></div>
    </div>
    </div>
    <div id="imgthumb_box">
    <a href="" class="thumblink" id="imglink1"><img src="Ссылка на миниатюру"/></a>
    <a href="" class="thumblink" id="imglink2"><img src="Ссылка на миниатюру"/></a>
    <a href="" class="thumblink" id="imglink3"><img src="Ссылка на миниатюру"/></a>
    <a href="" class="thumblink" id="imglink4"><img src="Ссылка на миниатюру"/></a>
    <a href="" class="thumblink" id="imglink5"><img src="Ссылка на миниатюру"/></a>
    </div>
    </div>


    Материал подготовлен Apocalypse


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



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


    - Установить на свой сайт блок социальных закладок
    Категория: Скрипты для uCoz | Добавил: scripts_for_ucoz
    Просмотров: 4344 | Загрузок: 0 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Для добавления необходима авторизация

    Хостинг от uCoz