Блок ротатор банеров без перезагрузки страницы! | Полезные решения | Форум

Дата: 02.03.2009, в 17:15 | Сообщение №1

Активный участникПользователь №: 520
Сообщений: 100

В принципе его можно и подправить чтоб выводил рандумом, но это уже мелочи, суть в том что но меняет банеры (картинки) без перезагрузки, что позволяет запихнуть в блок кучу картинок, и сильно с экономить место!

сам блок свой выкладывать не буду но выложу все что нужно чтоб его самому собрать...
1) вот необходимые файлы:

Прикрепленные файлы:

Скачать: 41.32 KB

складываем 3 скрипта и 1 стиль из архива в парочку: \ajax\dhonishow\ФАЙЛЫ СЮДА

- собственно расписываю все для версий движка AS 4.x, но скрипты от движка не как не зависят и не кто не мешает прикрутить их на 3.x и 2.х

2) прописываем их в config\config_header.php

Код

1

<?php
if (!defined("FUNC_FILE")) die("Illegal File Access");
echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"ajax/dhonishow/dhonishow.css\" />\n
<script type=\"text/javascript\" src=\"ajax/dhonishow/prototype.js\"></script>\n
<script type=\"text/javascript\" src=\"ajax/dhonishow/effects.js\"></script>\n
<script type=\"text/javascript\" src=\"ajax/dhonishow/dhonishow.js\"></script>\n";

?>

3) прописываем сами банеры...
- собственно вот тут у вас появляется полная свобода действий.....
имхо все что нужно теперь сделать это в любом месте сайта
- тоесть в любом блоке, - в любом модуле, или непоспердственно в шаблоне сайта прописать следующее:

Код

1

- Собственно все!!! сколько картинок напихаете внутрь
<div class="dhonishow">
.......
......
</div>
столько и будет прокручиватся.
Сам ротатор имеет простую и гибкую настройку:
находим <div class="dhonishow">
в нутри класа после dhonishow через пробел можно чередовать параметры:
autoplay_5 - прокрутка через 5 сек (пример)
effect_appear, effect_blind, effect_slide, effect_horizontal - разные эфекты прокрутки, выбираем один...
duration_2 - время затухания (смены картинок)
hide_paging, hide_alt, hide_navigation - если указать эти параметры то скрываются кнопка ручной перемотки, название картинки....

РАЗМЕР КАРТИНОК НЕОБХОДИМО УКАЗАТЬ В dhonishow.css
width: 293px;
height: 384px; - заменяем на свой размер, повторяется несколько раз! При этом не обязательно чтоб все картинки были идентичны по размеру (указываем максимальный размер).

- КОРЕКТНО РАБОТАЕТ ВО ВСЕХ ПОПУЛЯРНЫХ БРАУЗЕРАХ
даже в IE6

Разработка: Stanislav Muller
сайт http://lifedraft.de/projekte/dhonishow/

Как всегда пример можно посмотреть у меня на сайте
http://alfafilms.ru/ - левый и правый блок, трудно не заметить...

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно shadow 02.03.2009 г. в 17:20:40

Bender

Дата: 03.03.2009, в 02:27 | Сообщение №3

ПользовательПользователь №: 74
Сообщений: 33

Присоединяюсь к раздаче респектов и уважух!

patriot

Дата: 03.03.2009, в 14:20 | Сообщение №5

УчастникПользователь №: 349
Сообщений: 92

плавное угасание и появление без библиотек. использую у себя

Код

1

/*
Source: http://www.tigir.com/js/opacity.js

Библиотека opacity.js к статье "CSS прозрачность (css opacity, javascript opacity)" - http://www.tigir.com/opacity.htm

setElementOpacity - установка прозрачности
getOpacityProperty - проверка, есть ли возможность менять прозрачность
fadeOpacity - плавное изменение прозрачности
*/

/* Функция кроссбраузерной установки прозрачности

Пример: setElementOpacity(document.body, 0.5); //сделать документ прозрачным на половину
*/
function setElementOpacity(oElem, nOpacity){
var p = getOpacityProperty();
(setElementOpacity = p=="filter"?new Function('oElem', 'nOpacity', 'nOpacity *= 100; var oAlpha = oElem.filters["DXImageTransform.Microsoft.alpha"] || oElem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else oElem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";'):p?new Function('oElem', 'nOpacity', 'oElem.style.'+p+' = nOpacity;'):new Function)(oElem, nOpacity);
}

// Функция getOpacityProperty() возвращает свойство которое используется для смены прозрачности или undefined, и может использоваться для проверки возможности изменения прозрачности
function getOpacityProperty(){
var p;
if (typeof document.body.style.opacity == 'string') p = 'opacity';
else if (typeof document.body.style.MozOpacity == 'string') p = 'MozOpacity';
else if (typeof document.body.style.KhtmlOpacity == 'string') p = 'KhtmlOpacity';
else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p = 'filter';

return (getOpacityProperty = new Function("return '"+p+"';"))();
}

/* Функции для плавного изменения прозрачности:

1) fadeOpacity.addRule('opacityRule1', 1, 0.5, 30); //вначале создаем правило, задаем имя правила, начальную прозрачность и конечную, необязательный параметр задержки, влийяющий на скорость смены прозрачности
2) fadeOpacity('elemID', 'opacityRule1'); // выполнить плавную смену прозрачности элемента с id равным elemID, по правилу opacityRule1
3) fadeOpacity.back('elemID'); //вернуться в исходное сотояние прозрачности
*/
function fadeOpacity(sElemId, sRuleName, bBackward){
var elem = document.getElementById(sElemId);
if (!elem || !getOpacityProperty() || !fadeOpacity.aRules[sRuleName]) return;

var rule = fadeOpacity.aRules[sRuleName];
var nOpacity = rule.nStartOpacity;

if (fadeOpacity.aProc[sElemId]) {clearInterval(fadeOpacity.aProc[sElemId].tId); nOpacity = fadeOpacity.aProc[sElemId].nOpacity;}
if ((nOpacity==rule.nStartOpacity && bBackward) || (nOpacity==rule.nFinishOpacity && !bBackward)) return;

fadeOpacity.aProc[sElemId] = {'nOpacity':nOpacity, 'tId':setInterval('fadeOpacity.run("'+sElemId+'")', fadeOpacity.aRules[sRuleName].nDalay), 'sRuleName':sRuleName, 'bBackward':Boolean(bBackward)};
}

fadeOpacity.addRule = function(sRuleName, nStartOpacity, nFinishOpacity, nDalay){fadeOpacity.aRules[sRuleName]={'nStartOpacity':nStartOpacity, 'nFinishOpacity':nFinishOpacity, 'nDalay':(nDalay || 30),'nDSign':(nFinishOpacity-nStartOpacity > 0?1:-1)};};

fadeOpacity.back = function(sElemId){fadeOpacity(sElemId,fadeOpacity.aProc[sElemId].sRuleName,true);};

fadeOpacity.run = function(sElemId)
{
var proc = fadeOpacity.aProc[sElemId];
var rule = fadeOpacity.aRules[proc.sRuleName];

proc.nOpacity = Math.round(( proc.nOpacity + .1*rule.nDSign*(proc.bBackward?-1:1) )*10)/10;
setElementOpacity(document.getElementById(sElemId), proc.nOpacity);

if (proc.nOpacity==rule.nStartOpacity || proc.nOpacity==rule.nFinishOpacity) clearInterval(fadeOpacity.aProc[sElemId].tId);
}
fadeOpacity.aProc = {};
fadeOpacity.aRules = {};