Šířka všech předcházejících obrázků – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 

Tomáš Bláha
~ Anonymní uživatel
5 příspěvků
10. 8. 2014   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 88.100.18.–
peter
~ Anonymní uživatel
4016 příspěvků
11. 8. 2014   #2
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:258:10ea:5e...–
peter
~ Anonymní uživatel
4016 příspěvků
11. 8. 2014   #3
-
0
-

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)

Nahlásit jako SPAM
IP: 2001:718:2601:258:10ea:5e...–
Tomáš Bláha
~ Anonymní uživatel
5 příspěvků
11. 8. 2014   #4
-
0
-

   

		<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

Nahlásit jako SPAM
IP: 88.100.18.–
peter
~ Anonymní uživatel
4016 příspěvků
11. 8. 2014   #5
-
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...

Nahlásit jako SPAM
IP: 2001:718:2601:258:10ea:5e...–
Tomáš Bláha
~ Anonymní uživatel
5 příspěvků
11. 8. 2014   #6
-
0
-

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

Nahlásit jako SPAM
IP: 88.100.18.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×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, 27 hostů

Podobná vlákna

šířka — založil froo+

šírka webstránky — založil Dávid

šířka selekce v px — založil Petroff

Sirka tabulky — založil Ondřej Šplíchal

 

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