ugrás a tartalomhoz

Javascript plugin: Photo PopUp

vmarci21 · 2016. Jan. 7. (Cs), 20.26
Sziasztok,
Készítettem egy képnagyító / képgaléria javaScriptet, melynek az 1.2-es verziójával ma készültem el, és ez az a verzió, amiben szerintem már minden (nagyobb) hibát javítottam, így szeretném megosztani veletek, hogy kikérhessem róla a véleményeteket.

Megtekinthető a Github-on
‹ Milyen laptop-ot vegyek? Könyv vásárlás ›
 ■
1

Szerintem nem lett rossz,

asam9 · 2016. Jan. 8. (P), 01.08
Szerintem nem lett rossz, gratula hozzá. Ami eszembe jut, hogy mit lenne még érdemes elkövetni vele, azok az alábbiak:

- következetes behúzások használata a kódban
- a script.js és script.css (min verziókat is beleértve) átnevezése a plugin-od nevére, hogy ne ütközzön más fejlesztő fájljaival
- azt a néhány magyar változónevet átírni angolra
- ha már vannak opciók, akkor lehessen azokat felüldefiniálni a plugin meghívásánál
- a dokumentációt kibővíteni, hogyan használhatók az opciók (ha a fenti megvalósult)
- a plugin-meghívás módjának egyszerűsítése: csomópont.pluginNeve(opciók);
- a gomboknál a karakterek helyett ikonok használata, mert azok nem annyira szépek jelenleg: pl. svg ikonok, png fallback-kel
- javítása annak a problémának, hogy bizonyos képernyőméretnél rálóg a felső, fekete sáv a képre (néhány pixelről van csak szó)
- egy kis pofozgatás a demo CSS-én, hogy modernebb legyen
2

Köszi

vmarci21 · 2016. Jan. 8. (P), 16.07
Köszi az észrevételeket. ;)

Ez alatt mit értesz?
a plugin-meghívás módjának egyszerűsítése: csomópont.pluginNeve(opciók);



Ha gombok alatt az Open és a bezáró X-et érted, akkor azoknál szándékosan nincs kép, option részben bármi beállítható, így az adott oldal megjelenésébe illő ikonokat lehet betenni (betehetnék alap ikonokat, de az oldal témájától teljesen eltérő ikonok rondábbak mint a szöveg).
3

A kérdés jogos :) Ez inkább

asam9 · 2016. Jan. 8. (P), 21.01
A kérdés jogos :) Ez inkább jQuery plugin stílus... szóval ez ebben a formában tényleg nem lenne jó, helyette lehetne: pluginNeve(csomópont, opciók); Ahol az első paraméterben a szelektort adnád meg, a második paraméter pedig lehetne egy objektum, amit majd a plugin-odban szereplő opciókkal fésülsz össze. Egyébként nem tudom mi a népszerű forma a "natív" pluginoknál, de valahogy így oldanám meg.

Ezt lehetne egyszerűsíteni:
window.addEventListener("load", function() {
  if (document.getElementsByClassName('imagegallery').length > 0) {

    var images = document.getElementsByClassName("imagegallery");
    for (var i = 0; i < images.length; i++) {
      images[i].addEventListener("click", function() {
        imagepopup.showimage(this.dataset.bigsrc, this.title, 'imagegallery');

      });
    }
  }
});
Valami ilyesmire:
window.addEventListener('load', function () {
    if (document.getElementsByClassName('imagegallery').length === 0) return;

    var options = {
        key: 'value',
        // ...
    };

    imagePopup(document.getElementsByClassName('imagegallery'), options);
});
Persze erre a változatra a plugin-on belül fel kell készíteni.

Lehet, hogy nem láttam jól, de szerintem most úgy van, hogy magában a plugin-ban tudod átírkálni az opcióidat. Azzal csak az alapbeállításokat kellene megadni és ha ettől el akarsz térni, akkor meghíváskor olyan objektumot adsz át, amiben a felülírandó kulcs-érték párok szerepelnek. Így nem a plugin-odat kell minden egyes alkalommal "bántani", amikor egy új projektbe akarod beépíteni, mert abból csak kavarodás lesz.

A gombok alatt a bezárás és előző/következő gombokat értettem - szerintem akkoris érdemesebb lenne ikonnal megoldani alapból, az pedig csak tőled függ, hogy milyenre tervezed meg, ... de ez ízlés dolga :)
4

Frissítés elérhető

vmarci21 · 2016. Május. 28. (Szo), 16.15
Frissítettem a plug-int az észrevételeid alapján, most már alapértelmezetten ikonokat használ, és egyszerűsödött a használata, most már a régi, hosszabb kód helyett ennyivel beállítható az egész:

 window.addEventListener('load', function () {
    imagepopup.newgallery('classname');
});
Ezen kívül új demo érhető el.