Маленькая функциональная галерея - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Скрипты для uCoz » Галерея для сайта uCoz » Маленькая функциональная галерея

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Маленькая функциональная галерея

Небольшая но функциональная галерея для Вашего сайта




Галерея выполнена в стиле минимализма, при этом обладает достаточной функциональностью.Для работы используется библиотека jQuery, которая по умолчанию подключена на сайте системы юКоз.Работать галерея будет на любых страницах, кроме страниц материалов модулей.Тоесть на таких страницах как главная или добавленых через "Управление страницами сайта".Понадобятся изображения с размерами 400x400 или меньше и 75x75 которые будут показаны в галерее.Поэтому может пригодиться программа для изменения изображений которую можно скачать и посмотреть видео как она работает ЗДЕСЬ.Порядок добавления изображений в галерею:
src="Здесь изображения 75x75"
alt="Здесь изображения 400x400"
Установка галереи на страницу:
Добавьте весь код из примера в поле через "Панель HTML кодов", всё настроено для работы нужно заменить только изображения на свои.





Код для установки галереи


<style type="text/css">@import url("http://delaisait.ucoz.ru/script/galereya/minigalerya/css/style.css");</style>
<div id="msg_slideshow" class="msg_slideshow">
<div id="msg_wrapper" class="msg_wrapper">
</div>
<div id="msg_controls" class="msg_controls">
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a>
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs">
<div class="msg_thumb_wrapper">
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/1.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/1.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/2.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/2.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/3.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/3.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/4.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/4.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/5.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/5.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/6.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/6.jpg"/>
</a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/7.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/7.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/8.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/8.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/9.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/9.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/10.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/10.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/11.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/11.jpg"/>
</a>
<a href="#">
<img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/12.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/12.jpg"/>
</a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span>
</div>
</div>
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/galereya/minigalerya/js/minigalereya.js"></script>



Библиотека jQuery для проверки кода в редакторе

Напоминаю!!!Скрипт библиотеки нужен только для проверки кода на работоспособность в редакторе, который находится ниже.



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Галерея в подключенном состоянии



Проверьте код для установки в редакторе

Скопируйте в редактор библиотеку jQuery и код для установки, чтобы убедиться в работоспособности предлагаемого скрипта галереи.










Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2998 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: для блога, Скрипт, Для сайта, установить, галерею

    Всего комментариев: 3
    0   Спам
    3 rustamka4   (29.07.2016 21:08)
    Аватар rustamka4 В статье надо расположить несколько галерей с разными рисунками. 1-ая устанавливается нормально, а следующая - вечный черный экран с загрузкой, библиотека jq версии 1.7.2;(http://2015.clan.su). При проверке в вашем редакторе все нормально. В чём проблема? Понять не могу. Помогите разобраться

    0   Спам
    1 Admin0780   (29.05.2013 00:40)
    Аватар Admin0780 Подскажи как можно расположить галерею в правом верхнем углу сайта? и можно ли как-то изменить размеры самой галереи?

    0   Спам
    2 IZOTOP   (30.05.2013 00:08)
    Аватар IZOTOP Установить галерею в верхнем правом углу страницы сайта.

    1.Так будет проворачиваться со скроллингом:

    Код

    <div style="top:0px;right:0px;position:absolute;">
    ЗДЕСЬ КОД СЛАЙДЕРА
    </div>


    1.Так будет зафиксирован:

    Код

    <div style="top:0px;right:0px;position:fixed;">
    ЗДЕСЬ КОД СЛАЙДЕРА
    </div>


    Изменить размер слайдера.

    1.В файле CSS в 2 местах значения ширины и высоты 400 на своё.
    1.1.Место замены 1:

    .msg_slideshow{
    width:400px;
    height:400px;


    1.2.Место замены 2:

    .msg_wrapper{
    width:400px;
    height:400px;


    2.В файле .js заменить 2 значения на аналогичные:

    var containerwidth = 400;
    var containerheight = 400;


    -----/-----


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