Написал его я, пользуйтесь на здоровье! :)
Результат работы скрипта смотрите у меня на блоге.
Предыдущие слайдеры:
"Cross browser slider (no ajax, no jquery)"
"Cross-browser JavaScript Brand Wall Slider"
Ниже пример добавления для blogspot.com
Добавьте к стилям своего блога / сайта
В стилях для #works и #slider нужно указать конкретную высоту и ширину для тоо что бы всё работало нормально у меня это 190/190 (ширина правой колонки)
Стили для слайдера
этот текст не обходимо вставить в Дизайн -> Изменить HTML -> ....
(какие то стили).....
#works{width:190px!important; height:190px!important;overflow:hidden!important;margin:0!important;padding:0!important;position:relative}
#slider {width:190px; height:190px; overflow:hidden!important;margin:0!important;padding:0!important;list-style:none!important;border:none!important}
#slider li{margin:0;padding:0;border:none}
#slider_ctrl{text-align:center;width:40%;margin:0 auto} /* корректируем ширину этого блока если у вас больше 5 страничек */
#slider_ctrl a{border:1px solid #ccc;color:#000;background:#000;height:6px;width:6px;overflow:hidden;display:block;float:left;margin:2px;text-indent:10px;margin:2px}
#slider_ctrl a:hover{color:#eee;border-color:#eee;background:#eee}
.bactive{color:#bbb!important;border-color:#bbb!important;background:#bbb!important}
]]>
</b:template-skin>
</head>
Там же добавляем обработчик события при загрузке странички в тэг <body> инициализация баннера
генерирует точки и размер внутренних элементов слайдера и запускаем слайд шоу
<body expr:class='"loading" + data:blog.mobileClass' onload='bannerInit();banner("slideshow");'>
можно и не запускать его, для этого просто уберите
banner("slideshow")
Сохраняем подготовка закончена ниже само добавление галереи и скрипта.
Далее добавляем Javascript гаджет который и будет галлереей
Дизайн -> Элементы страницы -> HTML/JavaScript
Название: Слайдер или галерея или что угодно
Текст:
<div id="works">
<ul id="slider"><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Y9FjPu_gvla5rQM1zL6Arpqdwjx8abfypOgg6_xfFrcvK6bXQdui8A3j5HLRbEYfdfc8Ti2H86fhvJZfhPXNIwzVm43aBltwBV1QZqKc3-RnnGEpcQmYeJUKtPzePqlc-Spyp9zmz_L1/" /></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUbTHSjH0dTadNyUg-fwy1ND-MdF3ZcmQiPnwes6tCH6EQx1GKcsomRzJILswTaxCYgB0NroVIxMHz7BrThO_7eF3_q0InTiRIiAAYkCm8vO_-_skVmbANSeTAPS7xfCaQLHGJ0-Ahc7C4/" /></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHGZSKCYvkato6zrjg5U6QJlAYef3syZp1VubbH1PXfpc0YjPjaKMYjlCnHw4pgSPct4sfnFqMJdr2W1lgrOSy5eUZ5eA-7qipVckWSMFOuzPc4doCyC9l4r7FvB5Vp467VMxA5D4dbOy/" /></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMPlBnJUfItYyhgm-siOcJVBX-PR_JNsLZmR88QcHWndWIe-TpgCCjw5-ciC1R-73I7JD32674AHqSgj0VSEjgnTGkMgXLNMVQEYJvhX7iWYXP_TaAAY1U2Wi4KdzRTk1w6_KSswMVFOF/" /></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvxuiEY-Tky1kzhbLvxrWa3Cu_c3GdsMAuUHg4nh1UXfDjZ0OBDb09TjGayRmX9uoAMGRAw_4YYAYoLm-1hQTsrtrt86FAjqHq9octv-1RRVFbj_QhcQfg06mwM9KvHL8F0LgY29rKWJE/" /></li></ul>
</div><br />
<div id="slider_ctrl"></div>
<script type="text/javascript">
slideShow=5000;
touchDelay=1;
step=6;
sliderName="slider";
sliderControls="slider_ctrl";
anim=false;
startWidth=0;
curPage=0;
usedHand=0;
function bannerInit(){
id=document.getElementById(sliderName);
id2=document.getElementById(sliderControls);
width=id.clientWidth*1;
height=id.clientHeight*1;
for(i=0;i<id.childNodes.length;i++){
id.childNodes[i].style.position='relative';
id.childNodes[i].style.width=width+'px';
id.childNodes[i].style.height=height+'px';
id.childNodes[i].style.styleFloat='left';
id.childNodes[i].style.cssFloat='left';
j=i+1;id2.innerHTML+="<a href=\"#"+j+"\" title=\"Page "+j+"\" onclick=\"banner("+j+");\">"+j+"</a>";
}
}
function banner(_1){
if(_1=="slideshow"){
setTimeout("banner(\"slideshow\")",slideShow);
if(anim){return false;}
if(usedHand>0){usedHand-=1;return false;}
id=document.getElementById(sliderName);
_1=curPage+1;
if(_1>=(id.childNodes.length)){_1=0;}
animBanner(sliderName,_1);
return true;
}
if(anim){return false;}
_1=_1*1-1;
usedHand=touchDelay;
if(_1==curPage){return false;}
animBanner(sliderName,_1);
return true;
};
function animBanner(id,_2){
_2=_2*1;oldId=id;
id=document.getElementById(id);
if(!anim){
anim=true;
width=id.clientWidth*1;
if(startWidth<=0){startWidth=width;id.style.width=startWidth*id.childNodes.length+"px";}
if(curPage>_2){k=1;}
else{k=-1;}
pos=-1*curPage*startWidth;
endPos=-1*(curPage-k)*startWidth;
offset=k*(_2-curPage+k)*startWidth;
}
pos=pos+k*step;
if((k*(pos-endPos))<0){
id.childNodes[curPage].style.left=pos+"px";
id.childNodes[_2].style.left=pos-k*offset+"px";
setTimeout("animBanner(\""+oldId+"\",\""+_2+"\")",10);
return true;
}
id.childNodes[curPage].style.left=endPos+"px";
id.childNodes[_2].style.left=endPos-k*offset+"px";
//alert(id.childNodes[_2].style);
id=document.getElementById(sliderControls);
id.childNodes[curPage].className="";
id.childNodes[_2].className="bactive";
curPage=_2*1;
anim=false;
return false;
};
</script>
Этот плагин придётся редактировать ручками ;)
ВНИМАНИЕ! Между элементами <LI> и внутри них не должно быть пробелов и переносов строк! А то поломается слайдер везде кроме ИЕ ему пофиг :)
Вывод банера добавляется в пустой блок в нутри тегов LI пишем либо текст либо втыкаем картинки и пишем путь до них. Точки добавятся автоматически.
Катинки я залил на http://picasaweb.google.com/home ипоставил на них ссылки
Ещё один вариант работы этого же слайдера на нашем сайте. http://amayasoft.com
Если у вас возникнут вопросы или будут проблемы с ним напишите постораюсь помочь
Спасибо за слайдер. Хорошая работа. Заработал с первого раза.
ReplyDelete