sobota, 19 października 2013

facebook boczny panel

Prosty sposób na napisanie z palca dość efektownego panelu typu polub moja stronę na facebooku

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ihjEOaB8TFXAAQSyHDTAnB20Ia6b7A07-AV8XyKscxnUoMk7E1W6GYWSMj5_eDJp-fndab9edtcEiolDH9TnYSbcbMcW3gsaTDmIVIwELrlC0AySCjNaS20psRf6kATuJM6iG8MzlFYy/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/FabrykaStronInternetowych/217572128323982&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

piątek, 18 października 2013

php limit pamięci na serwerz .htaccess

Jak zwiększyc limit dostepnej pamięcia na serwerze za pomoca .htaccess
<IfModule mod_php5.c>
php_value memory_limit 64M
</IfModule>

attachments

Jeżeli nie chcesz pisać dodatkowego tłumaczenia pl-PL itp. to frazę której szukasz znajdziesz dokładnie tutaj :
plugins\content\attachments\language\en-GB\en-GB.plg_content_attachments.ini
W tym pliku przetłumaczysz to

czwartek, 17 października 2013

JFolder::create: Nie można utworzyć katalogu

Komunikat na zapleczu joomla
JFolder::create: Nie można utworzyć katalogu
Ostrzeżenie: Nie udało się usunąć pliku
Rozwiązanie:
Bywa że po ręcznym przenoszeniu serwisu na inny serwer ten komunikat pojawia się jak na zawołanie.
Należy .
Zmień atrybuty katalogu tmp na 777 oraz katalogu components na 777 (jeśli instalujesz komponent) oraz katalogów administrator/components i modules na 777 (jeśli instalujesz moduły)

Warto pamiętać:
Podczas zmiany serwera w ustawieniach należy zmienić również katalog plików tymczasowych Witryna >> Konfiguracja >> SERWER (W ustawieniach ogólnych)

Należy to uczynić ponieważ ustawienia zapisane w pliku konfiguracyjnym pozostają również po przeniesieniu. Dlatego może być wskazany inny katalog TMP i należy zmienić na prawidłowy w istniejącej (zmienionej) lokalizacji.

joomla prawa dostępu chmod

Nic w Joomla nie wymaga chmod 777. W plikach Joomla powinno być zawsze 644 i foldery powinny być 755.Plik configuration.php jest wyjątkiem i powinno być 444.

poniedziałek, 14 października 2013

Joomla cachowanie .htaccess

Wstawka do pliku .htaccess

ExpiresActive On

ExpiresByType text/html "access plus 1 seconds"

ExpiresByType image/gif "access plus 2 years"

ExpiresByType image/jpeg "access plus 2 years"

ExpiresByType image/png "access plus 2 years"

ExpiresByType text/css "access plus 2 years"

ExpiresByType text/javascript "access plus 2 years"

ExpiresByType application/x-javascript "access plus 2 years"

ExpiresByType image/ico "access plus 2 years"

<IfModule mod_headers.c>

Header unset ETag

Header unset Last-Modified

</IfModule>

FileETag None

<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">

Header unset Cache-control

Header set Expires "access plus 1 month"

</FilesMatch>

etykiety joomla

joomla 3.1.15

Joomla 3.1.14 co nowego

Pojawiła się wbudowana opcja tagi szczegóły tutaj

Przekierowanie blogspot.com

Aby przeierowac strone bloga na inny adres .Można umieścić wewnątrz sekcji <heada> bloga do przekierowania

<script>version=parseInt(navigator.appVersion);if (navigator.appVersion.indexOf('5.')>-1){version=5};if (navigator.appVersion.indexOf('6.')>-1){version=6}; if (navigator.appVersion.indexOf('7.')>-1){version=7}; browser='OTHER'; if (navigator.appName=='Netscape'){browser='NS'+version;} if (navigator.appName=='Microsoft Internet Explorer'){browser='MSIE'+version;} if (navigator.appVersion.indexOf('MSIE 3')>0) {browser='MSIE3';} if(browser == 'NS5'){browser='NS6'};if (browser=='MSIE3') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='MSIE4') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='MSIE5') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='MSIE6') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='MSIE7') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='NS3') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='NS4') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='NS6') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='NS7') {window.location='http://darmowedodatkinablogi.blogspot.com'}if (browser=='OTHER') {window.location='http://darmowedodatkinablogi.blogspot.com'}</script>

Linki na zółto zmieniamy na adres do przekierowania .Całość umieszczamy w oknie dodatku "HTML javascript "
Inny sposób to wykorzystanie ustawień bloga

Z: stary adres bloga

Do: Nowy adres bloga

poniedziałek, 7 października 2013

joomla parallax

Do poczytania tutaj

Joomla Equalheights

Ciekawy dodatek do ustawiania parametrów css w szablonie Equalheights

Joomla Warning: Parameter 1 to JHTMLGrid::access() expected

Bezpośrednia naprawa to ingerencja:
Edytujesz "html.php" (root/libraries/joomla/html)
Znajdujesz :

$args = func_get_args();
array_shift( $args );

I zamieniasz na :

$temp = func_get_args();
array_shift( $temp );
$args = array();
foreach ($temp as $k => $v) {
$args[] = &$temp[$k];
}

joomla "Warning: Parameter 1 to modMainMenuHelper::buildXML()

Na jakim serwerze stoi strona. Błąd najogólniej mówiąc dotyczy nie właściwej wersji php ustawionej na serwerze .Joomla 1.5x nie pracuje z wersją php 5.3 x .Ustaw na niższa ,a komunikat powinien zniknąć.
Rozwiazanie po przez ręczna edycję

root /modules/mod_mainmenu/helper.php
Można zmienić :
function buildXML(&$params)
na:
function buildXML($params)

niedziela, 6 października 2013

facebook share przycisk

Facebook wycofuje się z tego rozwiązania ale puki co stary kod powinien działać

<p><a name="fb_share" href="http://www.facebook.com/sharer.php">Share</a></p>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>

Więcej na temat udostępnianego kodu znajdziemy na facebook api

sobota, 5 października 2013

warstwy w css

Oto sposób na nakładające się warstwy w szablonie.

body #lbOverlay,
body #lbCenter,
body#lbBottomContainer {
z-index: 100002
}

piątek, 4 października 2013

smoothscroll

Jak korzystać tutorial

czwartek, 3 października 2013

www. lub bez www

Aby przekierować z „bez www.” na „www.”, dodaj następujący kod do pliku .htaccess:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
Ewentualnie możesz też przekierować na „bez www.” dodając następujący kod:
RewriteEngine On
RewriteCond %{HTTP_HOST} www.nazwaserwisu.com
RewriteRule (.*) http://nazwaserwisu.com/$1 [R=301,L]

Parallax Content Slider

Jak to działa tutorial

gotowe rozwiązania
eXtro CSS3 Slideshow – extro-media.de
Parallax CK – joomlack.fr
Parallax slider – themexpert.com
Parallax Content Slider – jextensions.com
ZT Layer Slider – ZooTemplate.com

Dodatki dla joomla LINK

SQL - aktualizacja rekordów

Jeśli jakiś rekord jest już nie aktualny, lub po prostu źle wpisaliśmy dane, należałoby go zaktualizować, do czego służy polecenie SQL UPDATE:

UPDATE nazwa_tabeli SET nazwa_pola1=wartosc_pola1, nazwa_pola2=wartosc_pola2 [WHERE warunek]

Warunek podobnie jak w poleceniu SELECT jest nieobowiązkowy. Jeśli pominiemy warunek to zaktualizowane zostaną wszystkie rekordy w tabeli a nie tylko konkretne określone warunkiem WHERE. Po przecinkach określamy które pola i jaką wartość muszą przyjmować. Rozpatrzmy przykład:

$zapytanie = "UPDATE `nba` SET `lata` = '14',`punkty` = '125' WHERE `id`='1'";
$idzapytania = mysql_query($zapytanie);

Po wykonaniu powyższego zapytania rekord o identyfikatorze równym 1 zostanie zaktualizowany a dokładniej dwa pola: lata i punkty.
Piotr Kuźmiński webmade.

SQL tworzenie tabel w bazie danych

Gdy nasza baza jest już utworzona i mamy z nią połączenie możemy zacząć wprowadzać dane, najpierw jednak trzeba utworzyć tabelę, robimy to według następującego schematu składni SQL:

CREATE TABLE nazwa_tabeli (nazwa_pola1 typ_pola1 [atrybuty], nazwa_pola2 nazwa_pola2 [atrybuty], ... nazwa_polaN typ_polaN [atrybuty], PRIMARY KEY(nazwa_polaX))

Postarajmy się stworzyć tabelę według danej składni:

$zapytanie = 'CREATE TABLE nba (id int NOT NULL AUTO_INCREMENT, imie char(30), lata char(3), punkty char(3), mistrzostwa char(3), PRIMARY KEY(id))';

Każda tabela musi posiadać co najmniej jedno pole, dodatkowo musi posiadać co najmniej jedno pole, które jednoznacznie identyfikuje wiersz w tabeli - tak zwany klucz główny. Jeśli w tabeli jest masa danych a Ty znasz klucz główny jednego z wierszy wtedy możesz bez problemu dostać się do tego wiersza.W naszym przypadku kluczem głównym jest pole pierwsze - id. Przeważnie nadaje jako klucz główny określa się pierwsze polew tabeli. Dodatkowo klucz główny posiada dwa atrybuty: pierwszy - NOT NULL oznaczający, że wartość tego pola nigdy nie może być pusta; drugi - AUTO_INCREMENT oznaczający że wartość pola będzie automatycznie zwiększana przez bazę danych przy dodawaniu kolejnych rekordów. Atrybut AUTO_INCREMENT możemy stosować tylko do pól typu całkowitoliczbowego.
Dostępnych jest wiele typów pól, najpopularniejsze przedstawiam poniżej:
- char(x) - ciąg znaków o maksymalnej długości x, gdzie x nie może być większy od 255
- blob - binarny ciąg znaków o długości ograniczonej przez pamięć twojego serwera
- text - tekstowy ciąg znaków o długości ograniczonej przez pamięć twojego serwera
- integer - liczba całkowita z przedziału -2147483647 do 2147483647
- data - data w formacie określonym przez ustawienia serwera
- year - rok, jeśli zostanie podany zły, jego wartość zmieni się w 0000
- decimal(x, y) - liczba dziesiętna, gdzie x oznacza maksymalną liczbę cyfr, a y maksymalną liczbę

SQL: dodawanie rekordów

Do utworzonej tabeli przydałoby się dodać do jakiś rekord, robimy to według następującej składni :

INSERT INTO nazwa_tabeli (nazwa_pola1, nazwa_pola2) VALUES (wartosc_pola1, wartosc_pola2)

Teraz pora na przykład, załóżmy, że chcemy dodać do naszej tabeli nowego zawodnika, operacja ta wygląda tak:

$zapytanie = "INSERT INTO `nba` (`id`, `nazwisko`, `lata`, `punkty` , `mistrzostwa`) VALUES ('', 'Jordan', '13', '32', '6')";
$idzapytania = mysql_query($zapytanie);

Według składni SQL nazwy pól i tabel powinno zawierać się w odwróconych apostrofach (`). Po wykonaniu tego zapytania w tabeli nba będzie się znajdował jeden wiersz z danymi, które podaliśmy.
Uwaga: Jako wartość pola id nie podaliśmy nic ponieważ jest to pole typu AUTO_INCREMENT a co za tym idzie serwer baz danych sam nada temu polu kolejną wartość. Jako, że jest to pierwszy rekord w tej tabeli wartość pola id w tym rekordzie będzie wynosiła 1

Zapytania do bazy danych mysql php

Tworzenie Zapytania do bazy danych mysql php

Aby wykonać jakiekolwiek operacje na bazie danych należy wysłać do niej informacje o tym co chcemy zrobić. Wszystkie informacje wysyłamy w postaci zapytań do bazy danych mysql, wykorzystując funkcje php składnia:

mysql_query([zapytanie]);

Zapytanie do bazy danych mysql składnia:

$zaptanie = "treść zapytania SQL";
$idzapytania = mysql_query($zapytanie);

Wykonując ta operację zmienna $idzapytania będzie zawierała identyfikator zapytania Jezeli zapytanie zostanie wykonane pomyślnie. W przypadku, gdy popełniliśmy błąd w zapytaniu zmienna $idzapytania będzie zawierała wartość false. zródło webmade.org

Tabs jQuery

Prosty tabs w jQuery

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {

$("#tabs").tabs();

});

</script>

</head>

<body style="font-size:62.5%;">

<div id="tabs">

<ul>

<li><a href="#fragment-1"><span>Zakladka pierwsza</span></a></li>

<li><a href="#fragment-2"><span>Zakladka druga</span></a></li>

<li><a href="#fragment-3"><span>Zakladka trzecia</span></a></li>

<li><a href="#fragment-4"><span>Zakladka ...itp</span></a></li>

</ul>

<div id="fragment-1">

<p>Pierwsza zakladka kod :)</p>

<pre><code>$('#example').tabs();</code></pre>

</div>

<div id="fragment-2">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

<div id="fragment-3">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

<div id="fragment-4">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

</div>

</body>

</html>

Prosta strona w php

Jest to bardzo prosty przykład ale demonstruje sposób budowania stron w php
Nagłówek strony naglowek.php

<?php
// sprawdzenie czy zmienna $add_site istnieje
if(!$add_site) exit;
?>
<div align="center">
<IMG SRC="gfx/logo1.jpg">
</div>

Teraz menu_lewe.php to będzie nasza nawigacja

<?php
// sprawdzenie czy zmienna $add_site istnieje
if(!$add_site) exit;
?>
<a href="index.php?go=start">Link 1</a><br />
<a href="index.php?go=1">Link 2</a><br />
<a href="index.php?go=2">Link 3</a><br />
<a href="index.php?go=3">Link 4</a><br />
<a href="index.php?go=4">Link 5</a><br />
<a href="index.php?go=5">Link 6</a>

Teraz miejsce gdzie będziemy ładować podstrony start.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<head>
<title>strona w PHP</title>
</head>
<body>
<h3> </h3>
<h3 align="center">Przykładowa treść do linku załadowanego </h3><h1 align="center">1</h1>
</body>

No i stopka.php

<?php
// sprawdzenie czy zmienna $add_site istnieje
if(!$add_site) exit;
//zmienna $ip przyjmie warto¶æ odpowiadaj±c± IP klienta
   if ($_SERVER['REMOTE_ADDR'] == '')
   {
      $ip = $_SERVER['REMOTE_ADDR'];
   } else $ip = $_SERVER['REMOTE_ADDR'];
?>
<div align="center">
<BR>
   <?php
      echo "Twoje IP: $ip"
   ?>
   <BR>
   <p>Jeste¶ <?php echo($dane[0]); ?> go¶ciem na mojej stronie.</p>
</div>

Dokładam stylizację całości w css

<STYLE TYPE="text/css">

</STYLE>

Na koniec przykładowe strony w html-u które będziemy sobie ładować z pozycji menu
1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<head>
<title>strona w PHP</title>
</head>
<body>
<h3> </h3>
<h3 align="center">Przykładowa treść do linku załadowanego </h3><h1 align="center">2</h1>
</body>

2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<head>
<title>strona w PHP</title>
</head>
<body>
<h3> </h3>
<h3 align="center">Przykładowa treść do linku załadowanego </h3><h1 align="center">3</h1>
</body>

3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<head>
<title>strona w PHP</title>
</head>
<body>
<h3> </h3>
<h3 align="center">Przykładowa treść do linku załadowanego </h3><h1 align="center">4</h1>
</body>

4,5,6 html .Tworzymy na tej samej zasadzie

środa, 2 października 2013

Joomla B2J Contact

Joomla B2J contact Polecam wszystkim ten znakomity komponent .Sporo opcji dobra konfiguracja

Shadowbox jak działa

Shadowbox jak działa jak zastosować

Pierwsza sprawa pobieramy aktualną wersje shadowbox.js z e strony Link
Teraz po rozpakowaniu możemy doknoać jej implementacji na własne potrzeby.Pliki shadowbox.js i shadowbox.css są załaczone w pobieranych paczkach .Można je konfigurować ale z reguły nie ma takiej potrzeby.Może po za plikem shadowbox.css który odpowiada z a wyglad pojawiającego się okna.Ten plik shadowbox.css bywa najczęściej zmieniany
Co robimy po kolei

w sekcji head dodajemy:

<link href="css/shadowbox.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
W sekcji body:

     
    <a href="images/1max.jpg" rel="shadowbox[images]"><img src="images/min/1min.jpg" width="130" height="98"></a>
    <a href="images/2max.jpg" rel="shadowbox[images]"><img src="images/min/2min.jpg" width="130" height="98"></a>
    <a href="images/3max.jpg" rel="shadowbox[images]"><img src="images/min/3min.jpg" width="130" height="98"></a>

<a href="images/4max.jpg" rel="shadowbox[images]"><img src="images/min/4min.jpg" width="130" height="98"></a>

<a href="images/flash.swf" rel="shadowbox[images];width=900;height=120">plik flash</a><br>

<a href="www/index.html" rel="shadowbox">strona www lokalnie</a><br>

<a href="http://www.onet.pl" title=" www.onet.pl " rel="shadowbox; ">strona w necie</a><br>

<a href="http://www.youtube.com/embed/Dj-yhEoKqCY" title=" Soul of BODYBUILDING " rel="shadowbox; player=iframe; width=420; height=315">Film na youtube</a><br>

<a href="http://www.youtube.com/embed/Dj-yhEoKqCY?autoplay=1" title=" Soul of BODYBUILDING " rel="shadowbox; player=iframe; width=420; height=315">Film na youtube autopley </a><br>

całość na stronie
index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>shadobox tutorial</title>
<link href="css/h.css" rel="stylesheet" type="text/css">

<link href="css/shadowbox.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<div class="container">
<div class="header">Projektowanie stron internetowych tutoriale Lighbox</div>
<div class="content">
    <h1>Shadowbox</h1>
    <p align="center">
        
     
    <a href="images/1max.jpg" rel="shadowbox[images]"><img src="images/min/1min.jpg" width="130" height="98"></a>
    <a href="images/2max.jpg" rel="shadowbox[images]"><img src="images/min/2min.jpg" width="130" height="98"></a>
    <a href="images/3max.jpg" rel="shadowbox[images]"><img src="images/min/3min.jpg" width="130" height="98"></a>
    
    
    <a href="images/4max.jpg" rel="shadowbox[images]"><img src="images/min/4min.jpg" width="130" height="98"></a>
    
    <br>
    
    <a href="images/flash.swf" rel="shadowbox[images];width=900;height=120">plik flash</a><br>
    
    
    <a href="www/index.html" rel="shadowbox">strona www lokalnie</a><br>
    
    
    <a href="http://www.onet.pl" title=" www.onet.pl " rel="shadowbox; ">strona w necie</a><br>
    
    
    <a href="http://www.youtube.com/embed/Dj-yhEoKqCY" title=" Soul of BODYBUILDING " rel="shadowbox; player=iframe; width=420; height=315">Film na youtube</a><br>
    
    
     <a href="http://www.youtube.com/embed/Dj-yhEoKqCY?autoplay=1" title=" Soul of BODYBUILDING " rel="shadowbox; player=iframe; width=420; height=315">Film na youtube autopley </a><br>
    
    </p>
    </div>
<div class="footer">
    <p>WEB-kleszewski.Projektowanie stron internetowych</p>
    </div>
</div>
</body>
</html>

plik css strony głownej h.css

@charset "utf-8";
body {
   font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
   background: #4E5869;
   margin: 0;
   padding: 0;
   color: #000;
}
/* ~~ Selektory elementów i znaczników ~~ */
ul, ol, dl { /* Ze względu na różnice w zachowaniu przeglądarek, dobrą praktyką jest używanie marginesów i odstępów wewnętrznych o zerowej szerokości dla elementów typu lista. Aby ułatwić sobie zachowanie spójności, można określić pożądane wartości albo tutaj, albo w parametrach elementów listy (LI, DT, DD). Pamiętaj, że wszelkie wprowadzone tu wartości zostaną przeniesione kaskadowo na listy klasy .nav, chyba że utworzysz bardziej wyspecjalizowany selektor. */
   padding: 0;
   margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
   margin-top: 0;   /* Usunięcie górnego marginesu pozwala obejść problem związany z uciekaniem marginesów z bloku DIV, w którym są zawarte. Pozostały margines dolny zapewni odstęp od kolejnych elementów. */
   padding-right: 15px;
   padding-left: 15px; /* Dodanie bocznych odstępów wewnętrznych (właściwość „padding”) do elementów umieszczanych wewnątrz bloku DIV — zamiast do samego bloku DIV — pozwala uniknąć konieczności przeprowadzania obliczeń położenia w modelu blokowym. Alternatywną metodą jest użycie zagnieżdżonego bloku DIV z odstępami wewnętrznymi po bokach. */
}
a img { /* Ten selektor usuwa domyślną, niebieską ramkę, wyświetlaną przez niektóre przeglądarki wokół obrazków otoczonych łączem. */
   border: none;
}
/* ~~ Ostylowanie łączy serwisu musi być definiowane w podanej tu kolejności. Dotyczy to również grupy selektorów odpowiedzialnych za efekt „hover” (zmianę wyglądu łącza po umieszczeniu nad nim kursora) ~~ */
a:link {
   color:#414958;
   text-decoration: underline; /* Jeśli nie zamierzasz tworzyć łączy o wyjątkowo nietypowym wyglądzie, najlepiej zachować wyróżnienie graficzne w postaci podkreślenia, które pozwala na szybkie zidentyfikowanie łącza. */
}
a:visited {
   color: #4E5869;
   text-decoration: underline;
}
a:hover, a:active, a:focus { /* Ta grupa selektorów jest odpowiedzialna za stworzenie efektu „hover” przy nawigacji za pomocą klawiatury, identycznego z efektem uzyskiwanym przez użytkownika korzystającego z myszy. */
   text-decoration: none;
}
/* ~~ Ten kontener otacza wszystkie pozostałe bloki DIV, określając ich szerokość jako wartość procentową. ~~ */
.container {
   width: 80%;
   max-width: 1260px;/* Warto ustawić maksymalną szerokość, aby uniknąć zbytniego rozszerzania się układu na dużym monitorze. Zapewnia to lepszą czytelność (wiersze są krótsze). Program IE6 nie obsługuje tej deklaracji. */
   min-width: 780px;/* Warto ustawić minimalną szerokość, aby uniknąć nadmiernego zwężania się układu. Zapewnia to lepszą czytelność (korzystniejszą długość wierszy) w kolumnach bocznych. Program IE6 nie obsługuje tej deklaracji. */
   background: #FFF;
   margin: 0 auto; /* Wartość „auto” po bokach z w połączeniu z określoną szerokością zapewnia wyśrodkowanie układu. Nie jest to konieczne, jeśli szerokość bloku .container ustawi się na 100%. */
   margin-bottom:20px;
   margin-top:20px;
   box-shadow:10px 10px 20px #000;
}
/* ~~ Nagłówek nie ma określonej szerokości. Rozciągnie się na pełną szerokość układu. Zawiera zastępczy obraz, który trzeba zastąpić łączem do własnego logo. ~~ */
.header {
   background: #6F7D94;
   padding:10px;
   text-align:center;
}
/* ~~ Informacje dotyczące układu ~~
1) Odstępy wewnętrzne (właściwość „padding”) dodaje się tylko na górze i/lub na dole bloku DIV. Elementy wewnątrz tego bloku DIV mają odstępy wewnętrzne po bokach. Pozwala to uniknąć konieczności skomplikowanego obliczania położenia w modelu blokowym. Należy pamiętać, że jeśli zdefiniujesz odstępy wewnętrzne lub krawędzie po bokach dla bloku DIV, to zostaną one dodane do zdefiniowanej szerokości bloku. Dlatego ostateczna szerokość całego bloku będzie inna. Możesz również usunąć odstępy wewnętrzne z elementu zawartego w bloku DIV i umieścić go w kolejnym bloku DIV bez zdefiniowanej szerokości, ale z podanymi odstępami wewnętrznymi.
*/
.content {
   padding: 10px 0;
}
/* ~~ Ten selektor grupowy obsługuje listy w bloku .content ~~ */
.content ul, .content ol {
   padding: 0 15px 15px 40px; /* Ten odstęp wewnętrzny jest odzwierciedleniem odstępu wewnętrznego z prawej, zdefiniowanego wcześniej w regule dla nagłówków i akapitów. Odstęp wewnętrzny na dole zapewnia odpowiednie odległości od innych elementów listy. Odstęp wewnętrzny z lewej tworzy wcięcie. Wartości te można swobodnie dostosowywać. */
}
/* ~~ Stopka ~~ */
.footer {
   padding: 10px 0;
   background: #6F7D94;
}
/* ~~ Różne klasy float/clear ~~ */
.fltrt { /* Ta klasa umożliwia tworzenie elementów pływających z prawej strony (właściwość „float:right”). Element pływający musi poprzedzać w kodzie element, obok którego ma się znajdować na stronie. */
   float: right;
   margin-left: 8px;
}
.fltlft { /* Ta klasa umożliwia tworzenie elementów pływających z lewej strony (właściwość „float:left”). Element pływający musi poprzedzać w kodzie element, obok którego ma się znajdować na stronie. */
   float: left;
   margin-right: 8px;
}
.clearfloat { /* Tę klasę można wykorzystać w znaczniku <br /> lub pustym bloku DIV, który stanowi ostatni element za ostatnim pływającym blokiem DIV (wewnątrz bloku o identyfikatorze #container), jeśli usunięto blok #footer lub przeniesiono go poza blok #container. */
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}

Przekierowanie strony javascript sneaky

Przekierowanie strony javascript sneaky Javascript redirects

Najogólniej skrypt umieszczony na stronie ,po określonym czasie przekierowuje "otwiera"inna strone bez ingerencji osoby ją oglądającej .Brzmi znajomo ? .Oczywiście to praktyka wielu np stron z reklamami
Uwaga taka praktyka jest postrzegana przez google jako nie dopuszczalna i nie akceptowana.Grozi ban .Stosowanie takich praktyk to typowy przykład oszukiwania przeglądarek .

Poniżej przykłąd przekierowania bez kliknięcia po 10 sekundach

$(document).ready(function() {
$('#splash').hide();
$('#splash').click(function(){
             $(this).fadeOut(1000,function() {
                     window.location = 'http://www.example.com'; });
             });
$('#splash').fadeIn(1000, function() {
           window.setTimeout ( function() {
             $('#splash').fadeOut(1000, function() {
               window.location = 'http://www.examle.com'; }) }
             , 10000);
     });
});

slider jquery

Jak wykonać prosty slider jquery

Zaczniemy od pliku index.html do ktorego będziemy ładować nasz slider

<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Codaslider : JQuery Slider Plugin" />

<link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">

<style>
h1{
background-color:#000;
color:#F60;
text-align:center;
font-family:Tahoma, Geneva, sans-serif;
}
h2 {
background-color:#09F;
color:#FFF;
font-family:"Times New Roman", Times, serif;
text-align:center;
}
h3{
background-color:#000;
color:#FFF;
font-family:"Century Gothic";
size:12px;
text-align:center;
}
</style>


<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>

<script src="./js/jquery.coda-slider-3.0.min.js"></script>
<title>Slider by adam kleszewski</title>
<script>
$(function(){
$('#slider-id').codaSlider();
/* Można inczaej:
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});

*/
});
</script>
</head>
<body>
<h1 class="coda-slider">Prosty slider.WEB-kleszewski.Projektowanie stron internetowych</h1>
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Strona 1</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych.</h1><h3>Stopka strony 1</h3></p>
</div>
<div>
<h2 class="title">Strona 2</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych.</h1><h3>Stopka strony 2</h3> .</p>
</div>
<div>
<h2 class="title">Strona 3</h2>
<p><h1>WEB-kleszewski .Projektowanie stron internetowych.</h1> <h3>Stopka strony 3</h3></p>
</div>
<div>
<h2 class="title">Strona 4</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych</h1><h3>Stopka strony 4</h3></p>
</div>
</div>
</body>
</html>

Jak widać w powyższym pliku są ładowane pliki js : oraz jeden css

jquery-1.7.2.min.js
jquery-ui-1.8.20.custom.min.js
jquery.coda-slider-3.0.min.js
coda-slider.css

Ze względu na dużą ilośc kodu w poszczególnych plikach.Nie będziemy ich tutaj umieszczać .Można ją pobrać wszystkie tutaj LINK.Nadmienie tylko że poszczególne pliki należy umieścic w trzech osobnych katalogach js,css,img
Podam jeszcze ustawienia domyślne :javascript

autoHeight: true,
autoHeightEaseDuration: 1500,
autoHeightEaseFunction: "easeInOutExpo",
autoSlide: false,
autoSliderDirection: 'right',
autoSlideInterval: 7000,
autoSlideControls: false,
autoSlideStartText: 'Start',
autoSlideStopText: 'Stop',
autoSlideStopWhenClicked: true,
continuous: true,
dynamicArrows: true,
dynamicArrowsGraphical: false,
dynamicArrowLeftText: "« w lewo",
dynamicArrowRightText: "w prawo»",
dynamicTabs: true,
dynamicTabsAlign: "center",
dynamicTabsPosition: "top",
firstPanelToLoad: 1,
panelTitleSelector: "h2.title",
slideEaseDuration: 1500,
slideEaseFunction: "easeInOutExpo"

microdata ,itemscope ,itemtype

Jak oznaczyć zawartość za pomocą microdata

1.Co to jest microdata:

Kiedy czytasz strone bądz wstęp do niej wisz o czy jest w zasadzie . Ale wyszukiwarki mają ograniczoną wiedzę o tym,nie wiedzą o czym się dyskutuje na tych stronach.

Dodając dodatkowe znaczniki w kodzie HTML swojej strony internetowej które mówią: "Hej wyszukiwarka", informacja ta opisuje ten szczególny film, lub miejsca, lub osoby lub wideo"-możesz pomóc wyszukiwarkom i innych aplikacjiom w lepszym zrozumieniu treści strony i wyświetlić go w użyteczny, sposób. microdata jest to zestaw znaczników, wprowadzony z HTML5, który pozwala to zrobić.

itemscope oraz itemtype

Zacznijmy od konkretnego przykładu. Wyobraź sobie, masz stronę o avatar-fil strony z linkiem do treści filmu, informacje o reżyser, i tak dalej. Kod HTML może wyglądać następująco:

<div>
<h1> Avatar </ h1>
<span> Reżyseria: James Cameron (ur. 16 sierpnia 1954) </ span>
<span> Science fiction </ span>
<a href="../movies/avatar-theatrical-trailer.html"> Trailer </ a>
</ Div>

Aby rozpocząć, zidentyfikować fragment strony, który jest "o" Avatar film. Aby to zrobić, należy dodać element itemscope do HTML, który otacza informacje na temat przedmiotu poszukiwań, tak:

<div itemscope>
   <h1> Avatar </ h1>
   <span> Reżyseria: James Cameron (ur. 16 sierpnia 1954) </ span>
   <span> Science fiction </ span>
   <a href="../movies/avatar-theatrical-trailer.html"> Trailer </ a>
</ Div>

Dodając itemscope , użytkownik określa, że HTML zawarte w <div>...</div> blok o konkretnej pozycji.Ale to nie wszystko, co przydatne do określenia, że ??istnieje element który chcemy pokazać przeglądarce Możemy jeszcze zaznaczyć, jakiego rodzaju jest to element. Można określić typ elementu za pomocą itemtype atrybut natychmiast po itemscope

<div itemscope itemtype="http://schema.org/Movie">
   <h1> Avatar </ h1>
   <span> Reżyseria: James Cameron (ur. 16 sierpnia 1954) </ span>
   <span> Science fiction </ span>
   <a href="../movies/avatar-theatrical-trailer.html"> Trailer </ a>
</ Div>

Określa, że element zawarty w div jest w rzeczywistości filmem, w rozumieniu schema.org hierarchii typów. Typy elementów są dostarczane jako adresy URL, w tym przypadku http://schema.org/Movie .

itemprop

Jakie dodatkowe informacje możemy dać wyszukiwarce dane o filmie Avatar ? Filmy mają ciekawe właściwości, takie jak aktorzy, reżyser, ocena. Do oznaczania właściwości "towaru", należy użyć itemprop atrybut. Na przykład, aby określić dyrektora filmu, dodajemy itemprop="director" do elementu otaczającego reżysera nazwę. (Jest pełna lista wszystkich właściwości można skojarzyć z http://schema.org/Movie).

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Należy pamiętać, że dodaliśmy dodatkowe <span>...</span> znaczniki do mocowania itemprop atrybuty do odpowiedniego tekstu na stronie. <span> ,tagi są renderowane przez przeglądarkę internetową, więc to wygodny element HTML do korzystania z itemprop .

Wyszukiwarki mogą teraz zrozumieć nie tylko to http://www.avatarmovie.com mają tu adres URL, ale również, że jest to adres URL do większego zbioru o science-fiction Avatar , który został wyreżyserowany przez Jamesa Camerona.

Embedded items osadzone elementy

Czasami wartość właściwość pozycja może być inna pozycja z własnego zbioru właściwości. Na przykład, możemy określić, że reżyser tego filmu jest to element typu osoby i osoba ta może mieć właściwości inne np "name i birthDate" (imię data urodzenia). Aby określić, np. wartość nieruchomości to kolejny element, możesz rozpocząć nowy itemscope natychmiast po odpowiednim itemprop .

<div itemscope ItemType ="http://schema.org/Movie">
   <H1 itemprop = "nazwa" &g; Avatar </ h1>
   <div itemprop="director" itemscope itemtype="http://schema.org/Person">
   Reżyseria: James Cameron <span itemprop="name"> </ span> (ur. <span itemprop="birthDate"> 16 sierpnia 1954) </ span>
   </ Div>
   <span itemprop="genre"> Science fiction </ span>
   <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> Trailer </ a>
</ Div>

schema.org types and properties rodzaje schema.org i właściwości.

Nie wszystkie strony internetowe są o filmach i losach jednostki, oprócz filmów i Osób typów schema.org opisuje wiele innych typów elementów, z których każdy ma swój własny zestaw właściwości, które mogą być używane do opisania pozycji.
Najszerszy typ elementu to Thing , który ma cztery właściwości: name , description , url, image .
Tutaj mamy link do pełnej listy wszystkich elementów LINK
I konkretny przykład zastosowania LINK
Oto kilka uwag o których warto pamiętać podczas dodawania znaczników schema.org na swoich stronach internetowych:

Im więcej typów tym lepiej, z wyjątkiem ukrytego tekstu. Ogólnie rzecz biorąc, im więcej treści można oznaczyć, tym lepiej. Jednak co do zasady, należy oznaczyć tylko treści, które są widoczne dla osób odwiedzających stronę internetową, a nie treści w ukrytych div lub innych ukrytych elementach strony.
Podczas przeglądania typy schema.org, można zauważyć, że wiele właściwości mają typ "expected types". "Oczekiwano typów". Oznacza to, że do np.wartość nieruchomości może być osadzony element doatkowy bardziej szczegółowy

Ale to nie wymóg, to dobrze jest to tylko zwykły tekst lub adres URL. Ponadto, gdy oczekiwany typ jest określony, to również dobrze osadzić element, który jest rodzajem pochodnym (dzieckiem) oczekiwanego typu. Na przykład, jeśli oczekiwany jest typ miejsca, to jest również porządane , aby osadzić jakie to miejsce.
Korzystanie z właściwości url. Niektóre strony internetowe są o określonej pozycji. Na przykład, możesz mieć stronę internetową o jednej osobie, który można oznaczyć za pomocą typ elementu Person (osoba). Inne strony posiada zbiór elementów opisanych na nich. Na przykład, witryna firma może mieć pracowników
z życiorysami na konkretnych stronach ,wtedy podajemy z linkiem do strony z profilem dla każdej osoby.

Na stronach takich jak np o wielu przedmiotach, należy oznaczyć każdą pozycję oddzielnie i dodać właściwość url do linku do odpowiedniej strony dla każdego elementu,np.

<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url"> Alice Jones </ a>
</ Div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url"> Bob Smith </ a>
</ Div>

Testowanie znaczników

należy również sprawdzić swoje znaczniki schema.org upewnić się, że jest realizowany prawidłowo. Google udostępnia narzędzie, które można wykorzystać do testowania znaczników i zidentyfikować ewentualne błędy.{jcomments on}

Przejścia CSS3 Transitions

Przejścia CSS3,CSS Transitions

Dzięki CSS3, możemy dodać efekt przy przejściu z jednego stylu do drugiego, bez użycia animacji Flash lub JavaScript.

Internet Explorer nie obsługuje jeszcze właściwość przejścia.
Firefox 4 wymaga przedrostek-moz-.
Chrome i Safari wymaga prefiks-webkit-.
Opera wymaga prefiks-o-.

CSS3 przejścia to efekty, które pozwalają elementem stopniowo zmieniać się od jednego stylu do drugiego.

Aby to zrobić, należy określić dwie rzeczy:

Określ właściwości CSS, który chcesz dodać efekt
Określić czas trwania efektu.

Przykład 1 :
Efekt przejścia na własność szerokości, czas trwania: 2 sekundy:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Uwaga: Jeśli czas nie jest określony, przejście nie będzie miało wpływu, bo wartość domyślna to 0.

Efekt rozpoczyna się po wprowadzeniu zmian CSS właściwość wartość. Typowa zmiana właściwości CSS byłoby, gdy użytkownik myszy nad elementem:

Przykład 2:
Określ: hover dla elementów <div>:

div:hover
{
width:300px;
}

Uwaga: Gdy kursor myszy z elementu, stopniowo zmienia się z powrotem do jej pierwotnego stylu

Przykład 3:
Wiele zmian

Aby dodać przejściowy wpływ na więcej niż jednym stylu, dodać więcej właściwości, oddzielonych przecinkami:
Dodaj wpływ na wysokość, szerokość i transformacji:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Właściwości transformacji

Poniższa tabela zawiera wszystkie właściwości przejścia:

TABELA:

własność	ops	css
Transition -Przejście	Nieruchomość skrót do ustawiania cztery właściwości przejścia do jednego majątku	3
Transition-property-Przejście własności	Określa nazwę właściwości CSS, do którego przejście jest stosowana	3
Transition-duration - Przejscie czas trwania	Definiuje czas, przez przejście trwa. Domyślnie	3
Transition-timing-function- Przejście czas trwania funkcji	Opisuje jak prędkość podczas przejścia zostanie obliczona. Default "łatwość"	3
Transistion-Delay -Przejście opóznienia	Określa, kiedy przejście zacznie. Domyślnie 0	3

Te dwa przykłady poniżej przedstawia wszystkie właściwości przejścia:

Przykład 1:

Korzystać ze wszystkich właściwości przejścia w jednym przykładzie:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Przykład 2:

Te same efekty przejścia jak wyżej, korzystając z właściwości przejścia skróconą metodą

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

Pisanie modułu joomla 2.5

Dzisiaj pokażę jak napisać moduł joomla prosty
W skład modułu joomla wejdą
-mod_helloworld.php (silnik całego modułu)
-mod_helloworld.xml (specyfikacja konfiguracja ustawienia)
-helper.php (klasy pomocnicze umożliwiaja ładowanie potrzebnych ninformacji wyświetlanych w module)
-tmpl/default.php ( to jest szablon modułu .Zbierze informacje które wygenerował moduł i pokaże je w odpowiedniej formie)
index.html 2 razy w folderze głównym i folderze tmpl gdzie mamy plik default.php
Definiujemy klasę pomocniczą:

$hello = modHelloWorldHelper::getHello( $params );

Tworzymy mod_helloworld.php :

<?php
/**
* Adam Kleszewski projektowanie stron internetowych "joomla tworzenie modułu"
* Hello World! Module Entry Poin
* @package Joomla.Tutorials
* @subpackage Modules
* @link http://dev.joomla.org/component/option,com_jd-wiki/Itemid,31/id,tutorials:modules/
* @license GNU/GPL, see LICENSE.php
* mod_helloworld is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
*/

// no direct access /zatrzymujemy bezpośredni dostęp do strony
defined( '_JEXEC' ) or die( 'Restricted access' );

// dołanczamy funkcje syndykatów tylko raz
require_once( dirname(__FILE__).DS.'helper.php' );

$hello = modHelloWorldHelper::getHello( $params );
require( JModuleHelper::getLayoutPath( 'mod_helloworld' ) );
?>

Tworzymy helper.php plik klasa pomocnicza służaca do pobierania danych wyświetlanych w module klasa będzie posiadała jedna metodę getHello().
i zwróci komunikat ‘Hello, World’ O ile taki sobie ustawimy w komunikacie

<?php
/**
* Adam Kleszewski projektowanie stron internetowych "joomla tworzenie modułu"
* Helper class for Hello World! module
* @package    Joomla.Tutorials
* @subpackage Modules
* @link http://dev.joomla.org/component/option,com_jd-wiki/Itemid,31/id,tutorials:modules/
* @license        GNU/GPL, see LICENSE.php
* mod_helloworld is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
*/
class modHelloWorldHelper
{
    /**
     * Pobiera wiadomość 'Hello, World!'
     *
     * @param array $params Obiekt zawierający parametry modułu
     * @access public/dostęp publiczny
     */
    public static function getHello( $params )
    {
        return 'Hello, World!<br>TO JEST FAJNY MODUŁ<br>Jego zadaniem jest pokazywanie treści uprzednio zefiniowanej w procesie tworzenia';
    }
}
?>

Tworzymy folder tmpl a w nim plik default.php Plik default.php jest szablem , który wyświetla dane wyjściowe moduł.
Ważnym uwaga plik szablonu ma taki sam zakres jak w pliku mod_helloworld.php. Oznacza to, że zmienna $hello mogą być zdefiniowane w pliku mod_helloworld.php i następnie używane w pliku szablonu, bez żadnych dodatkowych oświadczeń lub wywołania funkcja

<?php // no direct access - Zatrzymujemy bezposredni dostęp do strony
defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<?php echo $hello; ?>

Tworzymy mod_helloworld.xml Mod_helloworld.xml jest używana do określenia, które pliki trzeba skopiować Instalator jest używany przez Menedżera moduł, aby określić, które parametry są używane do konfigurowania modułu. Inne informacje o module określone są również w tym pliku.

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5.0" client="site" method="upgrade">
    <name>Hello, World!</name>
    <author>adam kleszewski</author>
   <authorEmail>adam_kleszewski@wp.pl<;/authorEmail>
   <authorUrl>www.strony.internetowe.jupe.pl</authorUrl>
   <creationDate>06.2013</creationDate>
   <copyright>(C) 2013 kleszewski</copyright>
   <license>GNU/GPL http://www.gnu.org/copyleft/gpl.html</license>
   <version>1.0.2</version>
   <description>Moduł wyswietla proty tekst</description>
    <files>
        <filename>mod_helloworld.xml</filename>
        <filename module="mod_helloworld">mod_helloworld.php</filename>
        <filename>index.html</filename>
        <filename>helper.php</filename>
        <filename>tmpl/default.php</filename>
        <filename>tmpl/index.html</filename>
    </files>
    <config>
    </config>
</extension>

wtorek, 1 października 2013

modalizer subtemplate

modalizer subtemplate własny css

Dzisiaj pokażę w jaki sposób dokonać zmiany okna modalnego oferowanego przez dodatek dla joomla o nazwie modalizer.Domyslnie ten plugin wykorzystuje "print css" co znaczy że wszystko co wyskakuje w tych oknach , nie zachowuje stylu css strony.Mówiąc inaczej jest białe.Jak to zmienić?
W templacie szablonu który mamy ustawiony jako domyślny tworzymy (jeżeli nie ma tam takiego pliku) plik o nazwie
component.php

<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl . '/templates/' . $this->template; ?>/css/print.css" type="text/css" />
</head>
<body class="contentpane">
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>

Jak widać powyżej jest tam dołaczączony link do print.css:

<link rel="stylesheet" href="<?php echo $this->baseurl . '/templates/' . $this->template; ?>/css/print.css" type="text/css" />

Co należy teraz zrobić? .Chyba juz wszystko jasne .W folderze css tworzymy (jeżeli nie mamy takiego stylu) print.css
I w nim dokonujemy stylizacji wszystkiego co pojawi nam się w oknie modalizera.Dziekuje za uwagę
Adam Kleszewski

Mapa Google

Mapa Google jak zastosować na stronie

Witam dzisiaj pokażę w jaki sposób umieścic maps google na dowolnej stronie.Do dzieła.W sekcji head strony umieszczamy linki do plików js link do pobrania ich podam na końcu artykułu

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mapsta.min.js"></script>
<script type="text/javascript" src="js/jquery.mapsta.js"></script>

Następnie tworzymymiejsce w którym ma ukazac się nasza mapa ja wybrałem taką opcję:

<div id="mapa"> </div>

<div id="mapa2"></div>

Do znacznika id mapa i mapa2 przypiszemy teraz w javascript odpowiednie funkcje które umieszczamy również w sekcji head:

<script type="text/javascript">

   $(function(){

       $('#mapa').mapsta({
           pozycjas: 53.759533,
           pozycjad: 19.198737
       });

   });

</script>

<script type="text/javascript">

   $(function(){

       $('#mapa2').mapsta({
           pozycjas: 53.759533,
           pozycjad: 19.198737,
           tytul: 'Tytuł markera',
           opis: '<h2>Prabuty</h2><p>Biedronka w Prabutach</p>',
           nawigacja: 'tak',
           typ: 'satelita'
       });

   });

</script>

Liczby :pozycjas: 53.759533, pozycjad: 19.198737 .To pozycje punktów na mapie które znajdują się w każdym pobieranym kodzie mapy z google maps
Wszystki opcje dodatku do zastosowania
pozycjas: --- szerokość geograficzna
pozycjad: ---długość geograficzna
zoom: --- powiększenie mapy cyfry od 1 (domyślnie 18)
nawigacja: --- tak/nie - menu nawigacyjne na mapie
typ: --- rodzaj mapy: mapa, teren, satelita, hybryda
chmurka: --- otwarta/zamknieta - stan chmurki po wczytaniu mapy (domyślnie zamknięta), bez markera zawsze otwarta
opis: --- zawartość chmurki - kod html
szerokosc: --- maksymalna szerokość chmurki
tytul: --- tytuł markera po najechaniu (tak jak title przy linku)
marker: --- tak/nie pokazanie markera

Przydatne linki:
    Google Maps V3 – podstawy
    Google Maps V3 – tutoriale
    Google Maps V3 – przykłady
    Google Maps V3 – dema
    Przydatne narzędzie do testowania kodów API

jQuery slider

Przedstawię klika możliwości uzycia jQuery do popularnego przewijania zdjęć

Co będzie potrzebne:
1.Biblioteki jQuery
jquery.jcarousel.js,jquery.jcarousel.min.js,jquery-1.4.2.min.js
2.Pliki css strony głównej i sliderów
skin.css,skin.css,site.css
3.grafika
I zdaje się wszystko jeżeli coś przeoczyłem ,nic nie szkodzi cały tutorial zostanie spakowany i będzie do pobrania na samym końcu.

Przykład 1 slider poziomyw sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>

<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>

W sekcji <body></body> dajemy miejsce gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<ul id="mycarousel" class="jcarousel-skin-tango">
     <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

Przykład 2 slider pionowy
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});
</script>

W sekcji <body></body> dajemy miejsce gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

Przykład 3 slider z autoprzewijaniem
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
   //ta funkcja zatrzymuje przewijanie automatyczne i nie powraca do niego po zjechaniu myszą
   // dla tych którym to przeszkadza proponuje zakomentowac

   

    /*carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });*/
   
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
</script>

W sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

Przykład 4 slider kontrola statyczna
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;
}
.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    padding: 0 5px;
    margin: 0 0 5px 0;
    border: 1px solid #fff;
    color: #eee;
    background-color: #4088b8;
    font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
}
.jcarousel-scroll {
    margin-top: 10px;
    text-align: center;
}
.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}
.jcarousel-scroll select {
    font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 11px;
}
</style>

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
    jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });
    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });
    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};
// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});
</script>

W sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<div id="mycarousel" class="jcarousel-skin-tango">
    <div class="jcarousel-control">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#">7</a>
      <a href="#">8</a>
      <a href="#">9</a>
    </div>
    <ul>
      <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
    </ul>
    <div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev">« Cofnij</a>
        <a href="#" id="mycarousel-next">Dalej »</a>
      </form>
    </div>
    </div>

Przykład 5 rózne stylizacje kilku sliderów na jednej stronie
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
   // Note that they use both the same configuration options (none in this case).
   jQuery('.first-and-second-carousel').jcarousel();

   // If you want to use a caoursel with different configuration options,
   // you have to initialise it seperately.
   // We do it by an id selector here.
   jQuery('#third-carousel').jcarousel({
        vertical: true,
       scroll: 2
    });
});
</script>

sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<p><a href="../slidery.html">powrót do menu głównego</a></p>
     <ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

<br/>

<ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

<br/>

<ul id="third-carousel" class=" jcarousel-skin-tango2">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

Przykład 6 slider javascript zdjecia ładowane z tablicy "array" dynamic content loading via java script
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>

<script type="text/javascript">
var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
        if (i > mycarousel_itemList.length) {
            break;
        }
        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
</script>

sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<ul id="mycarousel" class="jcarousel-skin-tango">

</ul>

Przykład 7 slider dynamiczne ładowanie w Ajax
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>

<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
    // Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;
    jQuery.get('dynamic_ajax.txt', function(data) {
        mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
    // Simply add all items at once and set the size accordingly.
    var items = data.split('|');
    for (i = 0; i < items.length; i++) {
        carousel.add(i+1, mycarousel_getItemHTML(items[i]));
    }
    carousel.size(items.length);
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});
</script>

sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider

<div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      
    </ul>

Przykład 8 slider z jQuery thickbox
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />

<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>

<script type="text/javascript" src="thickbox/thickbox.js"></script>
<script type="text/javascript">
// Set thickbox loading image
tb_pathToImage = "images/loading-thickbox.gif";
var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"},
   {url: "../images/min1.jpg", title: "Flower11"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
        if (i > mycarousel_itemList.length) {
            break;
        }
        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
        // Apply thickbox
        tb_init(item);
        carousel.add(i, item);
    }
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
</script>

sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider

<ul id="mycarousel" class="jcarousel-skin-ie7">

</ul>

Przykład 9 jQuery slider z efektem przesunięcia
w sekcji <head></head> dołanczamy następujący kod

<link href="../css/site.css" rel="stylesheet" type="text/css">
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
   if ((t/=d) < (1/2.75)) {
       return c*(7.5625*t*t) + b;
   } else if (t < (2/2.75)) {
       return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
   } else if (t < (2.5/2.75)) {
       return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
   } else {
       return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
   }
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        easing: 'BounceEaseOut',
        animation: 1000
    });
});
</script>

sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

I to by było na tyle

Etykiety

sobota, 19 października 2013

piątek, 18 października 2013

czwartek, 17 października 2013

poniedziałek, 14 października 2013

poniedziałek, 7 października 2013

niedziela, 6 października 2013

sobota, 5 października 2013

piątek, 4 października 2013

czwartek, 3 października 2013

Aby przekierować z „bez www.” na „www.”, dodaj następujący kod do pliku .htaccess:

Jak to działa tutorial

SQL - aktualizacja rekordów

SQL tworzenie tabel w bazie danych

SQL: dodawanie rekordów

Tworzenie Zapytania do bazy danych mysql php

środa, 2 października 2013

Shadowbox jak działa jak zastosować

Przekierowanie strony javascript sneaky Javascript redirects

Jak wykonać prosty slider jquery

Jak oznaczyć zawartość za pomocą microdata

1.Co to jest microdata:

itemscope oraz itemtype

itemprop

Embedded items osadzone elementy

schema.org types and properties rodzaje schema.org i właściwości.

Testowanie znaczników

Przejścia CSS3,CSS Transitions

Pisanie modułu joomla 2.5

wtorek, 1 października 2013

modalizer subtemplate własny css

Mapa Google jak zastosować na stronie

jQuery slider

Przedstawię klika możliwości uzycia jQuery do popularnego przewijania zdjęć

lubię to

Popularne posty