Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyswietl obrazek po kliknieciu wiersza
Forum PHP.pl > Forum > Po stronie przeglądarki
robert1974
czesc.

w php generuje tabele z wierszami. jedna z kolumn jest link do obrazka, jak sie kliknie to sie obrazek wyswitla, .... ale
chcialbym gdy uzytkownik kliknie na jakims wierszu (ktorejkolwiek kolumnie) by pojawial sie obrazek z danego wiersza.

znalazlem taki kawalek kodu ktory mam nadzieje ze jest pomocny, choc go do konca nie rozumiem sad.gif

1. uzywam klasy hidden, ktora :
.hidden{
display: none;
}

2. przy tworzniu tablicy uzywam tego hidden by nie pokazac linku
echo '<td style="width:240px"> <a href="sigfiles/'.$myimg.'" class="hidden">PIC LINK</a></td>';

choc w sumie to chyba lepiej uzyc tej klasy w tagu TD, by wcale kolumny z linkiem nie pokazywac. teraz pokazuje sie pusta kolumna.

3. i teraz jest taki kod:

$('table').on('click', 'tr', function(){
var a = $(this).find('.hidden');
a.trigger('click');

ktory z tego co rozumiem przechwytuje event klikniecia w wiersz tabeli, szuka co jest klasy hidden (czyli ten moj img), i trigeruje click, czyli jesli dobrze rozumiem, to powinno dzialac tak samo jakbym kliknal samemu w ten ukryty link. niestety na ta chwile nie dziala sad.gif ...i nie wiem czy wogole tedy droga

dzieki.

trueblue
Nie:
  1. a.trigger('click');

a:
  1. a.removeClass('hidden');
johny_s
  1. a[0].click();
robert1974
Cytat(trueblue @ 21.02.2015, 17:25:15 ) *
Nie:
  1. a.trigger('click');

a:
  1. a.removeClass('hidden');


jesli zaslonie classa hidden pola kolumny to Twoj sposob je po prostu odsloni, beda do klikniecia, ale nie o to mi chodzilo.

@johny_s
Twoj sposob dziala. otwiera obrazek. Dziekuje.
Tylko ze w innym kodzie uzywaja tego a.trigger('click'); ... i tam tez to dziala, a u mnie jakos nie. Zaraz sie temu jeszcze przyjrze, bo wciaz nie jest to 100% jak chcialem.
viking
Console.log(a), zapewne jest tam tablica elementów wiec .each().
trueblue
Ok, źle Cię zrozumiałem.

Nie wywołasz natywnego kliknięcia odpalając trigger. Wyzwalając dane zdarzenie odpalasz funkcję, która została przypisana do tego zdarzenia (w kodzie JS).
Jeśli podepniesz pod 'click' <a> np. funkcję window.open, to wtedy zadziała to czego oczekujesz.

P.S. Wydaje mi się, że to przekombinowane. Jeśli <a> nie jest Ci do niczego potrzebne, to src obrazka przechowywuj w data-src wiersza tabeli, pobieraj i wstawiaj jako url dla bieżącej lokalizacji lub nowego okna.
robert1974
moja wina, sposob jak to opisuje jest pewnie daleki od poprawnego sad.gif

zaraz przygotuje opis co mam a co chcialbym osiagnac.

juz tlumacze jak to chcialbym zrobic, i mam nawet dzialajacy kod, ale pisany przez kogos i nie wszystko zrozumiem, a lubie dokladnie rozumiec swoj kod, stad pisze od poczatku po swojemu, no i wersje troche rozbudowana.

1. mam wyswietlone wiersze tabeli, kilka kolumn, ostatnia kolumna (z linkiem do obrazka przypisanego danemu wierszowi) jest na ta chwile slaba, bo jest pusta, gdyz na niej zastosowalem klase hidden. To jest do poprawki. Czy moge np. Jakos dobrac sie do linku do obrazka, inczej niz: var a = $(this).find('.hidden');

do czego daze w tym kroku:
2. po kliknieciu w wiersz na ta chwile (po zaaplikowaniu kodu Johny_s) otwiera obrazek,ale wychodzi z glownej strony. Chce to zmienic by pozostawal na stronie i otwieral obrazek przy pomoc PrettyPhoto. Zaraz z tym powalcze.
3. Ale teraz, ....jak mam wierszy 100, to nie chce po kolei klikac wiesza, otwierac kazde zdjecie, zamyksac i przechodzic do kolejnego wiersza. Chce ( i w tym kodzie co mam tez tak to jest zrobione, tylko nie ogarniam jak sad.gif ) przejechac powoli myszka po wierszach i by obrazeki (w wersji pomniejszonej) sie od razu pojawialy i znikaly.


ad1. rozwiazalem, dodalem link z obrazkiem z classa hidden do innej kolumny juz czyms wypelnionej.

...ale jak zrobic by a[0].click(); otwieralo obrazek w prettyPhoto questionmark.gifquestionmark.gif

czy jest jakis sposob by zdebugowac czemu sie obrazek nie otwiera przy uzyciu tej biblioteki prettyPhoto? skonczyly mi sie pomysly sad.gif
johny_s
f12 i w konsoli sprawdź czy nie wywala błędów
robert1974
nie wywala.

doszedlem do czegos takiego, ze jesli stosuje prettyPhoto do obrazka ktory jest w sekcji body to dziala, ale jesli chce dokladnie ten sam kod uzyc tez w czesci body ale generowanej przez php / ajax to juz nie dziala.

<a href="./pics/obrazek.png" rel="prettyPhoto[myGallery]" title="tytul"><img src="./pics/obrazek.png" width="160" height="79" alt="mojalt" title="mojtytul"/></a>

...........
..........
..........
nowy trop smile.gif

w tym kodzie innej osoby jest cos takiego i to dziala:

$.ajax({
url: 'ajax/ajax_reload.php',
type: 'post',
data: {reload: 'reload'},
// dataType: 'JSON',
success: function(msg)

potem petla po msg, ktora procesuje zwrocone wiersze tabeli:

var html = '<tr class="result" '+style+'><td class="instrument">'+v.instrument+' '+v.id+'</td><td class="tf">'+v.tf+'</td><td class="signame">'+v.signal_name+'</td><td class="sigdir">'+arrow+'</td><td class="sigbarno">'+v.signal_barno+'</td><td class="updatedtime">'+convertDate(v.last_updated_time)+'</td><td class="exptime">'+convertDate(v.exp_time)+'</td><td>'+convertDate(v.last_updated_time)+'<a href="sigfiles/'+v.img+'" class="hidden" rel="prettyPhoto">xxx</a></td></tr>';

$('#results').append(html);

document.title

$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});

... i to dziala, klikkniecie na kazdy wiersz tabeli otwiera obrazek w prettyPhoto


a gdy zmienie troche petle:

if(ii<2)
{
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
}

powoduje ze tylko 2 pierwsze wiersze beda klikalne (bo ii<2)



Czego nie rozumiem, to czemu dla kazdego processowanego wiersza dodawane jest to
  1. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});



bo to jest cos czego ja nie robie u siebie.
u mnie w kodzie jest to tylko raz i w taki sposob:
  1. <script type="text/javascript" charset="utf-8">
  2. $(document).ready(function(){
  3. $("a[rel^='prettyPhoto']").prettyPhoto({
  4. show_title: false,
  5. social_tools: false
  6. });
  7. ....


Wytlumaczy ktos moze?
trueblue
Jesteś pewien, że jest jakaś pętla po msg, a jeśli jest to prettyPhoto jest dołączane w każdym jej przebiegu? Jeśli tak, to nie ma to sensu. Wystarczy raz poza pętlą (po dodaniu wierszy).
Jeśli też dołączasz wiersze poprzez ajax, to powinieneś zrobić analogicznie.
robert1974
ja tego tez nie rozumiem sad.gif, .... ale kod ktory dziala wyglada tak:

  1. function drawResults(){
  2. to=0;
  3. $.ajax({
  4. url: 'ajax/ajax_reload.php',
  5. type: 'post',
  6. data: {reload: 'reload'},
  7. // dataType: 'JSON',
  8. success: function(msg){
  9. msg = $.parseJSON(msg);
  10. $('#results').empty();
  11. var highlighted=0;
  12. var patt = '';
  13. var ii=0;
  14. $.each(msg, function(k,v){
  15.  
  16. if(ii<5){
  17. var sou = v.sounds.split('-');
  18. $.each(sou, function(k, v){
  19.  
  20. if($('#play-sound').is(':checked')) playSound(v);
  21. console.log('v => '+v);
  22. });
  23.  
  24. }
  25.  
  26. //DLA KAZDEGO PRZETWÓRZ DATY
  27. if(v.signal_dir == -1) var arrow = "<img src='images/down.png'>";
  28. else var arrow = "<img src='images/up.png'>";
  29.  
  30.  
  31. if(v.highlight == 1){
  32. var style = ' style="background: #BB86A6"';
  33. patt = v.instrument;
  34. highlighted++;
  35. }
  36. else var style = '';
  37.  
  38. // console.log(v.highlight);
  39.  
  40. var html = '<tr class="result" '+style+'><td class="instrument">'+v.instrument+' '+v.id+'</td><td class="tf">'+v.tf+'</td><td class="signame">'+v.signal_name+'</td><td class="sigdir">'+arrow+'</td><td class="sigbarno">'+v.signal_barno+'</td><td class="updatedtime">'+convertDate(v.last_updated_time)+'</td><td class="exptime">'+convertDate(v.exp_time)+'</td><td>'+convertDate(v.last_updated_time)+'<a href="sigfiles/'+v.img+'" class="hidden" rel="prettyPhoto">xxx</a></td></tr>';
  41. $('#results').append(html);
  42. document.title
  43. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
  44.  
  45. ii++;
  46.  
  47. });
  48. to=0;
  49. if(highlighted > 0) document.title= '('+highlighted+') '+patt;
  50. else document.title='0';
  51. },
  52. error: function(msg){
  53. // alert('Wystąpił błąd, proszę odświeżyć stronę.');
  54. location.reload();
  55. }
  56. });
  57.  
  58. }
  59.  


i sprawdzilem ze jesli zrobie ten warunek:

  1. if(ii<2)
  2. {
  3. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
  4. }


to klikalne/otwierane w prettyPhoto beda tylko 2 pierwsze wiersze.
trueblue
Nie tu nic do nierozumienia.
Warunek działa prawidłowo i dzięki temu efekt jest jaki jest. Natomiast dołączanie prettyPhoto można wyprowadzić poza pętlę.
robert1974
jest ten kod tez poza petla, ale zupelnie nic nie zmienia czy aktywny czy zakomentowany. I to jest wlasnie ta czesc ktorej nie rozumiem. Jesli nie bedzie tej linijki dodanej tak jak w poprzednim kodzie (wewnatrz petli) to nie dziala klikanie na prettyPhoto sad.gif


  1. $(document).ready(function(){
  2.  
  3.  
  4. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
  5. drawResults();
  6. ....
  7.  



a ze moj kod jest w php ktory tworzy tabele, to nie wiem nawet jak ten warunek dodac. Dodanie go raz po $(document).ready ... tez nic nie zmienia, czyli mi nie dziala.

maskara jakas, 2 dni na tym siedze i nie dziala ani moja wersja, ani nie potrafie ogarnac czemu to co wkleilem dziala.

a moze inaczej: tworzony html wyswietlany jest na stronie poprzez: $('#results').append(html);
a co wlasciwie robi linijka : $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
bo ona nie jest dodawana do html na strone.
a to ona odpowiedzialna jest za to ze dana linijka bedzie klikalna lub nie (tak jak pisalem wczesniej poza petla taka linijka nic juz jakos nie zmienia).

  1. var html = '<tr class="result" '+style+'><td class="instrument">'+v.instrument+' '+v.id+'</td><td class="tf">'+v.tf+'</td><td class="signame">'+v.signal_name+'</td><td class="sigdir">'+arrow+'</td><td class="sigbarno">'+v.signal_barno+'</td><td class="updatedtime">'+convertDate(v.last_updated_time)+'</td><td class="exptime">'+convertDate(v.exp_time)+'</td><td>'+convertDate(v.last_updated_time)+'<a href="sigfiles/'+v.img+'" class="hidden" rel="prettyPhoto">xxx</a></td></tr>';
  2. $('#results').append(html);
  3. document.title
  4. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
trueblue
prettyPhoto w document.ready dołącza galerię do elementów, które istnieją przy załadowaniu strony.
Jeśli galeria ma działać dla elementów dodanych dynamicznie (ajax), to za to odpowiada ten drugi fragment (po append).
robert1974
aaa, zaczynam rozumiec. dzieki. dzisiaj popatrze. bo u mnie to bedzie jakos inaczej , bo tabele buduje tez dynamicznie/Ajaxem ale w php, w ten sposob:

  1. if ($mydirection==1) echo '<td style="width:10px">'."<img src='images/up.png'></td>";
  2. else echo '<td style="width:10px">'."<img src='images/down.png'></td>";
  3.  
  4. echo '<td style="width:240px">' . date('Y-m-d H:i:s',$myupdated_t). '<a href="sigfiles/'.$myimg.'" class="hidden" rel="prettyPhoto">aaa</a>'."</td>";





uff, dziala, krok na przod, po nacisnieciu wiersza otwiera juz w prettyPhoto smile.gif
w moim przypadku trzeba dodac 1 raz:

  1. var xmlhttp=new XMLHttpRequest();
  2. xmlhttp.onreadystatechange=function() {
  3. if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  4. document.getElementById("results").innerHTML=xmlhttp.responseText;
  5.  
  6. $("a[rel^='prettyPhoto']").prettyPhoto();
  7.  
  8.  
  9. }
  10. }
  11.  
  12. xmlhttp.open("GET","edu_table.php?ins="+instrument+"&&"+timeframes+"&&sig="+sig_name+"&&"+sig_dirs,true);
  13. xmlhttp.send();

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.