Слайдер для vBulletin 4

Слайдер для vBulletin 4 и 3 подойдёт

Задался целью вставить слайдер на vb4.

Есть готовые решения вставки слайдеров на морду cмs, но мне захотелось вставить слайдер во всю ширь страницы форума, без виджетов, чтобы ни какие боковые панели не отвлекали от просмотра.

Пример вставки на форум vb 4.1.12





Для вставки слайдера на форуме должно быть установлено два хака.
Их много разных, использовал эти:

1. Хак для создания СВОИХ страниц. (архив zip 11кб) Русификатора нет, но там и так всё понятно.
2. Хак для создания новых вкладок в меню.(архив zip 13кб) Этот русифицирован и в двух кодировках.

Про ужас устройства цмс vb4 можно написать целый роман, скажу лишь, два этих хака будут полезны потому, что избавят от многих проблем. Возможно цмс и вовсе не понадобится.
Хаки установлены , осталось дело за малым, установить сам слайдер.


Распакуйте архив и залейте в корень форума папочку slaider. Внутри находится две папки :
1. Папка images - туда будете заливать свои фотографии.
2. Папка themes - содержит картинки и файлы требуемые для работы слайдера.

Далее идём в админку и создаём новую страницу html, копируем код слайдера из файла - Установка.txt

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

Далее меняйте фото на свои. Настройка размеров слайдера меняется в файле themes/js-image-slider.css Внутри файла есть надписи. Кругляшки(кнопки на фото) так же регулируются..

P.S:

Есть ещё адаптивный слайдер , который так же подойдёт форуму vb. Разница между слайдерами в том, что адаптивный слайдер не может красиво листать фото, но зато умеет растягиваться под размеры страницы. Выбирать Вам.






Оставить комментарий

Галерея для цмс и блога Lasto

Галерея для цмс и блога Lasto

Нашёл тут один скриптец , такой же дерзкий как бабулька в троллейбусе. Тянет фотографии всей пачкой на страницу , сам делает миниатюры и выстраивает их ровными рядами. Т.е. не надо прописывать каждую фоту по отдельности, достаточно навалить кучку фотографий в папку. Ни каких уменьшенных копий не требуется.

По мере надобности можно добавлять фото в папку и всё, они будут сами добавляться стройными рядами на странице.


Штука будет очень полезна тем, кто регулярно выкладывает свои фотоработы в сеть. Этот скрипт избавит от редактирования страницы, достаточно лить фото на хост и галерея продолжит свой рост вниз страницы самостоятельно. Ещё один момент - в папках не создаётся ни одной миниатюры, их просто нет.

Если хочется выстроить фото в определённом порядке, не вопрос - переименуйте названия фото цифрами по возрастающей и они встанут как надо.

Пример работы на ЦМС Ласто
Можно и другое высоко художественное кино устроить.
Тройное увеличение больших фотографий при нажатии мышкой..

Картинки желательно заливать одинаковых размеров или приблизительно одинаковых. Галерея состоящая из разных по размеру фото выглядит менее эстетично.

Пробовал тягать картинки с поддоменов, не хочет. Из своих папок и подапапок показывает без проблем. Не обязательно в корень ставить,можно глубже пихнуть.
Настройки скрипта подписаны внутри, можно регулировать размеры миниатюр и количество столбцов. Для каждой страницы-галереи можно делать свои настройки.

Купить скрипт галереи можно тут.
Похожих скриптов в интернете тьма, но вот как то с желающими переделать скрипт под определённый движок, да чтобы вставлялся с пол тыка, таких мастеров найти сложно.


По поводу выпячивания картинки
Надо добавить в css следующие строчки:


p img {margin:0 10px 2px 0;border:0;}
.postbody img,.postimg img 
{float:left;margin:3px 15px 5px 0; border:0px solid; 
border-color:#131313;
box-shadow: 3px 3px 5px #000;-o-transform:scale(1);
-o-transition-duration: 0.5s;
-webkit-box-shadow: 3px 3px 5px #000;
-webkit-transform:scale(1);
-webkit-transition-duration: 0.5s;
-moz-box-shadow: 3px 3px 5px #000;
-moz-transform:scale(1);
-moz-transition-duration: 0.5s;
   opacity:0.9;
}
.postbody img:hover, .postimg img:hover{
-webkit-transform:scale(1.2);
-webkit-box-shadow:3px 3px 10px #000;
-moz-transform:scale(1.2);-moz-box-shadow:3px 3px 10px #000;
-o-transform:scale(1.2);box-shadow:3px 3px 10px #000;
 opacity: 1;
}



Чтобы картинка зашевелилась, вставка фото должна быть оформлена вот так:


<div class="postimg"> тут вставляеится картинка div>







Комментариев: 1

Красивый слайдер для любых СMS

Слайдер для Lasto блога и СMS

Cлайдер картинок без проблем будет работать на любых ЦМС.В приведённых ниже примерах работает на блоге и ЦМС Ласто.

Красивых слайдеров много, да не все работают так как надо. Сложная и глючная установка отбивает любое желание. Этот же вариант слайдера легко устанавливается, красиво смотрится, живёт в мире и согласии с остальным контентом сайта.









Демо: вариант раз, вариант два, установка на блог перед Вами.

Слайдер на vBulletin 4 , размер 1000х562.


Купить слайдер можно тут.


Установка слайдера:

1. Загружаем архивчик в корень сайта, две папки images и themes.
Страничка dеmo1 не нужна, она тестовая для просмотра.


2. В Ласто цмс(блоге) открываем файл design.php
В блоге ./data/tpl/Ваш_стиль/design.php
В новой ЦМС Ласто ./data/conten/design.php
В старой ЦМС Lasto ./data/design.php
В других ЦМС надо искать шаблон heider либо другие файлы, которые позволяют вставить несколько строк кода сразу во все страницы сайта. Ищите файл,куда метатеги писали.

Добавляем перед тегом < /head > код:

<!--Slider -->
    <link href="themes/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/mcVideoPlugin.js" type="text/javascript"></script>
    <script src="themes/js-image-slider.js" type="text/javascript"></script>
<!--Slider -->


3. Встраиваем слайдер на страницу сайта.

<!--Slider -->
 <div id="sliderFrame">
     <div id="slider">
  <a href="http://cmsina.ru" target="_blank">
  <img src="images/1.jpg" alt="Cлайдер для Ласто блога и ЦМС" />
            </a>
     <img src="images/2.jpg" alt="" />
     <img src="images/3.jpg" alt="Слайдер на Джава" />
     <img src="images/4.jpg" alt="#htmlcaption" />
     <img src="images/5.jpg" alt=""/>
        </div>
        <div id="htmlcaption" style="display: none;">
         <em> Работа на  CMS  lasto  </em> 
 <a href="http://meza44.ru/slaider.htm" target="_blank">туточки</a>
        </div>
    </div>
<!--Slider -->


4. Картинки в папке images меняем на свои.
Размеры слайдера меняются в файле themes/js-image-slider.css

#sliderFrame 
{
    position:relative;
    width:654px;    /* Размер  слайдера */
    margin:0 auto; /*center-aligned*/
}

#slider, #slider div.sliderInner {
    width:654px;height:487px;   /* Размер  слайдера */

Всё, должон работать.




Комментариев: 2

Прыг: 01 02 03 04 05

^Наверх