Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] galeria zdjęć z dowolnym podpisem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
AxZx
13.08.2008, 09:19:30
witam

potrzebuje zrobić coś takiego jak fancybox - wyświetlanie zdjęć z galerii.
problem w tym ze w tytule musze podac kod html.
znacie cos takiego?
najlepiej zeby to byl plugin do jquery.

EDIT:
chyba ze mozna tak zmodyfikowac fancybox lub dorobic jakies haki zeby mozna bylo przekazac parametr z widoku do skryptu JS.
lord_t
13.08.2008, 21:55:41
1. Modyfikace pliku fancybox...js:

a.) Po linijkach(poczatek pliku):
Kod
$.fn.fancybox = function(settings) {
        opts.settings = $.extend({}, $.fn.fancybox.defaults, settings);

        $.fn.fancybox.init();

        return this.each(function() {
            var $this = $(this);
            var o = $.metadata ? $.extend({}, opts.settings, $this.metadata()) : opts.settings;

            $this.unbind('click').click(function() {
                $.fn.fancybox.start(this, o); return false;
            });
        });
    };


wklej:
Kod
    
    $.fn.fancybox.linkParser = function(tytul){
        var A=tytul.indexOf("''a");
        if(A==-1) return tytul;
        else
        {
            var otwier=tytul.indexOf('{');
            var sep   =tytul.indexOf('!',otwier)
            var zamyka=tytul.indexOf('}',sep);
            var pre=tytul.substring(0,A);
            var hrf=tytul.substring(otwier+1,sep);
            var mid=tytul.substring(sep+1,zamyka);
            var suf=tytul.substring(zamyka+1,tytul.length);
            return pre+'<a href="'+hrf+'">'+mid+'</a>'+suf;
        }
    };


b.) Zamien tę linijkę:
Kod
$('#fancy_title div').html(opts.itemArray[opts.itemNum].title);

na
Kod
$('#fancy_title div').html($.fn.fancybox.linkParser(opts.itemArray[opts.itemNum].title));


2. Jak tego używać?
Standardowo jak fancy:
[HTML] pobierz, plaintext 
  1. <a title="ABCD ''a{obraz1.png!Obraz 1} XYZ" href="duzy.png"><img src="maly.gif" alt="" /></a>
[HTML] pobierz, plaintext


kod:
Kod
''a{obraz1.png!Obraz 1}

zostanie zamieniony na 
[HTML] pobierz, plaintext 
  1. <a href="obraz1.png">Obraz 1</a>
[HTML] pobierz, plaintext


3.Uwagi:
-testowalem tylko na FF (ale jako,że to jQ. to i na inmnych powinno iść)
-dziala tylko dla jednego linku, drugi nie przejdzie.
AxZx
13.08.2008, 22:07:25
dzięki ci bardzo dobry człowieku:)

hmm, skoro juz modyfikowac fancybox to moze nie bawic sie w przekazywanie calych htmli tylko po prostu niezbednych parametrow. ja potrzeby do fancybox przekazac tylko ID zdjecia.
wiec moze by tak w tytule podawac tylko cos takiego jak {{idphoto:293}} ?
w fancybox.js wpisac odpowiedni html i tam jakos wstawic to id. bo tam ma byc troche wiecej kodu - dojdzie jeszcze jakis <img> i jakies style.

podsumowujac jak ja to widze (na podstawie Twojego kodu;) w fancybox.js:
- zmienna kod_html z kodem html do wstawienia
- parsowanie tytulu zdjecia pobranego z widoku
- wstawienie ID zdjecia do zmiennej z kod_html
- na koniec to co juz podales: $('#fancy_title div').html($.fn.fancybox.linkParser(opts.itemArray[opts.itemNum].title));

pomozesz z tym parsowaniem?
lord_t
13.08.2008, 22:14:55
1)W title będziesz podawać tylko id? To można w ogóle olać {{ i }} i dać sam numer.
2)Tego nie rozumiem:
Cytat
-parsowanie tytulu zdjecia pobranego z widoku

Z jakiego widoku? Co to jest widok:>?
AxZx
13.08.2008, 22:22:27
mozna samo id, ale tam tez bedzie zwykly tytul pobrany z bazy - czyli to co sobie uzytkownik tam wpisze ma sie tam wyswietlac no i dodatkowo chce jakos przemycic to ID. czyli jakos trzeba wyroznic ze to jest wlasnie ID zdjecia a nie jakas liczba co sobie user wpisze.

widok to jest kod html:)
w nim generowane sa linki do zdjec no i te miniaturowe zdjecia.
w widoku tez jest 'uruchamianie' fancybox.
w widoku tez ma byc przekazane id do fancybox:)
lord_t
14.08.2008, 18:13:30
1. Modyfikacje pliku fancybox...js:

a.) Po linijkach(poczatek pliku):
Kod
$.fn.fancybox = function(settings) {
        opts.settings = $.extend({}, $.fn.fancybox.defaults, settings);

        $.fn.fancybox.init();

        return this.each(function() {
            var $this = $(this);
            var o = $.metadata ? $.extend({}, opts.settings, $this.metadata()) : opts.settings;

            $this.unbind('click').click(function() {
                $.fn.fancybox.start(this, o); return false;
            });
        });
    };


wklej:
Kod
    
    $.fn.fancybox.wzorzec=function(id){
        return '<a id="ffancy'+id+'"href="obraz'+id+'.png"><img src="fancy_closebox.png"></a>';
    };
    
    $.fn.fancybox.iidd;
    
    $.fn.fancybox.linkParser = function(tytul){
        var otwier=tytul.indexOf("{{");
        if(otwier==-1) return tytul;
        else
        {
            var zamyka=tytul.indexOf('}}',otwier);
            var pre=tytul.substring(0,otwier);
            var id =tytul.substring(otwier+2,zamyka);
            var suf=tytul.substring(zamyka+2,tytul.length);
            $.fn.fancybox.iidd='#ffancy'+id;
            return pre+$.fn.fancybox.wzorzec(id)+suf;
        }
    };


b.) Zamien tę linijkę:
Kod
$('#fancy_title div').html(opts.itemArray[opts.itemNum].title);

na
Kod
$('#fancy_title div').html($.fn.fancybox.linkParser(opts.itemArray[opts.itemNum].title));
$($.fn.fancybox.iidd).fancybox();


2. Jak używać?
[HTML] pobierz, plaintext 
  1. <a title="ABCD {{1}} XYZ" href="duzy.png"><img src="maly.gif" alt="" /></a>
[HTML] pobierz, plaintext


kod:
Kod
{{1}}

zostanie zamieniony na 
[HTML] pobierz, plaintext 
  1. <a id="ffancy1" href="obraz1.png"><img src="..."</a>
[HTML] pobierz, plaintext

^ patrz wzorzec

3.Nie jestem pewien czy o to chodziło. Napisałem na tyle na ile zrozumiałem:)
AxZx
14.08.2008, 18:26:35
dzięki Ci bardzo. już zabieram się za testowanie.

EDIT:
juz jest prawie dobrze. przekazuje to ID.
ale problem jest jeszcze w czyms.

jest galeria ze zdjeciami wyswietlonymi obok siebie (miniaturki). po kliknieciu pojawia sie to fancybox - wyswietlane jest zdjecie. pod zdjeciem jest umieszczony tytul - obok tego tytulu chce wstawic link z obrazkiem do kolejnej akji - wyslij do znajomego.

czyli jest okienko fancybox, klikam na link pod spodem i zamiast zdjecia pojawia sie pobrana strona z okreslonego adresu.

takie cos dziala gdy wstawie ten link w metodzie $.fn.fancybox.init - tam jest jakis kod html wstawiany.
jak tam recznie wpisze <a href=..... to wlasnie dzieje sie tak jak chce tylko ze nie mam tego ID zdjecia.
ta metoda init wywolywana jest podczas startu fancybox - kazde pozniejsze modyfikacje nie przynosza efektu otwarcia strony w tym samym okienku.

Wiesz może czemu tak sie dzieje? albo masz inny sposob na pogodzenie tego z nyroModal?

EDIT2:
a jak zrobic zeby to {{1}} nie wyswietlalo sie pod tym zdjeciem? tam gdzie tytul.
lord_t
14.08.2008, 20:38:46
Ad wyświetlanie:
To kwestia stylu css.

Ad modyfikacje kodu:
Zmianą wzorca nie możesz tego osiągnąć?
AxZx
14.08.2008, 21:01:44
hmm nie chodzi o wyswietlanie - tylko chcialem opisac w czym problem - do czego mi to potrzebne:)

modyfikuje wlasnie fancybox, moze cos z tego bedzie.
jak narazie udalo mi sie zaladowac formularz do wysylania maila do znajomego:) teraz tylko przeslac dane z formularza i bedzie dobrze.

dzieki raz jeszcze.
pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.