Řazení obrázku podle popisku – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Jandak0
Newbie
13. 9. 2016   #1
-
0
-

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

Nahlásit jako SPAM
IP: 109.233.160.–
Reklama
Reklama
peter
~ Anonymní uživatel
2547 příspěvků
13. 9. 2016   #2
-
0
-

   

<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>
Nahlásit jako SPAM
IP: 193.84.207.–
Jandak0
Newbie
13. 9. 2016   #3
-
0
-
Nahlásit jako SPAM
IP: 109.233.160.–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #4
-
0
-

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";
 

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #5
-
0
-

Mne o ukazuje takhle nejak.
[obr1]

[obr7]
[obr3]
[obr9]

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

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
Jandak0
Newbie
14. 9. 2016   #6
-
0
-


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?

Nahlásit jako SPAM
IP: 109.233.160.–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #7
-
0
-

:) 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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #8
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
Jandak0
Newbie
14. 9. 2016   #9
-
0
-

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

Nahlásit jako SPAM
IP: 109.233.160.–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #10
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
peter
~ Anonymní uživatel
2547 příspěvků
14. 9. 2016   #11
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e41b:57...–
Jandak
~ Anonymní uživatel
17 příspěvků
14. 9. 2016   #12
-
0
-

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.

Nahlásit jako SPAM
IP: 109.233.160.–
peter
~ Anonymní uživatel
2547 příspěvků
15. 9. 2016   #13
-
0
-

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)

Nahlásit jako SPAM
IP: 2001:718:2601:26c:9083:81...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

Podobná vlákna

Řazení podle data — založil JMM

Řazení podle více sloupců — založil PetrCr

Formulář podle obrázku — založil Bummer

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý