Pro?ba o przt?umaczenie...

[Gość]

Witamy, Gość. Zaloguj się lub zarejestruj

Azure 114Azure TPBlueSkiesEnterprise TPInvazionlightning01_tpMovies07OutlinePhobosSMF Default ThemeTPStyle_11X-Mas

[pyot]

Witam.
Prosz? o przet?umaczenie mi na j?zyk zrozumia?y dla mnie- czyli PL,jak mam osadzi? skrypty w dokumencie abym móg? stworzy? galerie podane ni?ej.
Znam co nieco html/css ale tu poleg?em

prosz? o pomoc za co dzi?kuj?

http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/
http://www.no-margin-for-errors.com/projects/prettyGallery/

Pozdrawiam.

[Rico Roco]

Cze?? Pyot!

jQuery to do?? zaawansowany framwerk. Galerii opartych na efekcje lightboxa jest troch? w sieci..

mam takie pytania..

- do czego chcesz urzy? galerii i w jaki sposób?
=> tzn. czy chcesz wrzuca? churtowo foty? czy pojedy?czo, czy dynamicznie, czyli te? potrzebne info gdzie? na jaki? blog, forum, inny CMS, czy stronk? statyczn??

jak mam osadzi? skrypty w dokumencie abym móg? stworzy? galerie podane ni?ej.

z tego zrozumia?em, ?e raczej chodzi o stronk? statyczn?, na której chcesz umie?ci? troch? fotek z efektem lightboxa, czy tak?

Potrzeba mi wi?cej informacji, i jest to wa?ne, poniewa? jest tyle mo?liwo?ci, ?e nie wiem co Ci odpisac..

Teraz jestem w rozjazdach i pisz? z iPacka, ale nock? ?ci?gn? na chat?, to przemy?le spraw?, tylko potrzeba mi informacji od ciebie, ew pliki w które chcesz osadzi? galeri?..

Pozdrawiam i tymczasem
roco

[pyot]

Chodzi o najzwyczajniejsze osadzenie w html.
 Poradz? sobie z ka?dorazowym dodaniem r?cznie zdj?cia tak pe?nego,jak i miniatury.
S?k w tym,?e nie umiem si? za to zabra?,wklejam z podanych stron skrypty,ale pewnie wklejam nie tam gdzie trzeba,bo na js nie znam si? nic a nic.
Gdyby? by? ?askaw ot przet?umaczy? co gdzie...
Je?eli znasz z kolej jaki? program dla laika oparty na tym i podobnym skrypcie pozwalaj?cy dodawa? fotki  z jekiego? panelu - do ju? utworzonej galerii,by?bym wdzi?czny o  namiar cho? to nie dla mnie akurat.
Niemniej zainteresowany jestem jqery,tym co podes?a?em...
Nie ?piesz si?,szanuj? Twój czas wi?c uzbroj? si? w cierpliwo??.
Pozdrawiam.

[Rico Roco]

Przy takich wynalazkach procedury s? proste i nieskaplikowane, za to daje to sporo mo?liwo?ci, np. punktowej prezentacji w jakim? dokumencie np. kilku fotek..

Generalnie, to trzeba wrzuci? na server foldery z JS, czyli zewn?trzymi skryptami, folder z css, od lightboxa, folderem z graficzkami, które ten skrypt potrzebuje.. -> to wrzycasz na server, w katalogu w którym masz swoj? stron? html, a w html'u w sekcji head odwo?ujesz si? do skryptów i styli lightboxa.

I teraz w zale?no?ci od skryptu, bo jest ich kilka, i akurat ten od pretty gallery mo?e by? do?? trudny w obs?udze.., to przy klasycznym lightboxie, dajesz klasycznego linka z rel = lightbox i opisem czyli atrybutem title = i dajesz do tego linka obrazek miniatury.. naprawd? proste jak konstrukcja cepa..

Zobacz? co ja mam w swoich skryptach, a mam wiele GB..

Takiego klasycznego lightboxa mo?esz zobaczy? tu u mnie na forum w Gallerii:  http://ricoroco.com/forum/index.php?action=gallery;cat=1 i jest to tak rozwi?zane, ?e kiedy kilkasz direct na miniatur? foty, to masz mo?ilow?? po odpaleniu lightboxa, klika? nast?pne ju? na du?ym obrazku, podfru? tam i sprawd?..

Poszukam czego?  i tu wrzuc? wraz z instrukcj? okay? Przy ptrettygallery mo?esz mie? troszk? pod górk? z obs?ug?..

Generalnie tego typu rozwi?zania s? bardzo efektowne, to pewne, ale jednocze?nie to super funkcjonalno?? dla stronki, mo?liwo?? ciekawej i punktowej prezentacji.. wiesz np. piszesz jaki? artyku?, i przeplatasz go miniaturami fotek, ale kazdy mo?e sobie klikn?? na miniatur? i dostannie w lightboxie du?? fot?..

Ok, przejr? to co sam mam i przyjrz? si? tej prettygallery..
S? te? gotowe skrypty galerii ale g?ównie s? oparte o php, cz?sti równie? i flasha, do tego baza sql.. Jednak wi?kszo?? z nich jest kaszta?ska i wymaga sporo zabiegów ?eby by?a jaka? urzyteczno??..

Pozdrawiam
roco

[pyot]

Masz tempo 
Lightboxa znam co nieco,?ci?ga?em i bawi?em si?,ca?? sztuczka to po prostu powielanie kodu z

Code: [select]

img src

 plus oczywi?cie zdj?cia.
Kolorki oczywi?cie w .css.
Jalbum intepluje ten skrypt równie?.
To co Ci pokaza?em jeste po prostu fajne.
Mo?na np kilka grup tematycznych mie? na jednej stronie z podgl?dem  i komentarzem.
Po prostu fajna sprawa.
Na tym mi zale?y.

Ja robi? tak:
index.html
images(folder z foto)
?ci?gam popierdó?ki,rozpakuj? do ogólnego folderu
wklejam podane na stronie skrypty (i tu mo?e by? moja pomy?ka)
i nic

Dzi?ki.

[Rico Roco]

Sorry
..hmm doba powinna mieć jak dla mnie 36 godzin.. może znalazłbym chwile, żeby się przespać? hehe

Okay! rozumiem, że jesteś z grubsza "obcykany" w temacie lightboxa, to ułatwi sprawę, ponieważ instalka tego gówienka, choć urodziwego.., jest tak samo dziecinnie prosta jak lightboxa.., no może ciupinke więcej opcji..

Zobacz klasycznego lightboxa + efekt reflection, których użyłem do prezentacji instalacji skryptu forum SMF 2.0 w wersji beta, na testowym smf:

http://poligon.ricoroco.com/fora/smf2/index.php?topic=10.0 ..na dole masz zmieniacz do skórek i zobacz jak to wyglada na ciemniejszym tle.., jak dla mnie super efekt..

No dobra, chciałbyś, więc, zintegrować prettyGallery.., proponuje przyjrzeć się również rozwiazaniu prettyPhoto, ponieważ tu też zadziała jak galeria, o ile dopiszesz słowo do linka..

Ściągnąłem tę paczkę a właściwie 2 paczki z prettyPhoto i prettyGallery, nie wiem czy dobrze to rozumiesz.. prettyGallery to tylko przewijane miniatury, ale żeby wykoczyły w efekcie ..klona lightboxa, to musisz mieć zainstalowane oba skrypty.. i jedna dodatkowa biblioteke jQuery.js

Spróbuje to napisac jakoś z sensem, ale chłopie zadałeś mi roboty..

Po kolei..

W załączniku załączam paczkę galeria.zip a w niej 2 foldery: prettyGallery i prettyPhoto..

hmm to moze skomplikować, zrobię coś innego, to ja połaczę w jedno i dam do załącznika spakowany katalog "galeria" a w nim bedą 2 instrukcje niezalezne do Galerii i Photo, oraz foldery: "css", "images","js".

Jedna uwaga.. to są dwie sprawy! i jak mniemam potrzebujesz obie.. ponieważ sama prettyGallery, to tylko i wyłącznie przewijane miniatury.., a żeby były klikalne i pojawiał się efekt lightboxa, to musi być dointegrowany prettyPhoto.. i tak zrobimy..

Paczkę trzeba rozpakować i jej zawartość czyli te 3 foldery trzeba wysłac na server uważając, żeby klient ftp np. Total Commander nie pozamieniał nam dużej czcionki na małą!

Na serwerze możemy mieć już takie foldery, więc trzeba najpierw sprawdzić, czy nic się nie nadpisze, np. nasze grafiki.
Nic takiego nie powinno mić miejsca, ponieważ wszystko ma swoje własne nazewnictwo, a grafiki tez siedzą we własnych folderach..
Warto jednak wyrobic sobie prawidłowe odruchy..

Natępnie trzeba wyedytować główny plik indexu, czyli w Twoim wypadku: index.html

A następnie w sekcji head umieścić takie zapisy

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/prettyGallery.css" type="text/css" media="screen" charset="utf-8" />
        <script src="js/jquery.prettyGallery.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

</head>

 

jest jeszcze kawałek java skryptu który to inicjuje. Pierwotnie myslałem, że powinien się znaleźć również w sekcji head, ten kawałek:

od prettyPhoto:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

i od prettyGallery:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("ul.gallery").prettyGallery();
        });
</script>

Jednak sądzę, iż trzeba dopisac te kawałki js zaraz pd naszym "holderkiem" na mini-fotki, czyli inaczej pod divem

Można wpływać na ustawienia np. zachowania, czy wygladu.., ale o tym potem..

Jeśli hcemy miec tylko przesuwane mini obrazki na małej przestrzeni, czyli mówię o prettyGallery, to w pasujacym nam miejscu dajemy taki zapis:
- tj. ja to dam w diva, ponieważ można diva łatwo obrobić i rzucić go tam gdzie chcemy..

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="klasa naszego holderka na miniatury">
    <ul class="gallery">
        <li><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></li>
        <li><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></li>
        <li><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></li>
        <li><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></li>
        <li><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></li>
    </ul>
</div>

I wydaje mi się, ponieważ zabrakło mi czasu na testy, jednak wydaje sie to być logiczne, że teraz powinniśmy dodać nasz kawałek js i odrazu z ustawieniami
Czyli po divie dodajemy ten js:

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("ul.gallery").prettyGallery({
                itemsPerPage : 2,
                animationSpeed : 'normal', /* fast/normal/slow */
                navigation : 'top',&#160; /* top/bottom/both */
                of_label: ' of ', /* The content in the page "1 of 2" */
                previous_title_label: 'Previous page', /* The title of the previous link */
                next_title_label: 'Next page', /* The title of the next link */
                previous_label: 'Previous', /* The content of the previous link */
                next_label: 'Next' /* The content of the next link */
            });
        });
</script>

Jeśli jednak chcemy, żeby miniatury były klikalne i pojawiały sie duże foty w efekcie ..klona lightboxa, to w naszym "holderku" na miniaturki musimy dać inny zapis, czyli połączony z prettyPhoto:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="klasa naszego holderka na miniatury">
    <ul class="gallery">
        <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></a></li>
        <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></a></li>
        <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></a></li>
        <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></a></li>
        <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></a></li>
    </ul>
</div>

I teraz wygląda na to, że trzebaby dodać w tym wypadku - oba skrypty inicjujące:
Czyli po kończącym /divie dodajemy js:

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("ul.gallery").prettyGallery();
        });
</script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

 

Lub z ustawieniami:

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("ul.gallery").prettyGallery({
                itemsPerPage : 2,
                animationSpeed : 'normal', /* fast/normal/slow */
                navigation : 'top',&#160; /* top/bottom/both */
                of_label: ' of ', /* The content in the page "1 of 2" */
                previous_title_label: 'Previous page', /* The title of the previous link */
                next_title_label: 'Next page', /* The title of the next link */
                previous_label: 'Previous', /* The content of the previous link */
                next_label: 'Next' /* The content of the next link */
            });
        });
</script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyOverlay'],a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal', /* fast/slow/normal */
            padding: 40, /* padding for each side of the picture */
            opacity: 0.35, /* Value betwee 0 and 1 */
            showTitle: true, /* true/false */
            allowresize: true /* true/false */
            counter_separator_label: '/' /* The separator for the gallery counter 1 "of" 2 */
        });
    });
</script>

Jednak u nich na stonie, po kończącym /div'ie, ale PRZED: < /body >< /html >

Widziałem taki kawałek:

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

</div>
       
        <script type="text/javascript" charset="utf-8">
            $("a[rel^='prettyPhoto']").prettyPhoto({showTitle:false});
            $('ul.gallery:first').prettyGallery({itemsPerPage:3,animationSpeed:'slow'});
            $('ul.textGallery').prettyGallery({itemsPerPage:1,navigation:'bottom'});
            $('ul.gallery:eq(1)').prettyGallery({itemsPerPage:5,navigation:'both',animationSpeed:'fast'});
        </script>

    </body>
</html>

Należy powyższe potraktować jedynie jako wskazówkę.., czy wzór i wg niego zrobic własne ustawienie..


INFO o wygladzie linków itp..

Np. przy prettyGalerry wystarczy wpis klasy przy "ul":

Code: [select]

<ul class="gallery">

Natomiast kiedy chcemy efekt lightboxa w pojedyńczej fotce, to dodajemy: rel="prettyPhoto" i link powinien wygladać tak:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Dodanie w linku do dużej foty: title="Opis Fotki" da nam opis fotki pod spodem,
natomiast dodanie do miniatury: alt="Tytuł Foty" da nam tytuł Foty umieszczony ponad samą fotką..

Jeśli chcemy, żeby to było więcej fotek czyli w gallerii, z efektem lightboxa, to do linku, do dużej fory, dajemy taki rel: rel="prettyPhoto[gallery]"
I nasze linki do duzych fotek powinny wyglądać tak:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery]" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Jeśli chcemy dodać flasha w zapisie lightboxa (to do prettyPhoto), powinniśmi to przykładowo zapisac tak:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<a href="[url]http://vimeo.com/moogaloop_local.swf?ver=19223[/url]" rel="prettyPhoto;width=500;height=370;flashvars=clip_id=173714">nazwa linka, lub miniatura</a>

Wtedy zobaczymy np. w efekcie lightboxa naszego np. clipa we flashu..

Skomlikowane to nie jest.. wystarczy odrobina uwagi, i rozumienie co się robi.. za to w nagrodę mozemy otrzymać zarąbiste efekty prezentacji foto na naszej stronce..

[pyot]

Rico...
Jestem pod wra?eniem nie tre?ci,chwilowo,lecz Twojego dzia?ania i w ogóle po?wi?cenia !
Twój trud doceniam,dzi? ,jutro najdalej do niedzieli przeanalizuj? co tu napisa?e?i wobec problemó ponownie skrobn?.

Gdybym móg? si? odwdzi?czy?...,tylko Ty mnie przerastasz w tej materii

Pracuj? w Gimpie,je?eli potrzebna grafika,banner,layout,gif - cokolwiek, pisz.

Miko?aj zreszt? nadci?ga

Dzi?ki i pozdrawiam.

[Rico Roco]

Nie przesadzajmy..

Jestem webmasta.. dla mnie to standart, np. pomocy.. celowo sa tu rózne przeszkadzajki, do kolorowania kodu itp.. Chcia?bym rozwijac tutoriale, ale nikomu, kto potrzebuje ..i mnie znajdzie hehe, - nie odmawiam pomocy..

Pyot, przeczytaj wsio uwa?nie, ja nie mia?em czasu na testowanie, lecz jest to naprawde logiczne i nie musze testowa?, ?eby wiedzie?, ?e mo?na to zintegorwa?..
Owszem jest troszk? wi?cej do zrobienia ni? przy normalnym lightboxie.., ale sam wiesz.. hehe "bez pracy nie ma ko?aczy".. inaczej.. jak chcesz okaza?ej prezentacji swojego contentu na stronie, to muszisz si? troch? postara?..
Poda?em Ci dok?adn? instrukcj? + tipsy jak to zastosowa?/zintegrowa?.. na statycznej stronce, ale nie tylko, poniewa? mozna tego ..dingsa zintegrowa? dos?ownie ze wszystkim..

Przeczytaj uwa?nie i sam zobaczysz, ?e to nic trudnego, oczywi?cie jakby by?y problemy to pisz, postaram si? pomóc.
jak widzisz namawiam Ci? do samodzielnej instalki, poniewaz wiem, ?e si? uczysz html'a i na stówk? przyda Ci si? to..

Tak!, dokona?em w tej jednej skórce (Azure) sporych modyfikacji, w tym optymalizacji.. Niestety forum jest zapuszczone i wymaga gruntownego przegladu..
Wi?kszo?? rzeczy mam ju? porobione, i testuj? w wolnej chwili, na lokalnym serverku.. (na VertrigoServ jakby co..), jak b?dzie gotowe, to wymieni? 96% plików na tym forum.. I dopiero wtedy postaram si? znale?? czas na rozwijanie my?li webmasterskiej i nie tylko.., mam nadzieje, ?e @Yurek3 równie? znajdzie czas i poci?gnie t? nienadzorowan?.. wszak jest mistrzuniem w tych kwestiach..

A na razie jest jak jest.., jak mi si? nie uda z totaln? zmian? do ko?ca roku, to przynajmniej po?atam to co mog? i zoptymalizuj? bo jednak chodzi troch? za wolno..

Musz? si? lyczyc z tym, ?e ludzie dalej niestety urzywaj? IE, czy starego FF, a dopiero od wersji 3.1 w FireFoxie, miejmy nadziej?.. b?dzie to o co chodzi.., np. obs?ugiwany efekt Text-Shadow.. Mo?esz to zobaczy? na tej skórce, ale tylko pod Oper?.. Na razie to dorobi?em funkcjonalno??, któr? wida? pod edytorem kiedy piszesz posta.. tj. formularz do wysy?ania foty direct do ImageShack.us..

Ty masz podobnie.. z t? integr?.. o ile zale?y Ci na tym, ?eby mogli Ci? odwiedzac wszyscy.. Muszisz sprawdza? jak co si? wy?wietla pod ka?d? przegladark?, a przynajmniej pod tymi trzema..
To forum niestety najokazalekj prezentuje si? pod ostatni? Oper?.., dlatego mam tu zabawki, które hmm na otarcie ?ezki.. mam np. dla IE, czyli efekty przej?cia itd..

Na Twoim miejscu sprawdzi?bym jeszcze takie miejsca:

http://stickmanlabs.com/lightwindow/

http://userfriendlythinking.com/Blog/BlogDetail.asp?p1=7013&p2=101&p7=3001

http://userfriendlythinking.com/_CustomFiles/flickrGallery/Example-3a-Small-Auto.html

To tylko przyk?ady.., ale mam ju? ponad 10 tys. zak?adek i ci??ko mi co? znale?? mimo porz?dku, który tam trzymam..
Mam jednak nadziej?, ?e te linki wpuszcz? troch? ?wiat?a w Twoje poczynania..

Pozdrawiam
roco

[pyot]

Ok.
Gdyby? mi nie pomóg? - poleg?bym z kretesem.
Dla mnie js jest nieznane.
Mam jeszcze problem z kilkoma rzeczami...
Otó? nie wiem gdzie ustali? odst?py pomi?dzy miniaturami bo u mnie s? zbyt du?e...,i to sporo.
Szukam,kombinuj? i nic,a w plikach .css tego nie widz?.
Poza tym nie wiem znowu jak zlikwidowa? paskudny  border na tych?e miniaturkach (odno?niki),to jest gdzie? schowane w linkach ?

Niedawno sko?czy?em i co? wysz?o
Oczywi?cie próby.

A te co pokaza?e? to rzeczywi?cie bajer,jak b?d? mia? czas to pokombinuj?.

Pozdrawiam

[Rico Roco]

To co Ci pokaza?em, to jedna z multum mo?liwo?ci.. takich prezentacji..
Ale zaciekawi?by? si? pierwszym linkiem, gdzie go?ciu prezentuje niemal wszystko w efekcie lightboxa, wiesz ca?e stronki, ró?ne multimedia itp.. Znajdziesz chwil? to pokombinuj z tamt? galeri? te?.. To Ci? tylko rozwinie hehe

Te miniaturki wyst?puj? jako ju? elemeny listy czyli ul -> li (items czyli poszczególne miniaturki..)

W pliku jquery.prettyPhoto.js masz ró?ne opcje ustawie? np.:

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

jQuery.fn.prettyGallery = function(settings) {
    settings = jQuery.extend({
        itemsPerPage : 2,
        animationSpeed : 'normal', /* fast/normal/slow */
        navigation : 'top',  /* top/bottom/both */
        of_label: ' of ', /* The content in the page "1 of 2" */
        previous_title_label: 'Previous page', /* The title of the previous link */
        next_title_label: 'Next page', /* The title of the next link */
        previous_label: 'Previous', /* The content of the previous link */
        next_label: 'Next' /* The content of the next link */
    }, settings);
    return this.each(function(){
        // Global variables needed in multiple functions.   
        var currentPage = 1;
        var itemWidth = 0;
        var itemHeight = 0;
        var galleryWidth = 0;
        var pageCount = 0;
        var animated = false;
        var $gallery = $(this);

item = Twoja miniatura.. i mo?naby co? ponarzuca?.. ale zabawiaj si? tym potem..

Zajrzyjmy do styli od prettyGallery..

Mamy okre?lenie diva i ul od galerii ale poni?ej mamy okre?lenie wygladu nawigacji czyli - ul.prettyNavigation:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

    ul.prettyNavigation {
        float: left; clear: left;
        list-style: none;
        margin: 0;
        border: 1px #bdc2c4 solid;
    }

Jak wida? nawigacja ma border ustawiony na 1px, je?li to te? bedzie Ci przeszkadzac, to ustaw na: 0 (tylko liczb?..)

Powy?ej mamy taki zapis:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

    div.prettyGallery ul.prettyGallery {
        list-style: none;
        float: left;
        margin: 5px 0 2px 0;
    }
   
        div.prettyGallery ul.prettyGallery li { display: block; float: left; margin-right: 5px; }

Przypuszczam, ?e to tu mo?esz zmniejszy? ten odst?p za pomoc? margin-right, ale powyzej masz margin: |5px| <-to góra |0| <-to prawy |2px| <- to dó?, a |0| <- to margin z lewej strony i jak wida? ca?e "pude?ko" ma po obu bokach 0px
 

Trzeba si? zainteresowac tym wpisem:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

div.prettyGallery ul.prettyGallery li { display: block; float: left; margin-right: 5px; }

Proponuj? zmniejszy? ten margin-right: na 2px; i sprawdzi?..

Zamie? ten wpis, tj znajd? ten powy?szy kawa?ek kodu w stylach od prettyGallery ul.prettyGallery li {....

i zamie? na to:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

ul.gallery li {
            display: block;
            float: left;
            margin: 0 2px 0 0;
        }

            ul.gallery li a {
                padding: 0px;
                display: block;
                border: 0px #9db2b9 solid;
                line-height: 0;
            }

Jak s?dz?, po??czy?e? te skrypty, ?eby mie? nie tylko przesuwane miniaturki, ale równie? klikalny efekt lightboxa.., tak wiec miniaturki s? od razu linkami i to dlatego ten zapis z "a" na ko?cu klasy. Jakby si? zrobi?o za ciasno to zamie? ten padding z 0px na np. 2px.

Prze?wicz to i daj zna?. Mo?e jakby nie pomog?o to zrób screena i tu wrzu?..

Mog?o by? tak, ?e by? okre?lony tylko prawy margines odst?pu, a przegladarki interpretowa?y reszt? jak by?o im wygodnie.. Wrzu? te wpisy do styli od prettyGallery i zobacz efekty, i oczywi?cie pisz co si? dzieje..

Pozdrawiam
roco

[pyot]

Pobawi? si? wieczorem a jutro Ci odpisz?,wa?ne,?e co? sie ruszy?o dzi?ki Tobie...
Jako? na JS nie mam czasu si? uczy? a html/css znam w stopniu pozwalaj?cym mi rozumie? co i jak
Poza tym teraz po?kn??em ciut bakcyla fotografii i latam w weekendy po mie?cie z now? puszk? i cykam pstryki.

Galeria jak? mi pokaza?e? robi wra?enie -
http://userfriendlythinking.com/_CustomFiles/flickrGallery/Example-3a-Small-Auto.html
edit:21:19:00
Ju? j? mam !
Prosta,nie wiem tylko czy mo?na j? wykorzystywa? nawet do celów komercyjnych
?ci?gn??em sobie wczoraj,z grubsza przetrzepa?em pliki i oczywi?cie nie mog? na razie znale?? gdzie siedzi odno?nik do flickr'a,w nawigacji po najechaniu myszk? pojawia si? w lewym górnym rogu,jak dla mnie jest zbyteczny.
I,tu wstydem si? oblewam,gdzie u licha s? odno?niki do zdj?? !
Bo jak na razie (pobie?nie) w tre?ci dokumentu s? odno?niki do class w style.css&nbsp; a tam nic nie mog?/umiem znale??...\
Ale to jeszcze pogrzebi? i zobaczymy,jak piszesz:to s? kroki do poznawania i nauki

Dzi?ki&nbsp; @roco,Wroc??w pluch? stoi co nie znaczy,?e pozdrowienia nie mog? by?&nbsp; s?oneczne&nbsp;


Edit:
To sobie poluka??m.
Oto zrzut -


Po klikni?ciu w pasku nawigacji,czyli jak pokaza?e?

Code: [select]

&nbsp; ul.prettyNavigation {
&nbsp; &nbsp; float: left; clear: left;
&nbsp; &nbsp; list-style: none;
&nbsp; &nbsp; margin: 0;
&nbsp; &nbsp; border: 1px #bdc2c4 solid;

Ten border akurat mi nie przeszkadza,powinien tam by?,ale po klikni?ciu w t? klas? pozostaje brzydki pasek jaki wida? na zrzucie,strza?ka nr1.
Problem numer 2 to border o którym pisa?em...
teraz my?l?,?e to mo?e by? po prostu link...,bo jako? nie widz? w ogóle przypisane odno?nikom jakiekolwiek cechy,nawet kolory s? oryginalne ,myl? si? ?
Je?eli nie,to wystarczy zrobi?

Code: [select]

a.link

 bez border ?
Trzecia strza?a pokazuje w?a?nie te paskudne,za du?e zdecydowanie odst?py...

Oto html :

Code: [select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta name="Author" content="#">
<title>Galeria#2</title>
<style type="text/css">
body
{
background-color:#000000;

}
.gal
{
margin:20 auto;text-align:center;
display:block;
width:300px;
}
</style>
&nbsp; &nbsp; <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
&nbsp; &nbsp; <link rel="stylesheet" href="css/prettyGallery.css" type="text/css" media="screen" charset="utf-8" />
&nbsp; &nbsp; <script src="js/jquery.prettyGallery.js" type="text/javascript" charset="utf-8"></script>
&nbsp; &nbsp; <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
&nbsp; &nbsp; <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
&nbsp; &nbsp;
</head>
<body>

<div class="gal">
&nbsp; <ul class="gallery">
&nbsp; &nbsp; <li><a href="obrazy/1.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/1.jpg" width="120" height="80" alt="T 1" /></a></li>
&nbsp; &nbsp; <li><a href="obrazy/2.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/2.jpg" width="120" height="80" alt="T 2" /></a></li>
&nbsp; &nbsp; <li><a href="obrazy/3.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/3.jpg" width="120" height="80" alt="T 3" /></a></li>
&nbsp; &nbsp; <li><a href="obrazy/4.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/4.jpg" width="120" height="80" alt="T 4" /></a></li>
&nbsp; &nbsp; <li><a href="obrazy/5.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/5.jpg" width="120" height="80" alt="Dzieki raz jeszcze...
teraz troche inaczj pokazne motyle... " /></a></li>
&nbsp; &nbsp; <li><a href="obrazy/6.jpg" rel="prettyPhoto[gallery]"><img src="thumbs/6.jpg" width="120" height="80" alt="T 4" /></a></li>
&nbsp; </ul>
</div>
 <script type="text/javascript" charset="utf-8">
&nbsp; &nbsp; $(document).ready(function(){
&nbsp; &nbsp; &nbsp; $("ul.gallery").prettyGallery();
&nbsp; &nbsp; });
</script>
<script type="text/javascript" charset="utf-8">
&nbsp; $(document).ready(function(){
&nbsp; &nbsp; $("a[rel^='prettyPhoto']").prettyPhoto();
&nbsp; });
</script>


</body>
</html>

Css znasz

[Rico Roco]

okay, co tu mamy..

Po pierwsze nie może być taki zapis:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

.gal
{
margin:20 auto;text-align:center;
display:block;
width:300px;
}

Jak juz to proponuje taki zapis:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

.gal
{
margin:20px auto;
text-align:center;
display:block;
width:300px;
}

Musisz podać czy to jednostki px czy inne..

Tak masz rację i widać to na obrazkach, to z powodu linków..

Proponuje dopisać do styli taki zapis:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

a:link, a, a link, a img, a li, img {
border: 0;
outline: none;
text-decoration:none;
}

Powinieneś w ten sposób pozbyć się obwódek, ramek i innych zdziwień widzianych tylko pod IE i czasami pod FF..

Po za tym proponuje, skoro skrypty są w XHTML'u, to trzymać tę formę i dac na początku html'a (Twojej stronki) to:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml + xml; charset=ISO-8859-2" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
        <meta name="Robots" content="follow,all" />
        <meta name="Revisit-After" content="2 days" />
        <meta name="Distribution" content="global" />
        <meta name="Author" content="Pyot" />
        <meta name="Copyright" content="pyot.pl" />
        <meta http-equiv="Content-Language" content="Polish" />
        <title>Galeria Pyota</title>

Tylko nie rozumiem po co charset w iso? będziesz zamieszczał tam dodatkowo trści tekstowe w PL? Możesz to robić również w UTF-8, a skrypty będą lepiej "chodzić".. taki tips.. ale ten cały nagłówek to wymień na ten ode mnie.. wiesz coby obciachu nie było.. bo niestety do takiej galeryjki taaaki html4 to trochę jak mocherowy beret ..latem..

Ja wiem, że się dopiero uczysz, ale to też nauka..

Myślę, że powinno być lepiej, ten margin mógł poknocić..

Jak nie do końca pomoże, to daj znać, podłubiemy z paddingiem i marginesami samych items..

Co do tej nowej galerii to musiałbym ściągnąć żeby wiedzieć o czym mówisz..Ale trzeba przejrzeć pliki, bo na stówkę jest info co i jak, lub gdzie co siedzi.. Może skrypt pobiera z konkretnej lokalizacji i np. korzysta do tego z pliku .xml? Musialbym znaleźć chwilę żeby się temy przyjrzeć.., to chyba zrozumiałe, że nie znam wszystkich skryptów na świecie hehe nikt nie zna.. jakby znał to explodowałby mu łeb haha

Ok popraw i daj znać, jak będzie chwila to ściągnę kolejne gówienko/zabawkę i się przyjrzę, okay?

Pozdrówka
roco

[pyot]

Nie chc? ju? Ci przeszkadza?.
Nie mog? znale?? tylko jak zrobi? aby zmniejszy? odleg?o?? pomi?dzy foto,ta pokazana na zrzucie ma z 5 metrów !
A w pliku .css jako? tego nie widz?.
T? drug? galerie ju? mam obcykan?
Roco,czy mog? j? u?ywa? oczywi?cie nie usuwaj?c nic ze skryptów na temat twórcy kodu ?

Dzi?ki.

[Rico Roco]

Ale? ..wcale mi nie przeszkadzasz.. nikt mi nie przeszkadza, nie mam wiele czasu, poniewaz jestem zapracowany, ale nikt mi nie przeszkadza ok? Mo?esz pyta? o co chcesz, jak b?dzie w zasi?gu mojej wiedzy to zawsze pomog?, spox?


Tak, mo?esz tej u?ywa? jak chcesz, poniewa? jest napisana na Otwartym Kodzie! Wa?ne, ?eby? z kodu nie usuwa? info o twórcach.., bo to jest z lekka fuckup..

Wracaj?c do tematu..

Czy zastosowa?e? to, co Ci napisa?em?
Mia?e? w samej stronce, w sekcji head, kawa?ek styli, czy to poprawi?e? wg. mojego tipsa?

Nie utworzy?em tej galerii do testów, kiedy? tam.. ale nawet nie wiem gdzie to mam.. za du?o wszystkiego hehe
Musisz byc bardzie communicado, okay? potrzeba mi dok?adniejszych info.. np. czy ten efekt "d?ugiej przerwy" obserwujesz tylko pod IE? a je?li to czy nie jest to aby wersja 6? To wa?ne info, wa?ne ?eby? odwiedzi? swoj? galeri? ró?nymi przegl?darkami, IE7, FF (w ostatniej wersji) i Opera (w ostatniej wersji).. chyba, ?e brak Ci mozliwo?ci.. Potrzeba, ?ebys zaobserwowa? ten "efekt" i ew. ró?nice, mog?oby to znacznie pomóc..

Jak rozumiem, s? "mega-rozst?py" pomi?dzy poszczególnymi miniaturami, czy tak? Tutaj nawet nie wiem czy napewno nie ma b??dów.. mo?e nie zamkn??e? jakiego? taga.. wsio mozliwe..

Ale ok, za?ó?ny; ?e zastosowa?e? to, co poda?em Ci w poprzednim po?cie czyli w samym pliku html tam gdzie style i klasa gal (.gal {})


..?e w stylach zastosowa?e? to:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

ul.gallery li {
      display: block;
      float: left;
      margin: 0 2px 0 0;
    }

      ul.gallery li a {
        padding: 0px;
        display: block;
        border: 0px #9db2b9 solid;
        line-height: 0;
      }

To je?li to zobacz sam, jest tu niemal wszystko wyzerowane.. nie ma wr?cz gdzie palce wsadzi?.. no mo?e zapa?k? grubo?ci 2px..

Mo?e zapiszmy to tak:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

div.prettyGallery {
    display: inline-block;
    padding: 0;
}

div.prettyGallery, ul.prettyGallery {
    list-style: none;
    float: left;
    margin: 2px 0 2px 0;
    overflow: hidden;
    padding: 0;
}

ul.gallery {
    list-style: none;
    margin: 0 0 2px 0;
    padding: 0;
}

ul.gallery li {
    display: block;
    float: left;
    margin: 0 2px 0 0;
    left: 0;
}

ul.gallery li a {
    padding: 0;
    display: block;
    border: 0 solid;
    line-height: 0;
    right: 0;
}

tj. znajd? podobne wisy i je wy??cz/albo zamie? na te co poda?em powy?ej

Poza tym w pliku html, gdzie stosujesz klas? .gal to j? wy??cz, tj. jej nie dopisuj do holderka
- i zamiast tego zastosuj klas?: "gallery prettyGallery" ..zapewniam Ci?, ?e mo?na ??czy? w ten sposób klasy..

Czyli powiniene? zamiast:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="gal">
    <ul class="gallery">

to daj najpierw:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="gal">
    <ul class="gallery prettyGallery">

Ale spróbuj równie? albo mo?e od tego powiniene? zacz??, bo Twoje warto?ci mozesz doda? pó?niej do klasy div.prettyGallery {}

Wiec spróbuj to zapisac tak:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="prettyGallery">
    <ul class="gallery">

Oczywi?cie ten zapis dotyczy ju? samego pliku html, tu? przed sam? galeri?.., natomiast te style, które teraz poda?em musz? pój?? do pliku prettyGallery.css

Czyli edytujesz ten plik, znadujesz na pocz?tku to:

GeSHi -› Code: [select]

// GeSHi -› [code=css]

    div.prettyGallery { display: inline-block; }

    div.prettyGallery ul.prettyGallery {
        list-style: none;
        float: left;
        margin: 5px 0 2px 0;
    }
   
        div.prettyGallery ul.prettyGallery li { display: block; float: left; margin-right: 5px; }

        ul.gallery li {
            display: block;
            float: left;
            margin: 0 2px 0 0;
        }

            ul.gallery li a {
                padding: 0px;
                display: block;
                border: 0px #9db2b9 solid;
                line-height: 0;
            }
       

I zamieniasz na mój wpis, który jest powy?ej.., okay? to jest jasne? powinno..

Pozdrawiam i wierz?, ?e sobie poradzisz.. to proste, wystarczy odrobinka uwagi..
roco

[Rico Roco]

Ju? nie edytuje bo si? co rozsypie..

Przypuszczam, ?e tak si? sta?o poniewa? da?e? swoj? klase która nie mia?a odwzorowania w pliku prettyGallery.css, wiesz Twoja klasa .gal {}

Mo?e po prostu podmie? nazwy tych klas w samym pliku html zanim dopiszesz co? do samych styli zewn?trznych, czyli daj ten zapis:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="prettyGallery">
  <ul class="gallery">

Moze si? okaza?, ?e wsio w pariadku..
r.

[pyot]

Roco,mo?e zd??? wieczorem sprawdzi? co radzisz.
Zobacz ten problem live.

[Rico Roco]

sorka nie sta?o czasu..

No zobaczy?em.. trzeba by?o tak odrazu..

Wystarczy?o zastosowac tipsa z mojego poprzedniego posta czyli zamiast:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="gal">
    <ul class="gallery">

to wpisa? to:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<div class="prettyGallery">
    <ul class="gallery">

Tylko, ?e style od tej galeri maj? drobne b??dy inaczej po ich naprawieniu, ca?o?? jest niepos?uszna i leci ca?kiem na lew? stron?..
Ty natomiast kolego jeste? nie uwa?ny.. Skopiowa?es tego heda tu ode mnie a tam niestety linki zosta?y zamkni?te w klamerki od [bbcode]
Tak nie mo?e by?! Sorry, mówi?em Ci otym, to forum próbuj? dostosowac do prezentacji kodu itp.. st?d pod?wietlanie sk?adni i multum innych zabawek.. ale niestety co? za dok?adnie to wychodzi.. tj skrypt forum si? chroni i jak widzi "go?e linki" to zamienia je na bbcode..
Musisz kopiuj?c kod, tam gdzie s? linki uwa?a? na [ klamerki ] i bedzie git, okay?

Jedyny problem jaki zauwa?y?em to przy nawigacji te strza?eczki, tj ta z lewej nie jest do ko?ca no i w ogóle widz? tam asymerie.. jak s?dz? sam autor chyba nie do ko?ca to przemy?la?, lub nie wiedzia? jak z tego wyj??..

pobawi?em si? tym i to troch? przesun??em, ale usun??em te? ramke i wygl?da zdecydowanie lepiej, szczególnie kiedy dochodzisz do ko?ca i nie ma tej po?ówki kolejnej miniatury.., wtedy juz wyglada?o ca?kiem asymertycznie..

Zrobi?em kilka fotek z tej zabawy:






to ju? po ustawieniu:






Tu ustawi?em border na 0:






Po??czy?em skrypty w jeden i do?ozy?em ustawie?, to nic, ?e skrypty maja swoje, mo?na edytujac tylko plik index.php, czyli Twoja galeri? - wp?ywa? na zachowanie i samej galerii i na efekt lightboxa.. Jest opisane wi?c pobaw si? w ustawienia i zobacz co Ci pasi

GeSHi -› Code: [select]

// GeSHi -› [code=javascript]

<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function(){
$(&#39;ul.gallery&#39;).prettyGallery({
    itemsPerPage:3,/* ile ma by? widocznych miniatur + po?owa kolejnej */
    animationSpeed:&#39;slow&#39;,/* fast/normal/slow/- szybko?? animacji: | szybko | notmalnie | powoli | */
    navigation:&#39;both&#39;,/* top/bottom/both/ - gdzie nawigacja: | góra | dó? | tu i tu | */
    });
$("a[rel^=&#39;prettyPhoto&#39;]").prettyPhoto({
    animationSpeed: &#39;slow&#39;,/* fast/slow/normal/ - szybko?? animacji: | szybko | powoli | normalnie | */
    });
});
//]]>
</script>

wiadomo..: ilo?? fotek w tym przewijanym okienku, szybko?? przesuwania i nawigacja, w tym wypadku da?em na górze i na dole i wyszed? ciekawy efekt.. (fotka w za??czniku..)
No i jest od prettyPhoto ustawienie: szybko?ci animacji, jest na slow, ale ciekawie wygl?da kiedy jest na fast. Znowu przy samej prettyGallery mo?e by? przydatne kiedy jest duzo fote ustawienie na fast.., hmm kto nie sptóbuje, ten nie wie, nie? hehe


To jest Twój plik index.html:

GeSHi -› Code: [select]

// GeSHi -› [code=html4strict]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml + xml; charset=ISO-8859-2" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
        <meta name="Robots" content="follow,all" />
        <meta name="Revisit-After" content="2 days" />
        <meta name="Distribution" content="global" />
        <meta name="Author" content="qrcze" />
        <meta name="Copyright" content="qrcze.pl" />
        <meta http-equiv="Content-Language" content="Polish" />
        <title>:) hmm stronka powinna mie? jak&#177;&#182; nazw? nie?</title>
<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#000000;
margin:0 auto;
padding:0;
}
.gal
{
margin:20px auto;
text-align:center;
width:auto;
}
a:link, a, a link, a img, a li, img {
border: 0;
outline: none;
text-decoration: none;
}
/*]]>*/
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyGallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyGallery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div align="center" style="margin:2em auto; text-align:center;" class="gal">
    <div align="center" class="prettyGallery">
        <ul class="gallery">
            <li><a href="obrazy/1.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 1"><img src="thumbs/1.jpg" width="120" height="80" alt="Tytu? foty nr. 1" /></a></li>
            <li><a href="obrazy/2.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 2"><img src="thumbs/2.jpg" width="120" height="80" alt="Tytu? foty nr. 2" /></a></li>
            <li><a href="obrazy/3.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 3"><img src="thumbs/3.jpg" width="120" height="80" alt="Tytu? foty nr. 3" /></a></li>
            <li><a href="obrazy/4.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 4"><img src="thumbs/4.jpg" width="120" height="80" alt="Tytu? foty nr. 4" /></a></li>
            <li><a href="obrazy/5.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 5"><img src="thumbs/5.jpg" width="120" height="80" alt="Dzieki raz jeszcze... Tytu? foty nr. 5" /></a></li>
            <li><a href="obrazy/6.jpg" rel="prettyPhoto[gallery]" title="Opis foty nr. 6"><img src="thumbs/6.jpg" width="120" height="80" alt="Tytu? foty nr. 6" /></a></li>
        </ul>
    </div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function(){
$(&#39;ul.gallery&#39;).prettyGallery({
    itemsPerPage:3,/* ile ma by? widocznych miniatur + po?owa kolejnej */
    animationSpeed:&#39;slow&#39;,/* fast/normal/slow/- szybko?? animacji: | szybko | notmalnie | powoli | */
    navigation:&#39;both&#39;,/* top/bottom/both/ - gdzie nawigacja: | góra | dó? | tu i tu | */
    });
$("a[rel^=&#39;prettyPhoto&#39;]").prettyPhoto({
    animationSpeed: &#39;slow&#39;,/* fast/slow/normal/ - szybko?? animacji: | szybko | powoli | normalnie | */
    });
});
//]]>
</script>
    </div>
    </body>
</html>

Jak wida?, da?em tego holderka z galeri? w dodatkowego diva i dzi?ki temu mo?na za pomoc? klasy .gal {} ?atwo wp?ywac na miejsce wy?wietlania itp.. Narazie jest ustawione po ?rodku i 20px od góry..

Musisz podmieni? style.. Spakowa?em do zipa plik index.html i style prettyGallery.css

Dobra podmie? pliki i co? rzeknij, okay? wg. mnie to powiniene? przedewszystkim zastosowa? moje tipsy.., to by?aby jakas nauka, albo pój?? na skróty i tylko podmieni? pliki hehe

Na zdrowie Pyot 

Pozdrówka
roco

[pyot]

Troch? mi wstyd za te bezmy?lne wklejenie kodu baz sprawdzenia - wybacz.
Od kilku dni mam du?o pracy,od rana do wieczora.
Niemniej do Ciebie zagl?dam.Galeri? za?adowa?em dopiero wczoraj.
A Twoje wczorajsze rozwi?zanie,jak si? okazuje dobre mia?em sprawdzi? dzisiaj ale Ty jeste? szybszy.Za szybki
No i Roco,nie szukam ?adnych skrótów,naprawd?.
Doceniam Twoj? prac? za któr? dzi?kuj?,Twoje rozwi?zanie dzia?a

Wkrótce si? odezw?,ponownie wielkie dzi?ki i do nast?pnego  klikania ?

Pozdrawiam.

[Rico Roco]

hehe no i, Pyot? co ja mam Ci napisać?
Wydaje mi się, że za bardzo się "ceregielisz".. a przecież mnie znasz i to już parę latek.. wiesz że pisze głównie grotezką, ale od zawsze nazywam rzeczy po imieniu.. białe jest bałe.. a komuch, zawsze nim będzie hehe bez względu jakbyśmy go nie nazywali.. itd..
Zobacz mi zależy na jak najwyższej jakości tego co robię, i Ty powieneś to rozumieć.., zobacz masz swoją remontownię.. i co odwalasz ludziom "sztukę", czy starasz się robic to co robisz jak najlepiej? ze mną jest tak samo.. nic się nie zmieniło odkąd jestem na tym świecie, mam swoje zasady i jestem ich niewolnikem..
Nie musi Ci byc wstyd, nie masz najmniejszego powodu, żeby przepraszać mnie za cokolwiek.. a i tak brzmiało to tak, jakbyś przepraszał świat, za to że żyjesz.. hmm to chyba niezbyt rozsądne.. I z niczym nie pękaj.. info o takiej galerii i jej instalce czy integrze.. przyda się tu.. to raczej ja powiniem ubolewac nad tym, że do tego stopnia odzwyczaiłem się od polskiej mowy, że piszę z takimi błędami, jakbym wcale do szkoły nie chodził hehe
Moje rozwiązanie napewno działa, ponieważ zapamiętałem Twoją stronę i ją poprawiłem.. i nie ma tu żadnej Twojej winy, poprostu nie było tak easy nie?, ale jak widac na fotkach - jest to możliwe.. Podmień pliki i będzie wypasio! Przecież chciałeś mieć wypaśną galerię i ją masz, więc głowa do góry hehe

Pozdrawiam
roco

PS. Zapraszam z kolejną zgadką/zagwozdką!

[pyot]

Nie noroco,nie jest tak kiepsko ze mn? 

Po prostu nie lubi? nadu?ywa? czyjego? czasu,ja amatorsko dla znajomych co? tam robi? i wiem ile to zajmuje,Ty webmasta to pewnie szybciej,ale jednak.
A tu ten chce to,tamten owamto jeszcze inny prosi o to i owo i tak leci,na wype?nieniu zobowi?za? schodzi masa czasu.
A Twój czas ?
Tylko o tym pisa?em.

Ja mam kiepsk? pami??,i mam z tym problem ale to moja historia,i nie wiem ile bym sobie do g?owy wbija? to wi?kszo?? przeleci nie zostawiaj?c wiele po?ytecznego

Wi?c to co mi wyt?umaczysz a ja potakn? - niewykluczone,?e pojutrze wstyd mi b?dzie ponownie zada? to samo pytanie...

Tyle.
A z zagwózdk? masz jak w banku.

Pozdrawiam.

[Rico Roco]

..loco spoco

Tylko powiedz mi.., poprawisz to kiedyś? bo zajrzałem tam i jest jak było.., a wystaczy 2 pliki podmienić..
Tak kosztuje to włożona pracę, jak wszystko zresztą, ale ja się przy tym rozwijam więc również mam korzyść, okay?

Co do zapamiętywania to straszne co piszesz.. Może to zapisuj?, np. utwórz katalog tipsy a w nim inne np. html, css, javascript, i jak coś trafisz to to zapamiętuj w odpowiednich folderach.. całe stronki, wpisy w notatniku itp.. napewno się przyda, i wyrobisz sobie prawidłowe odruchy.. wystarczy później, że zostanisz ich niewolnikiem hehe

Zrób piękną galeryjkę, ok?

Pozdrówka
roco

[pyot]

..loco spoco

Tylko powiedz mi.., poprawisz to kiedy?? bo zajrza?em tam i jest jak by?o.., a wystaczy 2 pliki podmieni?..
Tak kosztuje to w?o?ona prac?, jak wszystko zreszt?, ale ja si? przy tym rozwijam wi?c równie? mam korzy??, okay?

Co do zapami?tywania to straszne co piszesz.. Mo?e to zapisuj?, np. utwórz katalog tipsy a w nim inne np. html, css, javascript, i jak co? trafisz to to zapami?tuj w odpowiednich folderach.. ca?e stronki, wpisy w notatniku itp.. napewno si? przyda, i wyrobisz sobie prawid?owe odruchy.. wystarczy pó?niej, ?e zostanisz ich niewolnikiem hehe

Zrób pi?kn? galeryjk?, ok?

Pozdrówka
roco

Roco.
T? galeri? wrzuci?em aby Ci pokaza? na ?ywo
Galeryjka dla znajomej (wspominam,?e pomóg? mi kto? ?yczliwy).
Tylko jeszcze wa?ny dzynks...
Jak mam wstawi? kodowanie aby teksty jako komentarz akceptowa?y ppolskie znaki ?
Zmieniam gdzie mog? ;
Tu chodzi o

Code: [select]

charset="utf-8"

 prawda ?
No,ale zmieniam gdzie si? da na

Code: [select]

charset="iso-8859-2"

I chyba mnie...!@#$%^&*()
Pozdrawiam

[Rico Roco]

To spoko, bo już się martwiłem..

Masz problem z kodowaniem?
A w jakim kodowaniu jest stronka Twojej przyjaciółki? - to w takim kodowaniu musisz pisać..
Zrobiłem test i na tej Twojej galeryjce i masz w meta ISO-8859-2, a skrypty narzucają sobie swoje własne kodowanie utf-8, niezależne od kodowania strony.

Taki przykład.. jeśli napiszesz w html w kodowaniu iso-8859-2 te literki: ĄŻŹĆĘŚŃŁÓ ąśżźćęółń, to będą w kodzie wyglądały tak:

Code: [select]

ˇŻ¬ĆĘ¦ŃŁÓ ±¶żĽćęółń

Jeśli miałyby być kodowane w utf-8 te same literki, czyli: ĄŻŹĆĘŚŃŁÓ ąśżźćęółń, to będą w kodzie wyglądały tak:

Code: [select]

ĄŻŹĆĘŚŃŁÓ ąśżźćęółń

Oczywiście w UTF-8 bez (BOM)

Jesli stronka ma kodowanie w iso, to musisz stosowac to kodowanie w znakach, tak jak to pokazałem w "code" przy kodowaniu iso..

Napisz więcej, to proste, ale potrzeba więcej szczegółów.., o ile to co napisałem nie pomogło..

Pozdrówka
roco

[pyot]

Link.
Chwilowo komponuj? i testuj?...
Podpowiedz.

[Rico Roco]

Ok.. sam si? prosisz hehe

no dobra, stronka ma sporo b?edów, g?ównie to mieszanka starego html'a z nowym, czyli nie pozamykane tagi itp. dupershwanze.. loozio, nie pekaj, daj te pliki, to Ci poprawi?, ?eby przechodzi?o validacj?.. Po za tym co z formularzem? zrezygnowa?e??
To by?o tak poza tematem..

To dobrze, ?e chcesz podmieni? t? ostatni? galeri?.., zupe?nie tam nie pasuje, natomiast to co chcesz zrobic jest wypasio i pasuje klimatem!

Poprawi?em co mog?em, za du?o opowiada?.. hmm dam Ci par? tipsów..

Charset..

Po pierwsze ten charset.. Dokument, który masz w za??czniku, ma deklaracj? w UTF-8 i Jest Zapisany w UTF-8, dlatego w opisach piszesz "normalnie" jak np. tu kiedy piszesz posta.. czyli wszystkie polskie "znaczki" dozwolone - ó? blabla Piszesz to normalnie w tych opisach. Zrobi?em test i jest ok (fota w za??czniku)
Przypominam i warto to zrobi? z powodu konstrukcji tego lightboxa, ?e do miniatury idzie alt= i dajesz tytu? fotki, a do linka idzie title= i tu dajesz opis fotki.
Warto to zrobi?, nie tylko z powodów wizualnych, ale równie? dla odwiedzaj?cych, ?eby wiedzieli co ogl?daj?..


Fotki..

G?. powodem tego, ?e poci?te grafiki nie chc? trzyma? si? razem, tylko s? szczeliny, jest to, ?e np. mamy mini grafik? w linku i przenosimy do nowego wiersza np. <img.. albo </ a> - skutkiem czego widzimy ró?ne szczelinki.. Warto zwróci? na to uwag?, kiedy grupujemy fotki, np. tak jak Ty w tzw. "chmur? fotek", czy te? kiedy mamy do czynienia z poci?tym layoutem..
W tym wypadku warto jechac jednym ci?giem czyli tu gdzie ko?czy si? link, zaczynamy kolejny, a wszystko jednym ci?giem.. zobaczysz w pliku..
Je?li ju? tak mamy, to fotki s? jedna na drugiej i wr?cz sklejone, wtedy dajemy padding, margin i mamy to co chcemy, w tym wypadku da?em padding = 1px i wysz?o bardzo gustownie i delikatnie, jak chcesz wi?ksze odst?py, to zwi?ksz ten padding w stylach w .gallery img {}
Da?em fotk? jak to wysz?o, (w za??czniku)


Troch? przemodelowa?em te style i wszystko chodzi jak nale?y, jest wy?rodkowane i zgrabnie u?o?one na stronie, ale równie? przechodzi validacje (fota w za??czniku)

Zapakowa?em plik index.html i style do lokal.zip (w za??czniku) - pobierz, rozpakuj i podmie? pliki, zeby zobaczy? czy jest ok. Je?li jest wporzo, to daj w?a?ciwe opisy itd.

W wolnej chwilce podrzu? mi reszt? plików to spróbuj? Ci te pliki poprawi? i napisz? co i dlaczego.. ew. pytaj o wszystko!

Pozdrawiam
roco

[Rico Roco]

hehe znowu zaczepi?em o tego topa.. i przysz?o mi cos do g?owy..
- my?la?e? o tym, ?e mog?oby to np. wyglada? tak:



Wi?ksz? fot? daj? do za??cznika. Zapakowa?em to ponownie, zmienione + do?o?y?em fotki jak to wygl?da?o pod innymi przegladarkami.. Np. "zas?onka" pod Oper? by?a tylko do po?owy.., pod IE backgroud by? mocno przesuni?ty w dó? itd.. Zrobi?em kilka fotek i ca?o?? zapakowa?em do lokal1.zip (w za??czniku).
Jak zobaczysz te fotki, to sam stwierdzisz, ?e lipka.. by?a.. Ale z niczym nie p?kaj, zrobisz jedn? druga i sqmasz o co biega.. to ?atwe, tylko potrzeba odrobink? uwagi..
BTW. je?li zrobisz z tego tak? form? pocztówki, to nawet kiedy ustawisz padding na 0 to te? b?dzie wypasio, nie mówi?, ?e lepiej, ale równie? wypasio..,
- czyli ca?kiem bez przerw.. (druga fota w za??czniku)

Pomy?la?em, ?e za ma?o Ci napisa?em o charsecie..
Chodzi o to, ?e nie wystarczy dac deklaracji w meta ?e to np. utf-8, kiedy by?o np. iso-8859-2, nale?y to jeszcze przekonwertowac, albo zapisac takim edytorem, który pozwoli Ci to zapisac z dowolnym kodowaniem, wtedy konwersja nast?pi automatycznie..
A u Ciebie jest teraz tak, ?e kiedy wybierzesz kodowanie w iso to jest ok, a krzaki pojawiaj? si? przy utf'ie. W plikach które Ci da?em jest ju? ok i wpisujesz tam normalnie ? itp..

Ok. porzerz te wszystkie pliki i popatrz jak to wyglada itp..

Pozdrawiam
roco

[pyot]

Roco.
Dzi?kuj? ponownie.
Sorki,?e dopiero odpisuj? ale wiesz - ?wi?ta
Zagl?da?em tu wcze?niej,pobra?em co mi oferowa?e?.
Ale...
Masz pi?kny layout ,przynajmniej top,reszt? widz? w totalnej rozsypce -pisz? w prawym dolnym rogu,co? si? sypie...

Spó?nione ale szczere -Weso?ych ?wi?t 

[Rico Roco]

Elo Pyot!

Niczym si? nie przejmuj! Ja w ogóle nie chodze spa? i mam nadziej?, ?e uda mi si? na czas z projektami przed ko?cem roku..

Dla Ciebie równie? Zdrowych Pogodnych ?wi?t BN i Szcz??liwego Dostatniego Nowego Roku! 

Lay jest ?wi?teczny, w styczniu zniknie jako defaultowy. Nie wiem co masz na my?li: ",reszt? widz? w totalnej rozsypce -pisz? w prawym dolnym rogu,co? si? sypie..." - to jaki? joke? Jakiej przegl?darki u?ywasz - IE w wersji 6? Nie czytasz tego co pisz? w net?wiecie? IE jest koniem troja?skim dla systemu, mo?esz straci? wszystkie dane, je?li ko?ystasz z IE szczególnie z wersji poni?ej 7..
Ja ju? nigdzie nie mam IE6 wi?c nie mam nawet jak sprawdzi?.. po za tym.. zubo?a? wygl?d tylko po to, ?eby sprzyja? ju? nie rozwijanym i badziewnym przegl?darkom? hehe

Je?li piszemy, ?e lay si? sypie, lub co? jest w rozsybce, to mamy na my?li, ?e np. jakie? elementy nachodz? na siebie, lub s? nie zgrane, "uciekaj?" gdzie? po za itp.. wi?c.. hmm nie bardzo kaman...
Za to sypie "?nieg".. mam kilka skryptów i wszystkie spowalniaj? stron?, wi?c na pocz?tku stycznia usun? skrypt.. Wola?em ten skrypt, króry daje ciekawy i pasuj?cy do reszty efekt, reaguje równie? na zachowanie kursora.. Inne to ju? klasyczne p?atki ?niegowe, lecz niestety w tej skórce padaj? tylko do po?owy..

My?l?, wi?c, ?e mia?e? na my?li "padaj?cy ?nieg" i to nim "sypie".. Je?li co? innego si? rozsypa?o, to prosz? o screena..

Pozdrówka
roco

[pyot]

IE nie u?ywam w ogóle,ale Twoje porównanie go do trojana...
Napisa?em,?e lay si? sypn??  i tak by?o.Wszed?em ledwo na forum aby pokaza?,?e ?yj? i pisa?em w prawym dolnym rogu ekranu ,nie wiem jak si? to nazywa,ale okienko do pisania tekstu tam w?a?nie si? znajdowa?o
G?ówna tre??  stronki,zjecha?a jako? na sam dó?.
Szkoda,?e nie zrobi?em zrzutu,pokaza?bym Ci.
Przegl?da?em liskiem.
Fajny top,Ty robi?e? (grafika) ?

I we? si? ch?opie prze?pij...
Pozdrawiam.

[Rico Roco]

Wy?pi? si? w grobie hehe ju? nie d?ugo w grudniu 2012..

To ciekawe co piszesz.. Mam FF w wersji 2.0.0.20 i 3.0.5, mam kilka Oper itp.., teraz dla testu jestem tu starym FF, czyli 2xx i nic takiego nie widz?..
Mam takie zasady, ?e nie wypuszczam nic do neta, dok?d nie przejdzie wszystkich testów.. na localho?cie i testowym servie w necie.., s? to zasady, których trzymam si? od 2003 roku i to na bardzo powa?nie.. Nie mog? sobie pozwoli? na jakie? kaszta?stwo netowe..

Jest szybka odpowied?, pod ostatnim postem na dole, po zalogowaniu i normalne pisanie posta, czy odpowiedzi. Kiedy piszesz "normalnie" czyli nie przez "szybk? odpowied?" - to masz edytor na górze, a posty w odwrotnej kolejno?ci pod spodem, czyli pod edytorem i polem typu "texarea"

Mo?e za bardzo jeste? przywi?zany do skryptu IPB, na którym jest SE? Mo?e wolne ??cze i si? nie za?adowa?o wsio jak nale?y? Moze mia?e? rozdzia?k? 800x600 hmm to takich nie obs?ugujemy hehe

Co do tego stylu, to top wykona? DzinerStudio.. (pisz? skórki do For na skrypcie SMF), za to wykona?em szereg ró?nych modyfikacji w wielu plikach, nie tylko dlatego, ?e ludzie z b??dami pisz?, ale równie? dlatego, ?e mam w?asne wizje, jak móg?by wygl?da? np. post itp..

Pyot, please.. jak nast?pnym razem zobaczysz jaki? bullshiter, to b?d? mi?y i machnij screena, ok? zale?y mi ?eby by?o tu bezobciachowo, poniewa? chcia?bym, ?eby userzy dobrze si? tu czuli i mieli wsio co mo?liwe..

Pozdrawiam
roco

[pyot]

Machn? screnna.
Rozdzielczo?? mam wy?sz?,to pewne.
Na SE pisa?em z sto lat temu albo dalej - wiesz,te errory mnie wkurza?y.
??cze jeden mega .
Ale jak wchodz? tu,to i tak jest dosy? ci??ko,wolniej si? wszystko ?aduje,czy to wina Twoich zabawek ?
 

Pozdrawiam.