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">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</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&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div> 
Autor: o Brak komentarzy:

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>
Autor: o Brak komentarzy:

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      
Autor: o Brak komentarzy:
Etykiety:

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.
Autor: o Brak komentarzy:

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.
Autor: o Brak komentarzy:

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>
Autor: o Brak komentarzy:
Etykiety:

etykiety joomla

Autor: o Brak komentarzy:
Etykiety: ,

joomla 3.1.15

Autor: o Brak komentarzy:
Etykiety:

Joomla 3.1.14 co nowego

Pojawiła się wbudowana opcja tagi  szczegóły tutaj
Autor: o Brak komentarzy:
Etykiety:

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

Autor: o Brak komentarzy:
Etykiety:

poniedziałek, 7 października 2013

joomla parallax

Do poczytania tutaj 
Autor: o Brak komentarzy:

Joomla Equalheights

Ciekawy dodatek do ustawiania parametrów css w szablonie Equalheights
Autor: o Brak komentarzy:
Etykiety:

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 =&gt; $v) {
$args[] = &amp;$temp[$k];
}
Autor: o Brak komentarzy:

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)
Autor: o Brak komentarzy:

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 
Autor: o Brak komentarzy:
Etykiety: ,

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
}       
Autor: o Brak komentarzy:

piątek, 4 października 2013

smoothscroll

smoothscroll 

Jak korzystać tutorial
Autor: o Brak komentarzy:
Etykiety:

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]
Autor: o Brak komentarzy:
Etykiety:

Parallax Content Slider

Jak to działa tutorial

  1. gotowe rozwiązania
  2. eXtro CSS3 Slideshow  – extro-media.de
  3.  Parallax CK – joomlack.fr
  4.  Parallax slider – themexpert.com
  5.  Parallax Content Slider – jextensions.com
  6.   ZT Layer Slider – ZooTemplate.com
Dodatki dla joomla LINK
Autor: o Brak komentarzy:
Etykiety:

SQL - aktualizacja rekordów

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.
Autor: o Brak komentarzy:

SQL tworzenie tabel w bazie danych

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ę
Autor: o Brak komentarzy:

SQL: dodawanie rekordów

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
Autor: o Brak komentarzy:

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



Autor: o Brak komentarzy:
Etykiety:

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>
Autor: o Brak komentarzy:
Etykiety:

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>&nbsp;</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">
<!--
BODY {background: #FFF;}

A {text-decoration: none;}
.table {
    background-color:#0CF;
}

.menu {
    background-color:#f9f8f4;
font-family: Verdana;
font-size: 15px;
text-align: center;
line-height: 150%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

.tresc {
font-family: Verdana;
color:#FFF;
font-size: 15px;
background: #0CF;
text-align: justify;
line-height: 150%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-shadow:10px 10px 20px #CCC;
}

.stopka {
font-family: Verdana;
color: #000;
background: #f9f8f4;
font-size: 15px;
padding-top: 10px;
}
-->
</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>&nbsp;</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>&nbsp;</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>&nbsp;</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
Autor: o Brak komentarzy:
Etykiety:

środa, 2 października 2013

Joomla B2J Contact

Joomla  B2J contact  Polecam wszystkim ten znakomity komponent .Sporo opcji dobra konfiguracja
Autor: o Brak komentarzy:
Etykiety:

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:
<!--dodaje stylizacje okna lightbox -->
<link href="css/shadowbox.css" rel="stylesheet" type="text/css">
<!--dodaje skrypy javascript obsługa lightbox -->
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
W sekcji body:
<!--linkuje zdjęcia do wywołania shadowbox ,wartośc w nawiasie klamrowym[] to przypisanie grupy zdjęć do łacznego wyświetlania.tzn.wszystko do czego dopisano ta samą wartość w klamrach jest wyswietlane w ramach "jednego albumu"-->
     <!--implementacja album ,kilka zdjęc--> 
    <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>
    <!--end album-->
<!--implementacja pojedyńcze zdjęcie-->
    <a href="images/4max.jpg" rel="shadowbox[images]"><img src="images/min/4min.jpg" width="130" height="98"></a>
    <!--end pojedyńcze zdjęcie-->
<!--implementacja swf-->
    <a href="images/flash.swf" rel="shadowbox[images];width=900;height=120">plik flash</a><br>
    <!--end swf-->
<!--implementacja strona www.lokalnie-->
    <a href="www/index.html" rel="shadowbox">strona www lokalnie</a><br>
    <!--end www lokalnie-->
<!--implementacja strona www w necie adres bezwzgledny-->
    <a href="http://www.onet.pl" title=" www.onet.pl " rel="shadowbox; ">strona w necie</a><br>
    <!--end strona w necie-->
<!--implementacja na you tube -->
    <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>
    <!--end youtube-->
<!--you tube auto play w przypadku automatycznego odtwarzania filmu ustawiamy opcje ?autoplay=1 -->
     <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>
    <!--end autopley-->
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">
<!--dodaje stylizacje okna lightbox -->
<link href="css/shadowbox.css" rel="stylesheet" type="text/css">
<!--dodaje skrypy javascript obsługa lightbox -->
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<div class="container">
  <div class="header"><!-- end .header -->Projektowanie stron internetowych tutoriale Lighbox</div>
  <div class="content">
    <h1>Shadowbox</h1>
    <p align="center">
        <!--linkuje zdjęcia do wywołania shadowbox ,wartośc w nawiasie klamrowym[] to przypisanie grupy zdjęć do łacznego wyświetlania.tzn.wszystko do czego dopisano ta samą wartość w klamrach jest wyswietlane w ramach "jednego albumu"-->
     <!--implementacja album ,kilka zdjęc--> 
    <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>
    <!--end album-->
    <!--implementacja pojedyńcze zdjęcie-->
    <a href="images/4max.jpg" rel="shadowbox[images]"><img src="images/min/4min.jpg" width="130" height="98"></a>
    <!--end pojedyńcze zdjęcie-->
    <br>
    <!--implementacja swf-->
    <a href="images/flash.swf" rel="shadowbox[images];width=900;height=120">plik flash</a><br>
    <!--end swf-->
    <!--implementacja strona www.lokalnie-->
    <a href="www/index.html" rel="shadowbox">strona www lokalnie</a><br>
    <!--end www lokalnie-->
    <!--implementacja strona www w necie adres bezwzgledny-->
    <a href="http://www.onet.pl" title=" www.onet.pl " rel="shadowbox; ">strona w necie</a><br>
    <!--end strona w necie-->
    <!--implementacja na you tube -->
    <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>
    <!--end youtube-->
    <!--you tube auto play w przypadku automatycznego odtwarzania filmu ustawiamy opcje ?autoplay=1 -->
     <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>
    <!--end autopley-->
    </p>
    <!-- end .content --></div>
  <div class="footer">
    <p>WEB-kleszewski.Projektowanie stron internetowych</p>
    <!-- end .footer --></div>
  <!-- end .container --></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;
}

Autor: o Brak komentarzy:
Etykiety:

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);
     });
 });
Autor: o Brak komentarzy:
Etykiety:

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" />
<!--
dodaje css/
-->
<link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">
<!-- stylizacja "wstępna" przykładowa -->
<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>
<!--
sugeruję użyć

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
-->
<!-- definiuje -->
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<!-- cała wersja -->
<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: "&#171; w lewo",
  • dynamicArrowRightText: "w prawo&#187;",
  • dynamicTabs: true,
  • dynamicTabsAlign: "center",
  • dynamicTabsPosition: "top",
  • firstPanelToLoad: 1,
  • panelTitleSelector: "h2.title",
  • slideEaseDuration: 1500,
  • slideEaseFunction: "easeInOutExpo"
Autor: o Brak komentarzy:
Etykiety:

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}
Autor: o Brak komentarzy:
Etykiety: , ,

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śćopscss
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;
}
Autor: o Brak komentarzy:
Etykiety: ,

Pisanie modułu joomla 2.5

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
<!--Adam Kleszewski projektowanie stron internetowych "joomla tworzenie modułu"-->
<?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>
Autor: o Brak komentarzy:
Etykiety:

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
Autor: o Brak komentarzy:

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ę:
<!--wstawiamy mapę jeden bez markera-->
    <div id="mapa"> </div>
<!--wstawiamy mape z markerem-->
    <div id="mapa2"></div>
 Do znacznika id mapa i mapa2 przypiszemy teraz w javascript odpowiednie funkcje które umieszczamy również w sekcji head:
<!--pokazujemy mapę w opcji "bez markera"-->
<script type="text/javascript">

    $(function(){

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

    });

</script>
<!--pokazujemy mapę w opcji z markerem-->
<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>
<!--koniec js-->
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
Autor: o Brak komentarzy:
Etykiety:

jQuery slider

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">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<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">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<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">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<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
  
    <!--dezaktywuje po przez zakomentowanie-->
  
    /*carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });*/
    <!--koniec dezaktywacji funkcji-->
    // 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">
<!--
  jCarousel skin stylesheet
-->
<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>
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<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">&laquo; Cofnij</a>
        <a href="#" id="mycarousel-next">Dalej &raquo;</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">
<!--
  jCarousel skin stylesheets
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<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">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--ładuje zdjęcia do tablicy-->
<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>
<!--end tablica-->
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">
    <!-- The content will be dynamically loaded in here  tutaj załaduje zdjęcia-->
  </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">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!-- tworzymy funkcje obsługi-->
<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>
      <!-- The content will be dynamically loaded in here -->
    </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">
<!--
  Thickbox stylesheet
-->
<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  Thickbox 3 library
-->
<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">
 <!-- The content will be dynamically loaded in here -->
</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">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<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
Autor: o Brak komentarzy:
Etykiety:
Subskrybuj: Posty (Atom)

lubię to

Popularne posty

  • JoomSEF ukrywamy link
    JoomSEF 4.2.8 SEF URLs by Artio.Jak ukryć link stopki Joomla SEF URLs by Artio komponentu JoomSef  No cóż nie jestem zwolennikiem usuwania...
  • 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 zmie...
  • Integracja Zoo z Jcomments
    Pobieramy paczkę com_zoo.plugin.php Link do paczki I umieszczamy w components/com_jcomments/plugins .  Następnie Pobieramy Pozostałe 3 el...
  • jQuery panel boczny
    Dzisiaj pokażę w jaki sposób stworzyć wysuwany panel boczny z wykorzystaniem jQuery i css3 ----------------------------------------------...
  • Bootstrap joomla zastosowanie
    Bootstrap zastosowanie Czym jest twitter bootstrap nie bende się rozwodził ,najogólniej to frameworkiem HTML5, CSS3, JS (jQuery) to co ...
  • 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 ....
  • zablokować bingbota
    Jak zablokować bingbota Blokowanie msnbot lub jak kto woli bingbota to nie zawsze prosta sprawa.Postanowiłem napisać kilka słów na ten tema...
  • Joomla B2J Contact
    Joomla  B2J contact   Polecam wszystkim ten znakomity komponent .Sporo opcji dobra konfiguracja
  • joomla easy blog jos_easyblog_fields_groups_acl' doesn't exist
    Jak to naprawić administrator/components/com_easyblog/models/fieldgroupacl.php edytujemy i zmieniamy : $query = 'DELETE FROM `jos_ea...
  • Pisanie modułu joomla 2.5
    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 ...