Jak zrobić wysuwany likebox na PHP-Fusion: Różnice pomiędzy wersjami

Z ToProste
Skocz do: nawigacji, wyszukiwania
m
m
Linia 46: Linia 46:
  
 
=== Krok 3 ===
 
=== Krok 3 ===
 +
Instalacja pliku tła i stylu [[CSS]] likeboxa.
 +
* Wybierz typ tła ([http://img841.imageshack.us/img841/5074/bglikeboxfacebookfanpag.png 1] [http://img17.imageshack.us/img17/5074/bglikeboxfacebookfanpag.png 2]) dla likebox'a i pobierz je na swój dysk.
 +
* Załaduj je na serwer na którym masz pliki swojego skryptu do katalogu: /themes/'''nzawa_twojej_skorki'''/images/bglikeboxfacebookfanpag.png
 +
* Otwórz plik stylu skórki w dla której instalujesz likeboxa: /themes/'''nzawa_twojej_skorki'''/styles.css
 +
* Najlepiej na końcu w/w pliku wklej poniższy kod:
 +
 +
<syntaxhighlight lang="css">
 +
/* Styl dla wysuwanego likebox'a */
 +
#fb_rozwin {
 +
  height: 402px;
 +
  width: 235px;
 +
  top: 50%;
 +
  left: 0px;
 +
  position: fixed;
 +
  margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */
 +
  padding: 10px;
 +
  background: url("bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent;
 +
}
 +
 +
.zwin {background-position: 0px 0px -242px 0px;}
 +
 +
#fb_zawartosc {
 +
  height: 357px;
 +
  width: 182px;
 +
  display: block;
 +
  float: left;
 +
  background-color: #FFFFFF;
 +
}
 +
 +
</syntaxhighlight>
 +
 +
* Zapisz zmiany i zamknij plik.

Wersja z 12:29, 31 maj 2012

Przedstawiam sposób jak zrobić wysuwany likebox na PHP-Fusion 7.x w oparciu o kod wysuwanego likebox'a. 

Robisz to na WŁASNĄ odpowiedzialność! Czyli, że ja nie ponoszę żadnej odpowiedzialności za ewentualne szkody!


Jak zrobić wysuwany likebox na PHP-Fusion

Krok 1

Załączenie biblioteki jquery do obsługi wysuwanego likeboxa.

  • Otwórz plik /themes/templates/header.php
  • Odszukaj wiersz zawierający: echo "<script type='text/javascript' src='".INCLUDES."jquery/jquery.js'></script>\n"; (w pobliżu 47 linii)
  • Bezpośrednio przed w/w wierszem wklej poniższy kod:
   // Zalaczenie biblioteki jquery do obslugi wysuwanego likeboxa
   echo "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>";
  • Zapisz zmiany i zamknij plik.


Krok 2

Dodanie kodu javascript odpowiedzialnego za wysuwanie i chowanie likeboxa.

  • Otwórz plik /includes/jscript.js i najlepiej na końcu pliku wklej poniższy kod:
/***********************************************
* Funkcja obslugujaca wysuwanie i chowanie likeboxa
***********************************************/
   $(function(){
    $('#fb_rozwin').css('left','-205px');
    $('#fb_rozwin').hover(
     function () {
      $('#fb_rozwin').animate({left: '0px'}, 800 ); // szybkosc wysuwania
      $(this).addClass('zwin');
     },
     function () {
      $('#fb_rozwin').animate({left: '-205px'}, 700 ); // szybkosc ukrywania
      $(this).removeClass('zwin');
     }
    );
   });
  • Zapisz zmiany i zamknij plik.


Krok 3

Instalacja pliku tła i stylu CSS likeboxa.

  • Wybierz typ tła (1 2) dla likebox'a i pobierz je na swój dysk.
  • Załaduj je na serwer na którym masz pliki swojego skryptu do katalogu: /themes/nzawa_twojej_skorki/images/bglikeboxfacebookfanpag.png
  • Otwórz plik stylu skórki w dla której instalujesz likeboxa: /themes/nzawa_twojej_skorki/styles.css
  • Najlepiej na końcu w/w pliku wklej poniższy kod:
/* Styl dla wysuwanego likebox'a */
#fb_rozwin	{
   height: 402px;
   width: 235px;
   top: 50%;
   left: 0px;	
   position: fixed;
   margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */	
   padding: 10px;
   background: url("bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; 
}
 
.zwin	{background-position: 0px 0px -242px 0px;}
 
#fb_zawartosc	{
   height: 357px; 
   width: 182px;
   display: block; 
   float: left;
   background-color: #FFFFFF;
}
  • Zapisz zmiany i zamknij plik.
Źródło „http://to.proste.info.pl/index.php?title=Jak_zrobić_wysuwany_likebox_na_PHP-Fusion&oldid=1885”