wyswietl obrazek po kliknieciu wiersza Opcje

[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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/sad.gif) ...i nie wiem czy wogole tedy droga

dzieki.

[trueblue]

Nie:

[HTML] pobierz, plaintext 
a.trigger('click');
[HTML] pobierz, plaintext 

a:

[HTML] pobierz, plaintext 
a.removeClass('hidden');
[HTML] pobierz, plaintext 

[johny_s]

[HTML] pobierz, plaintext 
a[0].click();
[HTML] pobierz, plaintext 

[robert1974]

Nie:

[HTML] pobierz, plaintext 
a.trigger('click');
[HTML] pobierz, plaintext 

a:

[HTML] pobierz, plaintext 
a.removeClass('hidden');
[HTML] pobierz, plaintext 

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.

Ten post edytował trueblue 21.02.2015, 20:38:19

[robert1974]

moja wina, sposob jak to opisuje jest pewnie daleki od poprawnego (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/questionmark.gif)

czy jest jakis sposob by zdebugowac czemu sie obrazek nie otwiera przy uzyciu tej biblioteki prettyPhoto? skonczyly mi sie pomysly (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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

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

bo to jest cos czego ja nie robie u siebie.
u mnie w kodzie jest to tylko raz i w taki sposob:

[XML] pobierz, plaintext 
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto({
                        show_title: false,
						social_tools: false
				 });
....
[XML] pobierz, plaintext 

Wytlumaczy ktos moze?

Ten post edytował robert1974 22.02.2015, 10:00:24

[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 (IMG:style_emoticons/default/sad.gif) , .... ale kod ktory dziala wyglada tak:

[XML] pobierz, plaintext 
function drawResults(){
	to=0;
         $.ajax({
           url: 'ajax/ajax_reload.php',
           type: 'post',
           data: {reload: 'reload'},
//           dataType: 'JSON', 
          success: function(msg){
              msg = $.parseJSON(msg);
              $('#results').empty();
              var highlighted=0;
              var patt = '';
              var ii=0;
              $.each(msg, function(k,v){
 
                  if(ii<5){
                      var sou = v.sounds.split('-');
                      $.each(sou, function(k, v){
 
                         if($('#play-sound').is(':checked')) playSound(v);
			 console.log('v => '+v);
                      });
 
                  }
 
                  //DLA KAZDEGO PRZETWÓRZ DATY
                  if(v.signal_dir == -1) var arrow = "<img src='images/down.png'>";
                  else var arrow = "<img src='images/up.png'>";
 
 
                  if(v.highlight == 1){
                      var style = ' style="background: #BB86A6"';
                      patt = v.instrument;
                      highlighted++;
                  }
                  else var style = '';
 
//                  console.log(v.highlight);
 
                  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});
 
                 ii++;
 
              });
                 to=0;
              if(highlighted > 0) document.title= '('+highlighted+') '+patt;
	      else document.title='0';
           },
           error: function(msg){
//               alert('Wystąpił błąd, proszę odświeżyć stronę.');
               location.reload();
           }
        }); 
 
}
 
[XML] pobierz, plaintext 

i sprawdzilem ze jesli zrobie ten warunek:

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

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 (IMG:style_emoticons/default/sad.gif)

[XML] pobierz, plaintext 
$(document).ready(function(){
 
 
    $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
    drawResults();
....
 
[XML] pobierz, plaintext 

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).

[XML] pobierz, plaintext 
  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});
[XML] pobierz, plaintext 

Ten post edytował robert1974 22.02.2015, 22:35:21

[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:

[XML] pobierz, plaintext 
if ($mydirection==1) echo '<td style="width:10px">'."<img src='images/up.png'></td>";
else	echo '<td style="width:10px">'."<img src='images/down.png'></td>";
 
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>";
[XML] pobierz, plaintext 

uff, dziala, krok na przod, po nacisnieciu wiersza otwiera juz w prettyPhoto (IMG:style_emoticons/default/smile.gif)
w moim przypadku trzeba dodac 1 raz:

[XML] pobierz, plaintext 
var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   	  document.getElementById("results").innerHTML=xmlhttp.responseText;
 
	  $("a[rel^='prettyPhoto']").prettyPhoto();
 
 
    }
  }
 
  xmlhttp.open("GET","edu_table.php?ins="+instrument+"&&"+timeframes+"&&sig="+sig_name+"&&"+sig_dirs,true);
  xmlhttp.send();
[XML] pobierz, plaintext