Moja pasja programowanie...

Jak pisałem wcześniej prace nad skryptem prostej galerii zostały zakończone. Do nowych ficzerów należy zaliczyć możliwość wyświetlenia losowego zdjęcia i ilości plików w folderze w ekranie wyboru galerii. Całość przetestowałem i działa sprawnie w (chyba) każdej możliwej konfiguracji. Do najważniejszych założeń na przyszłość należy skrypt, który podczas wyświetlania dużego zdjęcia skaluje je tak, aby nie wychodziło poza ekran. W następnej wersja ta opcja będzie już na pewno dostępna.

Skrypt udostępniony jest na zasadach licencji by-sa.

• Co można:
• kopiować, rozpowszechniać, odtwarzać i wykonywać
• tworzyć utwory zależne

• Czego nie można:
• modyfikować skryptu i rozpowszechniać go jako własny
• rozpowszechniać skryptu i jego modyfikacji na innej licencji

Download: JAGallery.rar Sample: http://jony.com.pl/galeria

10 komentarzy

Postanowiłem zebrać w sobie trochę zapału do pracy i dokończyć rozpoczęty projekt JAGallery. Główną zmianą jaką wprowadziłem jest zmiana animacji. Zamiast "samoróbki", które prezentowała się średnio ładnie postanowiłem zintegrować całość z lightbox-em. Poza tym poprawiłem kilka błędów. Dozrobienia zostało mi jedynie skalowanie obrazków do rozmiarów okna, które niestety muszę napisać od początku, gdyż w wersji 0.5 niektóre obrazki nie chciały się skalować z niewiadomych mi przyczyn.

Przykładowa galeria
Do pobrania: JAGallery 1.0 RC1

Edit: wprowadziłem nowe zmiany
* możliwość wyświetlenia losowej miniaturki przy wyborze galerii
* możliwość wyświetlenia ilości zdjęć przy wyborze galerii

2 komentarze

WYSIWYG (ang. What You See Is What You Get co znaczy dosłownie To Co Widzisz Jest Tym Co Otrzymasz) to akronim stosowany w informatyce dla określenia metod, które pozwalają uzyskać wynik w publikacji identyczny lub bardzo zbliżony do obrazu na ekranie. [Źródło: pl.wikipedia.org]

W skrócie mówiąc jest to tym, co mamy w edytorach tekstu (np. Word). Aby określić wygląd dokumentu umieszczonego w formularzu na stronie internetowej trzeba stosować html, lub znaczniki BBCode. Nie każdy jednak zna html i nie każda strona obsługuje znaczniki BBCode. Od niedawna dostępne są komponenty na stronę internetową, które pozwalają z bardzo prosty sposób umieścić edytor WYSIWYG w oknie przeglądarki. Mnie zainteresował projekt TinyMCE. Jest on bardzo prosty w instalacji i wymaga niewielkiej ingerencji w kod źródłowy strony. Nawet początkującemu webmasterowi dodatnie takiego edytora nie powinno zająć dłużej niż 3-4 minuty. Aby umieścić TinyMCE na stronie należy pobrać pliki oraz pakiet językowy. Folder z plikamy umieszczamy na serwerze. W kodzie strony, na której chcemy umieścić edytor należy w sekcji head dodać kod:

<script language="javascript" type="text/javascript" src="sciezka_do_pliku/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    language : "pl",
    entity_encoding : "raw",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,bullist,numlist,indent,separator,undo,redo,separator,link,unlink,anchor,image,separator,code", 
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    auto_cleanup_word : true,
    plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen", 
    plugin_insertdate_dateFormat : "%m/%d/%Y",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", 
    fullscreen_settings : {
        theme_advanced_path_location : "top",
        theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help", 
        theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
        theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print" 
    }
});
</script>

I gotowe. Od tej pory w każdym polu textarea będzie widoczny edytor. Można zmieniać jego ustawienia zgodnie z instrukcjami zamieszczonymi na stronie producenta. Kod który podałem wyświetla jedynie najważniejsze funkcje, aby rozmiary panelu edytora były jak najmniejsze.

Edit: Na własnym przykładzie przekonałem się, że domyślne kodowanie znaków zawiera błąd w wyświetlaniu litery "ó", która pokazywana jest jako ó Sposobem na to okazało się dodanie

entity_encoding : "raw" 

do kodu wywołującego. Treść artykułu jest już poprawiona.

2 komentarze

Na świecie, a ostatnio także w Polsce zagościła moda na twitter`a. Jest to system powiadamiania znajomych o czynności, którą w tej chwili wykonujemy. Mojego twitter`a można znaleźć pod opcją szukaj. Przedstawię łatwy sposób na umieszczenie takiego skryptu na swojej stronie/blogu. Pierwszą rzeczą jaką należy zrobić jest rejestracja na stronie http://twitter.com. Serwis ten posiada możliwość dodawania nowych wpisów poprzez Jabbera. Wystarczy podać swój identyfikator podczas rejestracji lub w ustawieniach oraz wysłać podaną treść do twitter@twitter.com . Przejdźmy teraz do samego skryptu. Serwis Twitter udostępnia API do skryptów JavaScript, dzięki któremu można znacznie przyspieszyć wstawienie gadżetu na stronę/blog. Na końcu strony (przed tagami) </body></html> należy umieścić kod:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWÓJ_NICK.json?callback=twitterCallback&count=1"></script>

gdzie TWÓJ_NICK zastępujemy tym, podanym podczas rejestracji. Kod ten wywoła funkcję twitterCallback (o niej za chwilę) jako parametr zwracając obiekt z danymi zawierającymi nasze wpisy. Wspomnianą funkcję musimy napisać sami. Ja posłużyłem się przerobionym nieco przykładem z oficjalnej strony serwisu. Stwórzmy zatem plik twitter.js z taką oto zawartością:

function przetworzCzas(dodane) {
  var teraz = new Date();
  var roznica = (teraz - dodane)/1000;

  if (roznica < 60) {
    return 'mniej niż minutę temu';
  } else if(roznica < 120) {
    return 'minutę temu';
  } else if(roznica < (60*60)) {
    return (parseInt(roznica / 60)).toString() + ' minut temu';
  } else if(roznica < (120*60)) {
    return 'godzinę temu';
  } else if(roznica < (24*60*60)) {
    return 'około ' + (parseInt(roznica / 3600)).toString() + ' godzin temu';
  } else if(roznica < (48*60*60)) {
    return 'dzień temu';
  } else {
    return (parseInt(roznica / 86400)).toString() + ' dni temu';
  }
}

function twitterCallback(Obiekt) {
        var kodHTML = '';
        var blok = $('twitter');
        for(i = 0; i < Obiekt.length; i++) {
                var date = new Date(Obiekt[i].created_at);
                var czas = przetworzCzas(date);
                kodHTML +=  "<li><span>[ " + czas + " ]</span><br/>" +Obiekt[i].text+"</li>";
        }
        blok.innerHTML = kodHTML;
}

Jak widać oprócz funkcji twitterCallback(); umieściłem także przetworzCzas(), która wyświetli nam nie datę, a czas jaki upłynął od dodania wpisu. W powyższym przykładzie posłużyłem się biblioteką prototype, która nieco ułatwia tworzenie skryptów JS. Jej kod można pobrać z http://jony.jogger.pl/files/prototype.js. W kodzie HTML naszej strony należy umieścić odwołania do tych skryptów. W sekcji <head> umieszczamy kod:

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

Ostatnią rzeczą jaka nam została jest ustalenie miejsca, w którym ma się wyświetlać nasz twitter. W wybrane miejsce w kodzie HTML należy wstawić:

<h2>Twitter</h2>
<ul id="twitter">
</ul>

Można także określić odpowiednie style dla tych elementów, które poprawią wygląd naszego twittera.

2 komentarze