Plywajace banery reklamowe na dole forum

[Duke]

Przedstawię tu tutorial jak zrobić pływające, klikalne banery reklamowe na dole forum używając do tego opcji forum Ad Code Integration

pobieramy poniższy zip i rozpakowujemy 2 zawarte w nim pliki poprzez ftp do folderu:

forum/public/js

jquery.zip

następnie otwieramy

ACP > Look & Feel > Zarzadzaj skinami > "nasz skin"

otwieramy zakładkę CSS

wybieramy

ipb_styles.css

przechodzimy na sam dol i dodajemy wpis i zapisujemy:

************************************************
/*scroll*/
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
z-index: 2;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}

.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}

.simply-scroll-list li img {
border: none;
display: block;
}
/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {
width: 576px;
height: 100px;
margin-bottom: 1em;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 100px;
}

/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 145px;
height: 100px;
}

następnie przechodzimy do:

ACP > System Settings > System > Ad Code Integration

w części Board Index wypełniamy pole Override Footer Code nastepującym kodem:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://adres.forum/public/js/jquery.simplyscroll.js"></script>


<script type="text/javascript">
(function($) {
	$(function() { //on DOM ready
			$("#scroller").simplyScroll({
					autoMode: 'loop'
			});
	});
})(jQuery);
</script>



<br>


<center>

<ul id="scroller">
<li><a href="adres.linka"><img src="adres.fotki" height="100" width="145"></a></li>
<li><a href="adres.linka"><img src="adres.fotki" height="100" width="145"></a></li>
<li><a href="adres.linka"><img src="adres.fotki" height="100" width="145"></a></li>
</ul>
</center>

ustawiamy opcje na samej gorze na Enabled i zapisujemy

jeśli chcemy więcej banerów analogicznie dodajemy następne

<li>

należy pamiętać aby wpisać poprawne adresy w odpowiednich miejscach oraz użyć opcji noConflict, bo inaczej wbudowana funkcjonalność ipb przestanie działać.

Edytowane 6 Marca 2012 przez DawPi
Dodano polskie ogonki.

[IPBFan]

Niestety ale nie mogę znaleźć tej lokalizacji ACP > System Settings > System > Ad Code Integration.

[teez]

Możesz dać jakieś demo? Jeżeli nie to zaraz to u siebie wgram i dodam.

[teez]

Niby wszystko ładnie pięknie ale jak dokładniej włączyć opcję noConflict ?

[Budyn]

Niestety ale nie mogę znaleźć tej lokalizacji ACP > System Settings > System > Ad Code Integration.

ACP -> USTAWIENIA -> SYSTEM -> Ad code Integration

A tu masz obrazkowo

EDIT :

Niby wszystko ładnie pięknie ale jak dokładniej włączyć opcję noConflict ?

Wpisz w szukajce TU na forum noConflict

Edytowane 7 Marca 2012 przez Budyn

[CzarnyUrok]

A może jakieś demko? Nie za bardzo wiem, co to znaczy pływające ^^