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