TUT:Beskonacni niz (ponavljanje) slika ili banera (Continuous Image Marquee)

Started by UndertakerZA, October 12, 2011, 07:25:51 AM

Previous topic - Next topic

UndertakerZA

Beskonacni niz (ponavljanje) slika ili banera
(Continuous Image Marquee)


Ovaj tutorijal je preuzet sa
About.com JavaScript

Ovim tutorijalom objasnicu sta treba uradeti da bi se baneri ili slike prikazivali u kontinuiranom nizu tj. bez prekidanja tog niza koji postavite. Na poslednji baner u nizu odmah se nastavlja prvi koji ste postavili i tako redom,bezkonacno.

Korak 1.
Prvo sto trebate da uradite je da preuzmete JavaScript-u koja je u attachment-u ovog topica a nosi naziv marquee.js.
Tu skriptu trebate uploadovati u root direktorijum gde se nalazi Vas forum. Zavisno od servera koji koristite naziv tog direktorijuma moze da bude razlicit, u slucaju sa mojim serverom to je public_html direktorijum.

Korak 2.
U istom tom direktorijumu napravite novi, koji naslovite sa baneri (tako je vec podeseno u skripti) ili po Vasem izboru kako zelite . U tom dir. cete dodavati banere ili slike koje ce se kasnije prikazivati na Vasem forumu.

Korak 3.
Kada ste zavrsili prva dva koraka , potrebno je da ubacite banere u dir baneri i nakon toga idemo u podesvanje marquee.js skripte.

Korak 4.
Po preuzimanju skripte a pre uploada na server potrebno je podesiti marquee.js skriptu,odnosno dodati linkove banera i sajtova do kojih ce ti baneri voditi kada se klikne na njih.
Otvorite marquee.js uz pomoc nekog txt editora (Notepad, Notepad++ i sl.) i tada cete videti ovakav deo:

var mqAry1=[
['/baneri/img1.png','http://link do portala.com'],
['/baneri/img2.png','http://link do portala.com'],
.............
['/baneri/img15.png','http://link do portala.com'],];


function start() {
   new mq('m1',mqAry1,125);// repeat for as many fuields as required
   mqRotate(mqr); // must come last



Podesavanje:
U ovom deli morate izvrsiti izmene i to ovako

['/baneri/ ------------------------ ostaje ovako

img1.png -------------------------- upisete tacan naziv banera/slike i ekstenzije,onako kako je na server ubacena (npr.smsite_logo.jpg)

',' ------------------------------- ostaje ovako

http://link do portala.com -------- ovde upisite adresu portala (npr. http://www.simplemachines.org)

'] -------------------------------- ostaje ovako

Ovako podesen ovaj deo treba da izgleda ovako

['/baneri/smsite_logo.jpg','http://www.simplemachines.org']

U slucaju da imate gotov link banera portala ciji baner zelite da postavite, onda bi trebalo da taj link ubacite u delu za sliku na ovaj nacin

['http://media.simplemachinesweb.com/smf/smsite2/images/site/smsite_logo.jpg','http://www.simplemachines.org']

Ovaj postupak ponavljate onoliko puta koliko banera zelite da postavite.

Broj 125 u ovom delu koda oznacava kolika ce se sirina banera prikazivati. Tu velicinu cete sami podesiti zavisno od sirine banera koji postavite na forumu.
   new mq('m1',mqAry1,125);

Kod mene je to namesteno na 125 jer baneri koje sam postavio su sirine 120px i ujedo ostatak od 5 odredjuje razmak izmedju tih banera kako oni ne bi bili slepljeni jedan uz drugi.

Ovim ce te postupak podesavanja skripte zavrsili , zapamtite je i nakon toga uploadujte na server.
   

UndertakerZA

Nastavak podesavanja se odnosi na index.template.php i style.php falova teme koju Vi koristite.

Napomena:
Ja koristim SMF verziju 1.1.xx i ovaj tutorijal pisem samo na osnovu iskustva u toj verziji i onako kako sam ja postavio na mom forumu.Nisam probao na verziji 2.0 tako da ne mogu sa sigurnoscu tvrditi da ce i tu funkcionisati.
Vazno:
Pre nego sto pocnete da vrsite prepravke u ova dva fajla , zapamtite original fajlove kako bi u slucaju da nesto podje po zlu , iste mozete vratiti nazad.

Idite na server u direktorijum svoje teme koju koristite i skinite na svoj hard disk fajlove index.template.php i style.php .

Postupak podesavanja style.css:


Na samom kraju fajla, posle } , dodate ovaj deo

.marquee {position:relative;
     overflow:hidden;
     width:500px;
     height:60px;
     border:solid black 1px;
     }


Ovo podesite po Vasoj zelji


width:500px; ------------------ sirina dela u kome ce se baneri prikazivati
height:60px; ------------------ visina dela u kome ce se baneri prikazivati

Zapamtite ,uploadujte i zamenite u direktorijum svoje teme na serveru.


Postupak podesavanja index.template.php:

Pronadjite ovaj deo:
    <script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>

Ovaj kod ,koji je putanja do marquee.js skripte ubacite posle toga

<script type="text/javascript" src="marquee.js">
</script>


ili ovako

<script type="text/javascript" src="http://VASA ADRESA.com/marquee.js">
</script>


Sa prvim kodom sam imao problema jer se baneri nisu videli kada se udje u bilo koji bord ili topic ,vec samo na pocetnoj strani foruma.
Sa drugim kodom je sve uredu i baneri se vide svuda.


Na resavanju ovog problema mi je pomogao @Dzonny ,kome se ovom prilikom zahvaljujem na velikoj pomoci.



Sada morate pronaci deo u index.template fajlu gde trebate dodati ovaj kod. To ce odrediti mesto gde zelite da Vam se baneri prikazuju na forumu.


Da bi se baneri videli na vrhu ispod header dela onda pronadjite ovaj deo

    // Show the menu here, according to the menu sub template.
    template_menu();


Dodajte posle toga na ovaj nacin

    echo '

     <table width="100%" align="center"><tr>
     <td align="center">

<div id="m1" class="marquee"></div>

     </td>     </tr>     </table>';


Tako ce biti centrirano na samoj sredini foruma.
table width i align mozete i sami podesiti kako vam odgovara.

Da bi se baneri videli u footer delu foruma , pronadjite ovaj deo i posle njega dodajte ovaj isti kod od iznad.

function template_main_below()
{
    global $context, $settings, $options, $scripturl, $txt;

    echo '
    </div>';


Ovo bi bio kraj tutorijala.
Primere kako izgleda mozete videti na ovom forumu u footeru www.cokoladaforum.com

Autor:
Alen@Ognjen ex UndertakerZA

[preuzeto]
   

Advertisement: