Řazení obrázku podle popisku – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj, potřeboval bych řadit obrázky na stránce vygenerovane pomocí Mnew CMS. Bohužel tento CMS nepodporuje řazení obrázku. Potřeboval bych, aby poslední přidaný obrázek byl zobrazen na stránce první.

 Šablona pro vkládání obrázku vypadá takto...

<article class="thumb">
<a href="obr1.jpg" class="image">
<img src="obr1.jpg" alt="obr1"></a>
<h2></h2>
<p>
</p>
</article>

Napadlo mě, že by bylo asi nejlepší řešení to nějak řadit pomocí popisku např. alt="1" by byl obrázek zobrazený jako první nahoře.

Prosím nemá někdo nějaký nápad jak to vyřešit, nebo nějaky třídící kód podle parametru alt...

Díky moc

<div id=aaa>
<article class="thumb">
<a href="obr1.jpg" class="image">
<img src="obr1.jpg" alt="obr1"></a>
<h2></h2>
<p>
</p>
</article>
<img src="obr7.jpg" alt="obr7"><br>
<img src="obr3.jpg" alt="obr3"><br>
<img src="obr9.jpg" alt="obr9"><br>
</div>
<br>

<div id=bbb></div>

<script>
function sortCnv(str) {return str.replace(/\D/g,'')*1;} // prevod na cislo
function sortCmpNum(a,b) {return sortCnv(a.alt) - sortCnv(b.alt);} // funkce pro razeni

var o1, o2 ,i, list1, list2;
o1 = document.getElementById('aaa');
o2 = document.getElementById('bbb');
list1 = o1.getElementsByTagName('IMG');
list2 = [];
for (i=0;i<list1.length;i++) // prevod do pole
{
list2[i] = list1[i];
//alert(sortCnv(list1[i].alt))
}
list2.sort(sortCmpNum);
for (i=0;i<list2.length;i++)
{
o2.innerHTML += '<a href="'+list2[i].src+'" class="image"><img 

src="'+list2[i].src+'" alt="'+list2[i].alt+'"></a>'+" <br>\n";
}
</script>

Zkusil jsem to, ale nefunguje mi to :(, řadí se to takto

Připojen obrázek.

Pak si otevri JS konzolu pro dany prohlizec a najdi chybu. Pripadne, pokud je to IE a spoustis to na disku, tak je treba odkliknout takovou zlutou hlasku, ze chces spustit javascript, ze je to bezpecne. Ve FF mi to chodi. Na tom obrazku mas cast, ktera se zobrazi normalne bez JS. Pod ni by se mela zobrazit serazena cast.

Nebo muzes zkusit ob  radek pridat alert(1), 2, 3, atd a zjistit, ktery alert se zobrazi a ktery uz ne.

Taky je mozna dobre vedet, ze string se v JS zalamuje jen a pouze s lomitkem \ nebo ukoncenim a pres pluska. Pokud tam neni, musi to byt v jednom radku. Forko to treba ukazuje zalomene pres 2 radky a nevim, jak moc se to zkopiruje spravne, jak jsem to vlozil.

o2.innerHTML += '<a rel="nofollow" href="'+list2[i].src+'" class="image"><img src="'+list2[i].src+'" alt="'+list2[i].alt+'"></a>'+" <br>\n";
 

Mne o ukazuje takhle nejak.
[obr1]

[obr7]
[obr3]
[obr9]

[obr1]
[obr3]
[obr7]
[obr9]
 

Zkouším to právě taky ve FF, IE nepoužívám. https://jsfiddle.net/Lw23a5xa/

Už to funguje. Takže to chápu správně, že se to seřadí ze sekce aaa do sekce bbb?

Případně lze to udělat tak aby se to řaadilo ihned v aaa?

:) Vis, je rozdil v poradeni a provedeni prace, vyreseni problemu na miru. Se predpoklada, ze tak snadnou upravu si dokaze kazdy uz dogooglovat nebo domyslet. Take se muze stat, ze to nepujde primo prepsat a v tom pripade bude treba pouzit toto a puvodni div smazat.

Jo, a mozna by bylo lepsi to obalit do function a spoustet zvlast.
function xxx()
{var ...}
xxx();

Ok, zkusim se s tim nejak poprat. Jde o to, že to mám na stránky, kde mám galerii a používám tam CMS od mnews. A tam se to právě řadí po sebe podle data přidání, dle šablony co jsem posílal v prvním příspěvku. A jelikož ůbec nevím jak to řazení tam upravit v phpčku, tak mě napadlo, že jdodušší to bude přes javascript. Že se prostě vygeneruje kód HTML z toho CMS s obrázkem (viz. první příspěvek) a dle popisku se to seřadí pomocí toho javasciptu. Každopádně díky

V php je to podobne. Php si z sql vytahne data do pole, obvykle pojmenovane $row a vypisuje to pres cyklus while nebo for. Tak ty muzes bud pouzit serazeni v SQL prikazu (ORDER BY tab.alt) a nebo pred vypis jeste pridat php serazeni
http://php.net/…ef.array.php (ctrl+f sort)
http://php.net/…on.usort.php (Example #1 usort() example)
Vidis, ze je to uplne totez, jako jsem napsal v JS, tez pro serazeni je tam pomocna funkce, ktera vyhodnocuje 2 porovnavane promenne (a, b) v sortu.

Mimochodem, php pise, ze pouziva Quick sort, coz je celkem pomaly algoritmus. Ja bych spolehal spis na sql. Jsem se nudil a hral si, delal takovy jednoduchy test rychlosti a zatizeni, klikni na Start
http://mlich.zam.slu.cz/…sorting2.htm
Jsou tam algoritmy, ktere maji cycles a cmp na hodne nizkem cisle.
Kdyz zvysis pocet prvku na 10000, mozna bude treba povypinat nektere algoritmy.

Jo, php ma teda 2 moznosti. Bud pracuje s sql a nebo primo se soubory. V obou pripadech to budou nejaka pole, ktera lze serazovat.
A v pripade php pole z sql to mozna bude treba do toho pole pretahnout a az pak to pujdee seradit. $row je jeden radek, ale neni to cele pole se vsemi radky.

No právě to je ten problém no, to CMS, je bohužel bez SQL. Dival jsem se na nejake navody z php no jak to serzovat a je vsude pole no. Více méně to CMS ty obrázky vygeneruje do html takto:

<article class="thumb">
<a href="obr1.jpg" class="image">
<img src="obr1.jpg" alt="obr1"></a>
<h2></h2>
<p>
</p>
</article>
<article class="thumb">
<a href="obr3.jpg" class="image">
<img src="obr3.jpg" alt="obr3"></a>
<h2></h2>
<p>
</p>
</article>
<article class="thumb">
<a href="obr2.jpg" class="image">
<img src="obr2.jpg" alt="obr2"></a>
<h2></h2>
<p>
</p>
</article>

s tím, že je tam vkládá tak, jak jsou nahrány no. A proot to potřebuju třídit třeba podle názvu nebo podle něčoh at si můžu urřit která fotka bude nahoře a která dole atd.

Co ti k tomu rici? Ano, mas tam nejaky php kod, ktery svet nevidel. (z pohadky, obusku z pytle ven, jitrnice, kterou svet nevidel, jak se tam nacpaval neviditelnou jitrnici)