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
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
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
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
Multumesc, functioneaza. Am si pus pe server impreuna cu noua varianta de MPGal.

Subiecte similare