Afisare Imagini incarcate cu Ajax in Galerie Mpgal

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
andras
Mesaje: 430

Afisare Imagini incarcate cu Ajax in Galerie Mpgal

Salut,
Am un buton care deschide un <div> cu poze dintr-un anumit folder, incarcate cu Ajax (cu scopul afisarii lor ulterioare in lightbox). Functioneaza doar la al doilea click. La primul click in Inspect element apare:

Cod: Selectaţi tot

<div class="mpgal" data-mpgal="showimg:false, thumb_width:100, thumb_height:70" style="z-index: 9003; width: 800px; height: 500px; overflow: auto;"><img src="upload/59/13.jpg" title="upload/59/13.jpg" width="0" height="0" data-glim="0-0"> </div>
- deci pozele nu sint afisate pentru ca width = "0" height="0". Chiar daca pun eu in HTML

Cod: Selectaţi tot

<img src="upload/59/13.jpg" width="93" height="70" >
nu are efect.
La al doilea click apare:

Cod: Selectaţi tot

<div class="mpgal" data-mpgal="showimg:false, thumb_width:100, thumb_height:70" style="z-index: 9003; width: 800px; height: 500px; overflow: auto;"><img src="upload/59/13.jpg" title="upload/59/13.jpg" width="93" height="70" data-glim="0-0"> </div>
- deci pozele se afiseaza. Se poate vedea pe :
superbit.ro:1003/strategy/index.php

-> Contests -> Click pe imaginea romb (Photos, video, link).
Cum fac sa le afiseze de la primul click? Multumesc.

MarPlo Mesaje: 4343
Salut
Problema e ca incarci si pozele si scriptul mpgal.js cu Ajax. Imaginile nu sunt in browser cand e adaugat scriptul mpgal.js, si astfel nu stie dimensiunea lor la primul click. La al doilea le recunoaste din memoria cache a browser-ului.
Indicat ar fi sa ai pozele adaugate in acel Div, precum si script-ul mpgal.js la incarcarea paginii; Div-ul sa aibe initial: display:none;, iar la apasare pe buton doar il faci vizibil cu: display:block;.

- Daca imaginile trebuie totusi incarcate cu Ajax, adauga script-ul mpgal.js inca de la inceput in codul html al paginii, iar in raspunsul in ajax de la server sa fie doar codul html cu imaginile, fara tag <script>. Apoi, dupa ce imaginile sunt adaugate cu "success" in pagina, executi acest cod: mpgal = new MPGal();
Cam asa in codul ajax cu jquery:

Cod: Selectaţi tot

success : function(msg) {
  $('#poze').html(msg);
  if(mpgal) mpgal = new MPGal();
}
Dar "<script src="mpgal.js"></script>" trebuie sa fie deja in pagina.

andras Mesaje: 430
M-am gindit sa incarc pozele de la inceput si sa jonglez cu display:none; si display:block; dar la fisierul apelat cu ajax() nu pot renunta pentru ca acolo preiau in SESSION id-ul liniei de pe care dau click. Pozele se afiseaza numai cele incarcate pentru turneul respectiv. Dar am inteles cauza si asta este foarte important. Multumesc!

MarPlo Mesaje: 4343
Daca la "success" in Ajax aplici: mpgal = new MPGal();, cum e aratat in raspunsul anterior, cred ca va functiona.
Dar "<script src="mpgal.js"></script>" trebuie sa fie de la inceput in pagina.

- Din ce am vazut, ai prima versiune a scriptului MPGal, dar intre timp am mai facut ceva imbunatatiri la el. Gasesti script-ul la: https://coursesweb.net/javascript/mpgal-image-gallery

andras Mesaje: 430
Multumesc, functioneaza. Am si pus pe server impreuna cu noua varianta de MPGal.

Subiecte similare