| Autor | Zpráva | ||
|---|---|---|---|
| Joan Profil |
#1 · Zasláno: 20. 7. 2010, 13:37:11
Snažím se vytvořit script na postupné zvětšování a nazpátek zmenšování (miniatur) obrázků ve fotogaleriích klepnutím na ně. Vycházela jsem z tohoto návodu, jenže mně to nejelo. Navíc chci klikat na obrázek a ne na tlačítko vedle. Tak jsem se pokusila script poupravit.
Jenomže moje dosavadní snažení nefunguje a navíc chybová konzola nehlásí žádnou chybu, takže se nemám od čeho "odrazit". Co mám prosím změnit, vyhodit nebo upravit? Mám těch fotogalerií na stránkách vícero, tak budu potřebovat spíše univerzálnější script. Obdélníkové miniatury i obrázky budou vždy stejné velikosti, jen některé vyjímečně na stojato. Díky předem a hezký den! |
||
| Kajman_ Profil * |
#2 · Zasláno: 20. 7. 2010, 14:06:46
Zkuste tomu obrázku měnit vlastnost width. Bez toho se zvětšovat ani zmenšovat nebude. Také by bylo lepší, kdyby se jen spouštělo zvětšování nebo zmenšován a ne oboje najednou.
|
||
| Joan Profil |
#3 · Zasláno: 20. 7. 2010, 20:18:48
Kajman:
Zkuste tomu obrázku měnit vlastnost width Však je ve scriptu nastaveno zvětšování a zmenšování po 3 pixelech. Také by bylo lepší, kdyby se jen spouštělo zvětšování nebo zmenšování a ne oboje najednou. Jak to ale udělat, když na JEDEN obrázek potřebuji aplikovat celkem DVĚ různé akce? |
||
| Chamurappi Profil |
#4 · Zasláno: 20. 7. 2010, 21:02:05
Reaguji na Joan:
Z tvého kódu: timer = setTimeout("zvetsi('min', 'id', 'max')", 10);zvetsi, které předáš jako argumenty tři řetězce. V JavaScriptu se řetězce spojují plusem. Kdyby sis chtěla načasovat poskládané volání podobné tomu, které máš v onclicku, vypadalo by to takhle:
timer = setTimeout("zvetsi('" + min + "', '" + id + "', '" + max + "')", 10);timer = setTimeout(function()
{
zvetsi(min, id, max);
}, 10);Další problém vidím v datových typech. Pokud máš '300' v proměnné min, je to řetězec. Přičteš trojku a co dostaneš? Také řetězec, konkrétně '3003'. S čísly pracuj jako s čísly, nedávej je do uvozovek.
Dále nevím, co chceš vyjádřit tímto kouskem kódu: var id = document.getElementById(id); document.getElementById, tak by musel vypadat takhle:
var id = document.getElementById; id byla funkce, tzn. id("obr_1") by ti vrátilo totéž, co document.getElementById("obr_1"). Ale o to ti asi nešlo, protože tuhle globální proměnnou id ani nikde nepoužíváš (argument id uvnitř funkcí zvetsi a zmensi je už jiná proměnná). Pro začátek raději rozepisuj document.getElementById, kdykoliv chceš najít element podle id.
clearTimeout('timer');clearTimeout přijímá jako argument číslo timeoutu, nikoliv řetězec. A i tak je to zbytečné, protože timeout se vykonává jen jednou, není třeba ho při posledním běhu rušit (stačí nenastavit ten nový).
Nevšiml jsem si, že bys někde nastavovala šířku na tu proměnnou min. Měla bys někde mít cosi jako:
document.getElementById(id).width = min; |
||
| Joan Profil |
#5 · Zasláno: 21. 7. 2010, 13:58:28
Ó, děkuji Chamurappi za Tvůj čas na tak obsáhlé vysvětlení!
...které předáš jako argumenty tři řetězce. V JavaScriptu se řetězce spojují plusem... Spojovat proto, aby se předaly všechny tři argumenty a ne třeba jen jeden? A proč jsou tam současně uvozovky i apostrofy u každého argumentu? ...Čistší postup je předat jako argument funkci, která se po uplynutí času zavolá... Tak toto chápu o hodně víc než ten přehršel uvozovek a apostrofů u těch argumentů. Pro začátek raději rozepisuj document.getElementById, kdykoliv chceš najít element podle id. Však o toto se taky celou dobu snažím, ale jak vidím, tak špatně. var id = document.getElementById; … a pak by v id byla funkce Myslela jsem, že var pouze uvozuje proměnnou - jak poznám, že je tam ještě funkce? A proč nemá argument (id) a tento kód document.getElementById(id).width = min; argument id uvnitř funkcí zvetsi a zmensi je už jiná proměnná No tak teď už teda vůbec nevím, jak proměnné deklarovat, aby funkce "věděly", kde je hledat... Ale přesto se mi podařilo obrázek aspoň částečně rozhýbat! A přišla jsem při tom na toto: 1) při použití: document.getElementById(id).style.width = min; document.getElementById(id).style.width = max; anebo obráceném pořadí bez STYLE: min = document.getElementById(id).width; max = document.getElementById(id).width; se malý obrázek rychle zvětšil, pomalu zmenšoval a zase rychle nakynul do max velikosti. A konzola nehlásila žádnou chybu! Což by šlo třeba použít na rychle vyběhnuvší nadpis, jeho pomalé zmenšení a zase rychlé zvětšení :-). 2) pod definování funkce zmensi(max, id, min) jsem už slovo style přidat nesměla, protože došlo k chybě parsování vlastnosti "width" (této frázi moc nerozumím...) a obrázek se ani nepohnul. Kdy se tedy píše element.style.width a kdy pouze element.width? 3) pokoušela jsem se oddělit akci zvětšování obrázku od jeho (kliknutím) zmenšování např. takto: <a href="#"><img src="endy.jpg" border="2px" style="color: green;" width="150px" id="obr_1" onClick="zvetsi(150, 'obr_1', 300); if(max >= min) {zmensi(300, 'obr_1', 150);}"></a>a taky takto: <a href="javascript: zvetsi(150, 'obr_1', 300);"><img src="endy.jpg" border="2px" style="color: green;" width="150px" id="obr_1" onClick="zmensi(300, 'obr_1', 150);"></a> ale ani jedno nefunguje. Zvláštní je, že obrázek se zvětšoval po kliknutí sám od sebe, přestože jsem funkci "zvetsi" z HTML dokonce vymazala. No bude to ještě běh na dlouhou trať - ale ať :-) |
||
| Joan Profil |
#6 · Zasláno: 23. 7. 2010, 15:26:13
Juchuchuuu!!
Tak se mi podařilo kápnout na způsob zvětšování a zase zmenšování obrázků ve fotogalerii. Ještě to potřebuje dost dobrousit, ale víceméně to hlavní už mám. Zatím mám fotogalerie řešené tak, že miniatura 120x90 px je v SRC a velký obrázek 640x480 px je v A HREF a otevírá se do nového okna: <div class="pic"><a href="obrazky/z1.jpg" title="Kliknutím zvětšíte"><img src="obrazky/z1-nahled.jpg" width=120 height=90 alt="Po příjezdu na Sluneční zátoku" /></a><p>Těsně po příjezdu</p></div> Potřebovala bych prosím popostrčit v těchto směrech: 1) můj dosavadní způsob funguje i bez Javascriptu, protože kód obsahuje oba obrázky: malý i velký. Při mém javascriptovém měnění velikosti obrázku mám v kódu pouze jeden obrázek, ten velký, jehož velikost jsem do SRC natvrdo zmenšila zadáním rozměrů náhledů, protože zvětšená miniatura vypadala velmi nepěkně. Ale mám jen jeden zdrojový kód pro obě řešení (bez i JS) a netuším, jak toto obejít. 2) zvětšené obrázky mi zajíždějí pod ostatní a prootže je mám plovoucí, tak na ně z-index nefunguje! 3) obrázek se zvětšuje docela trhaně, nejen na mém ultrapomalém netboku Acer One A110. Je to normální? 4) Při kliknutí se odhadem o 3px zmenší a pak teprve rozběhne do VGA velikosti. Stejně tak po návratu obrázku na výchozí velikost 120x90 px tyto rozměry "přejede" a zůstane o fous menší. Zkoušela jsem to opravit ale nepodařilo se. 5) ráda bych, aby se zvětšený obrázek zobrazoval uprostřed galerie, ale když napíšu idImg.style.position = "absolute"; Byl by prosím někdo tak trpělivý a vysvětlil mi, jak tyto chyby odstranit? Moc děkuji předem! |
||
| _es Profil |
#7 · Zasláno: 23. 7. 2010, 16:21:03
Joan:
Do atribútu width značky img patrí len číslo - šírka v pixeloch, teda bez toho px.
Atribút onclick sa dá zadať aj pre img a potom môžeš do funkcie predať priamo objekt obrázka: onclick="funkcia(this, ďalšíParameter)".
Rozmery obrázka sa dajú nastavovať aj bez vlastnosti style: objektObrázka.width = číslo;
Môžeš sa inšpirovať napríklad v tomto krátkom kóde. |
||
|
Časová prodleva: 3 dny
|
|||
| Joan Profil |
#8 · Zasláno: 26. 7. 2010, 14:18:51
Díky za odpověď! Pokoušela jsem se tím prokousat, opravila jsem snadno jen "width" bez pixelů.
Já mám jeden onClick v odkazu a s atributem href na zvětšení obrázku, druhý onClick je u img zase na zmenšení obrázku. Když jsem tam zadala do závorky slovo this, tak obrázek přestal reagovat tím směrem, ve kterém onClicku jsem tu změnu udělala. Na Tvůj odkaz jsem se dívala, ale nejsou mi jasné ty dvě pomlčky za vykřičníkem, to vidím poprvé function f(){ if(!--img.height) clearInterval(i);}Bohužel ale nemůžu přijít ani na to, kam do zdroje zadat správně veliké obrázky: chci, aby bez JavaScriptu fotogalerie po kliknutí na náhled zobrazovala velký obrázek, takže musím mít ve zdroji v SRC náhled a v A HREF velký obrázek, jenomže v tomto případě se zase zvětšuje miniatura, která je po zvětšení škaredá. Hmm, asi jsem si ukousla pro začátek příliš veliké sousto a fotogalerie si budu muset udělat zatím jednodušeji... |
||
| _es Profil |
#9 · Zasláno: 26. 7. 2010, 14:59:09
Joan:
„nejsou mi jasné ty dvě pomlčky za vykřičníkem“ Výkričník je logická negácia a dve pomlčky je operátor dekrementácie - zmenšenia o 1. Testuje sa, či výška nulová a zároveň sa výška zmenšuje. „Když jsem tam zadala do závorky slovo this“ this je objekt, kde došlo k udalosti, teda na čo sa kliklo. Ak si v tom kóde upravíš podmienku a vhodne zmeníš parametre, tak by nemalo byť obtiažne to použiť. V kódoch v tejto diskusii sa automaticky vytvárajú odkazy na dokumentáciu, to by ti mohlo tiež pomôcť. |
||
| Joan Profil |
#10 · Zasláno: 27. 7. 2010, 11:41:44
_es:
uáá, dekrementaci znám, jen mi to nedocvaklo. Mohu ještě poprosit o vysvětlení, proč v tomto kódu timer = setTimeout("zvetsi('" + min + "', '" + id + "', '" + max + "')", 10);Děkuju moc za vysvětlení |
||
| panther Profil |
#11 · Zasláno: 27. 7. 2010, 11:48:56 · Upravil/a: panther
Joan:
„Mohu ještě poprosit o vysvětlení, proč v tomto kódu [...] jsou uvozovky ještě navíc uvnitř apostrofů?“ řetězec v setTmeout je obalen uvozovkami, jednotlivé parametry uvozovkami. Řetězec je několikrát ukončen (uvozovka za apostrofem), protože min, id a max jsou proměnné. Za proměnnou se uvozovkou znovuotevře řetězec, aby v něm mohl být apostrof a čárka. Plus je spojení řetězců. Ve výsledku, když doplním za proměnné hodnoty, to může vypadat např. takto: timer = setTimeout("zvetsi('10', '2', '100')", 10);Když si všimneš obarvení zde na diskusi, červeně jsou řetězce (textové), zeleně proměnné a modré jsou funkce s odkazem na dokumentaci funkce. „Viděla jsem i obrácenou verzi, kdy apostrofy byly uvnitř uvozovek.“ stejná situace, řetězce lze uzavírat do apostrofů i uvozovek. Článek na toto téma napsal tiso. |
||
| _es Profil |
#12 · Zasláno: 27. 7. 2010, 11:55:55
panther:
„řetězec v setTmeout je obalen uvozovkami, …“ Nie je dobré dávať do setTimeout textový reťazec.
|
||
| panther Profil |
#13 · Zasláno: 27. 7. 2010, 11:58:07 · Upravil/a: panther
_es:
„Nie je dobré dávať do setTimeout textový reťazec.“ to netvrdím, navíc to psal už [#4] Chamurappi. Na konrkétní ukázce, kde se Joan ptala, proč je tam těch uvozovek a apostrofů tolik, to řetězec byl - vyskakování z řetězce kvůli proměnné a hodnoty proměnných obalené apostrofy (to, že to jsou čísla a v této funkci to není nejvhodnější, je věc jiná). Princip je zřejmý. |
||
| Joan Profil |
#14 · Zasláno: 27. 7. 2010, 12:01:46
Děkuji vám oběma! Teda mě ale vůbec nenapadlo, že řetězec je uvnitř funkce nutné ukončovat. Vytiskla jsem si to (barevně) a budu nad tím přemýšlet.
|
||
| panther Profil |
#15 · Zasláno: 27. 7. 2010, 12:12:07 · Upravil/a: panther
Joan:
„Teda mě ale vůbec nenapadlo, že řetězec je uvnitř funkce nutné ukončovat.“ nejde o řetězec ve funkci, ale o to, že v něm je proměnná. <script>
var promenna = 'hodnota';
document.write("promenna"); // vypise "promenna"
document.write(promenna); // vypise "hodnota"
document.write("hodnota promenne je " + promenna); // vypise "hodnota promenne je hodnota"
document.write("hodnota promenne je '" + promenna + "'"); // vypise "hodnota promenne je 'hodnota'"
document.write("hodnota promenne je \"" + promenna + "\""); // vypise "hodnota promenne je "hodnota""
//pripadne s odradkovanim na vystupu
var promenna = 'hodnota';
document.write("promenna<br>"); // vypise "promenna"
document.write(promenna + "<br>"); // vypise "hodnota"
document.write("hodnota promenne je " + promenna + "<br>"); // vypise "hodnota promenne je hodnota"
document.write("hodnota promenne je '" + promenna + "'"); // vypise "hodnota promenne je 'hodnota'"
</script> |
||
| Joan Profil |
#16 · Zasláno: 27. 7. 2010, 12:21:23 · Upravil/a: Joan
panther:
Děkuji mnohokrát - přesně tohle jsem potřebovala (na zředění toho javascriptového guláše v hlavě) Hezký den :-) EDIT: no paráda, už je mi to "ouplně" jasné! Celá pro mě záhada spočívala v mém nepochopení, které že dvojice uvozovek patří k sobě.,u jednoduchého řetězce mi to bylo jasné hned. Ale tady je vlastně 1.řetezec (v uvozovkách), proměnná (bez uvozovek), 2.řetězec (zase v uvozovkách), proměnná (bez uvozovek) atd. Díky za vše, už můžu zase šlápnout na plyn :-) |
||
|
Časová prodleva: 14 let
|
|||
0