Witam
Utworzyłem stronę która generuje przeglądarki do zdjęć przy użyciu sRWD
http://infinityhost.ct8.pl/picturer2/PictureBrowser.html
Tutaj pokazuję jak tego używać
Za pierwszym razem należy ściągnąć plik html + libraries , potem już można sam html
you tube
Ale po co do tego generator? To powinien być jakiś komponent który ma własności rows / columns, a width i height to raczej powinny załatwiać cssy i nie potrzebny żaden generator
@obscurity: ten komponent o którym domyślam się, że piszesz, to jest SetContainer - on jest tam używany. Tylko że on służy do generowania całych partii kodu i tutaj jest naprostszy przykład wykorzystania tego - jeden element (obeazek IMG) - a on może grupować różne elementy i sklejać je w całe bloki, tutaj bezproblemowo mogę dodać opisy tekstowe czy cokolwiek innego. To nie jest tak prosta struktura jak Ci się wydaje.
Po co mi ta vanilla jak mam własne sRWD?
johnny_Be_good napisał(a):
Po co mi ta vanilla jak mam własne sRWD?
facepalm. No właśnie widzę że masz własne rozwiązanie więc dlatego ci daję ten link. Vanilla oznacza "czysty", czyli sam javascript bez użycia żadnego frameworka ani biblioteki czyli dokładnie to co robisz.
Nie widzę tam żadnego komponentu, przy użyciu komponentu HTML wyglądałby tak:
<picture-browser columns="2" rows="2" />
lub np:
ElementBuilder.createElement("picture-browser", "")
rowy - nam odpadają bo SetContainer może je dodawać w nieskończoność.
cols - to jest struktura wewnętrza SetContainera.
to co chcesz żeby robił odzielny komponent wykonuje ten kod
for(let i=0;i<this.windows.length;i++){
for(let i2=0;i2<this.rows;i2++){
for(let i3=0;i3<this.cols;i3++){
if((i*(this.rows*this.cols)+(i2*this.rows)+i3)<this.pictures_length){
tmp=`<img onClick=ElementBuilder.MIBox('','','99%','99%').show_picture('${this.pictures[k]}');
src='${this.pictures[k]}' style='display:flex;cursor:pointer;margin:0.1%;width:${this.width}%;height:99%;'/>`; window.top.zzz+=tmp;k++;};};
if(window.top.zzz!=`<div>`){this.containers[i].add_item(window.top.zzz+`</div>`,this.style_list);}
tmp=``;window.top.zzz=`<div>`;}}
Tu nie ma potrzeby dodawać dodatkowych komponentów - tylko nabrać wprawy w użyciu SetContainera.
generowani kontrolki do obsługi wielu elementów + możliwość kontrolowania jej wyglądu jest w sRWD - to podstawa
druga rzecz to klasa do generowania elementów pobieranych z bazy danych - i to jest właśnie SetContainer
for(let i=0;i<this.windows_length;i++){
this.windows.push(ElementBuilder.createElement("DIV","display:none;overflow:auto;position:relative;flex-direction:column;padding:0%;margin:0%;height:98%;width:98%;padding:0%;border:0px solid white;background: linear-gradient(to right, blue, #AA0000);color:white;font:italic bold 16px arial,serif;","picture_window_class",this,this.lower_window,false).element);
this.windows[i].style.display = "none";
this.containers.push(new SetContainer(this, this.windows[i] ,0,"display:flex;flex-direction:row;justify-content:center;align-items:center;","1%","1%"));}
To jest tworzenie tych okien i wypełnianie pustym SetContainerem.
HTML - to jest tekst z wstawkami kodu, sRWD to jest kod z wstawkami tekstu - to jest obrót spraw o 180 stopni.
Właśnie tego nie rozumiał chłopak co mi zadał dzisiaj to pytanie - czemu to nie działa?
document.head.childNodes[0].innerHTML+=img{display: block;width: 100%;aspect-ratio: 1;object-fit: cover;object-position: center;
Czy na forum planowany jest kciuk w dół?
"Po pierwsze to XAMPP czy inne tego typu rzeczy powstały jako ułatwienie do stawiania środowisk deweloperskich i nigdy nie powinny lądować na produkcyjnym serwerze."