Šířka všech předcházejících obrázků – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj,

potřeboval bych poradit s funkcí v JS (Klidně i s Jquery):

Mám zápis v html:

<img src="1.jpg" id="1" onclick="gw();">
<img src="2.jpg" id="2" onclick="gw();">
<img src="3.jpg" id="3" onclick="gw();">
<img src="4.jpg" id="4" onclick="gw();">
<img src="5.jpg" id="5" onclick="gw();">

A potřebuji, aby funkce při zavolání patřičným obrázkem vypsala součet šířky všech PŘEDCHOZÍCH obrázků.
Tedy, pokud kliknu na img 1, vypíše se 0. Pokud kliknu na img 4, vypíše se šířka img 1+2+3.
Ideálně by vypsaná šířka měla být vč. border a margin.

Ve výsledku nepůjde jen o samotný výpis, ale o horizontální scrollování o daný počet pixelů, ale s tím si již poradím.

Díky moc za rady.

<div><img ...><img ...><img ...>...</div> - uzavrit do divu
...
gw(this) - predavat this, element aktualniho obrazku
...
div = this.parentNode // nadrazeny element
im = div.images // div.getElementsByTagName('IMG') // seznam vsech obrazku
alert(im) // melo by to byt pole Array nebo Nodes
alert(im[0].width)
alert(im[0].offsetWidth) // pripadne si najdi googlem, jak zjistit spocitanou sirku obrazku, kdyz ji nezadas do width
alert(this.id)
A pak uz jen cyklus, ktery to poscita vse po aktualni pozici obrazku. Netusim, jak to napsat v jquery, asi by to vypadalo lepe.

Hlavne, pravidla rikaji, ze id musi byt jedinecne a musi zacinat pismenem. Pokud tam pouzijes dve galerie se stejnymi id, tak to muze byt zajimave. Ikdyz zrovna pres this.id je to konkretni prvek, tak by to asi nevadilo.

Jestli by treba nebylo jednodusi nastavit visibility na hidden? To si pak zachovava rozmery, jen je to neviditelne.

w = 0;
for (i=0; i<im.length; i++) {w+=im[i].width; if (im[i].src==this.src) break;} // pri porovnani src ani nepotrebujes idecka
alert(w)

		<img src="img/fashion/1.jpg" onclick="gw(this);">
		<img src="img/fashion/2.jpg" onclick="gw(this);">
		<img src="img/fashion/3.jpg" onclick="gw(this);">
		<img src="img/fashion/4.jpg" onclick="gw(this);">
		<img src="img/fashion/5.jpg" onclick="gw(this);">

<script>
    
function gw(im){
w = 0;
for (i=0; i<im.length; i++) {w+=im[i].width; if (im[i].src==this.src) break;} // pri porovnani src ani nepotrebujes idecka
alert(w)

};
   
</script>

Nyní to vypadá takto, ale vypisuje se jen 0

1) Mno, a mas to uzavrene v divu? Jak chces kontrolovat obrazek po obrazku, kdyz je nemas v nicem uzavrene?
2) This je odkaz na aktualni element (tag).
pr1: <img onclick=alert(this.src)>klikni a zobraz alert
pr2: <span onclick=alert(this.innerHTML)>klikni a zobraz alert</span>
3) this.parentNode je odkaz na nadrazeny element, to by byl ten div
4) a z neho ziskas pole obrazku bud jako .images a nebo jako .getElementsByTagName('IMG')
5) No, a i kdybys to mel vsechno teda spravne, tak jsem te chtel upozornit, ze kdyz u obrazku nezadas parametr width, tak budes muset pouzit jinou funkci, ktera se mozna nazyva offsetwidth nebo jinak. To uz se da najit googlem.

Jak/Co se hleda googlem?
all images in div jquery
Treba treti odkaz mas na forum stackoverflow.com, ktere mi casto pomohlo resit problemy...
http://stackoverflow.com/…ic-size ;

1) tag the images that fit the criteria

$('#targetDiv img').each(function() {
      if($(this).height()>70) {
         $(this).addClass('biggie')
      }
})

2) Hook up navigation

var myPos = 0;

    $('#btnNext').click(function() {
        //copy this image to the placeholder 
        $('#placeholder').attr('src', $('#targetDiv .biggie').eq(myPos).attr('src'));
         myPos++;
         if(myPos>$('#targetDiv .biggie').length) {
            myPos = 0;
         }
    })

Jsem ti chtel poradit, jaka slova mas hledat a poskladat do sebe. Tu radost, zprovoznit to, jsem chtel nechat tobe. Samozrejme je mozne najit googlem hotove reseni...

Tak jsem si to nakonec vyřešil sám. Kdyby někdo někdy řešil stejný problém. Jediné omezení je uvádět id u každého obrázku:

<img src="img/fashion/1.jpg" id="1" onclick="gw(this);">
<img src="img/fashion/2.jpg" id="2" onclick="gw(this);">
<img src="img/fashion/3.jpg" id="3" onclick="gw(this);">
<img src="img/fashion/4.jpg" id="4" onclick="gw(this);">
<img src="img/fashion/5.jpg" id="5" onclick="gw(this);">

<script>

function gw(im){
	thisid = $(im).attr('id'); //id daného obrázku
	firstid = 1; //id prvního elementu
	width = 0; //šířka pro scrollování

	while(firstid < thisid){
		width += $("#"+firstid).outerWidth() + 24; //získání a přičtení šířky obrázku + korekce odsazování (24px)
		firstid = firstid + 1; //inkrementace id

	};
	
	window.scrollTo(width, '0'); //Souřadnice scrollování
};
   
</script>

Díky za rady