Prośba o prztłumaczenie...

Azure 114Azure TPBlueSkiesEnterprise TPInvazionlightning01_tpMovies07OutlinePhobosSMF Default ThemeTPStyle_11X-Mas

[06.01.2011, 16:54:10]

[31.12.2010, 07:06:05]

[08.12.2010, 17:21:30]

[11.11.2010, 05:20:40]

[04.11.2010, 19:48:16]

[29.05.2010, 19:00:18]

[10.05.2010, 05:50:46]

[06.05.2010, 05:40:10]

[18.12.2009, 08:03:05]

[06.12.2009, 13:55:49]

[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