Když se obrázek nevejde na šířku smartphonu... – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Když se obrázek nevejde na šířku smartphonu... – JavaScript, AJAX, jQuery – Fórum – Programujte.comKdyž se obrázek nevejde na šířku smartphonu... – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

oxidián0
Grafoman
27. 11. 2022   #1
-
0
-

Dejmetomu že mám obrázek (pruh) široký 800px a display zobrazovacího zařízení má menší šířku třeba 320. Na obrázku je text, který musí návštěvník rozluštit (CAPTCHA). Dá se pomocí JS (např. JQuery) udělat, aby ho uživatel touchpadu mohl trochu posunout doleva (mimo dotah) a zase zpět? Pomocí cliku a tažení pomocí myši bych to nejspíš zvládl, ale pomocí touchpadu nevím.

Nahlásit jako SPAM
IP: 94.113.186.–
gna
~ Anonymní uživatel
1882 příspěvků
28. 11. 2022   #2
-
+1
-
Zajímavé

jQuery UI má funcki draggable, která by mohla jít rozchodit na mobilech pomocí jQuery UI Touch Punch, ale mně se to nepovedlo.

Ale jednoduchý scrolovatelný div mi funguje pěkně. 

#scroll {
  width: 200px;
  height: 200px;
  overflow: auto;
}
--
<div id="scroll">
<img src="elephant.jpg">
</div>
Nahlásit jako SPAM
IP: 213.211.51.–
peter
~ Anonymní uživatel
4007 příspěvků
28. 11. 2022   #3
-
0
-

pomoci css jde ten obrazek zmensit
https://www.geeksforgeeks.org/…ly-with-css/
google = image responsive css cover

background-size:contain; /* cover*/
background-position:center;

https://stackoverflow.com/questions/44091567/how-to-cover-a-div-with-an-img-tag-like-background-image-does

div {
  border: black solid;
  width: 400px;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

<div>
  <img src="//lorempixel.com/100/100" />
</div>

Ja vim, ja vim, mozna to neni uplne nejlepsi napad, zmensovat, ale treba to bude pouzitelne i zmensene. Dokonce to muze byt i lepe citelne.

Nahlásit jako SPAM
IP: 2001:718:2601:258:7d8c:7b56:5466:a561...–
oxidián0
Grafoman
28. 11. 2022   #4
-
0
-

No já právě nevím jestli přečtou všechny znaky když - teď se dívám šířka je 680px. Některé znaky jsou menší a je lepší aby to bylo dobře vidět.

A ještě dotaz na tlačítko s atrributem onclick. Platí onclick i pro touchpady? Protože mám mapu, kde je okno z divu a v něm tlačítko zavřít mapu nebo zavřít okno. Když kliknu myší na tlačítko, zavře se jedno nebo obojí. Ale fungovalo by to na touchpadu? Nemám to na čem vyzkoušet.

Nahlásit jako SPAM
IP: 78.45.193.–
gna
~ Anonymní uživatel
1882 příspěvků
28. 11. 2022   #5
-
+1
-
Zajímavé

Touchpad je prakticky myš a touchscreen na mobilech taky funguje podobně jako myš. "Chmatání" na tlačítka funguje stejně, jako bys na ně klepnul myší.

Zkoušet to můžeš i na desktopu, když přepneš do mobilního režimu (Ve FF a Ch je to zkratka Ctrl+Shift+M)

Nahlásit jako SPAM
IP: 213.211.51.–
oxidián0
Grafoman
28. 11. 2022   #6
-
0
-

#5 gna
Díky

#3 peter
Taky díky.

Vyskytla se ještě taková možnost, že to mohu technicky oříznout. Protože veřejnost nemá přístup do složky s obrázky a genetuju obrázek php skriptem s gdimage.

I když zase nevím jestli ten skript s gdimage není slabou stránkou z hlediska možného útoku přetížením serveru.

Nahlásit jako SPAM
IP: 78.45.193.–
peter
~ Anonymní uživatel
4007 příspěvků
28. 11. 2022   #7
-
0
-

Ja bych to orezal pomoci css. To prave nemusis zasahovat do php.A nebo jeste muzes zkusit ten obrazek preklopit na vysku, tez pomoci css.
Pokud te nic z toho nezaujme, muzes zkusit ukazat nejaky vzorek 2-3 obrazku a do jakeho ramecku to chces napasovat.
 

Nahlásit jako SPAM
IP: 2001:718:2601:258:c425:f89d:17b4:7d3b...–
oxidián0
Grafoman
28. 11. 2022   #8
-
0
-

#2 gna

Ten plugin je z roku 2014.

Tady se píše, že prý do JQuery je možné událost připojit

$('obj').bind('touchstart mousedown', function(e){ });

Jenže těžko něco zkoušet bez touchpadu.

Nahlásit jako SPAM
IP: 78.45.193.–
oxidián0
Grafoman
28. 11. 2022   #9
-
0
-
Nahlásit jako SPAM
IP: 78.45.193.–
gna
~ Anonymní uživatel
1882 příspěvků
29. 11. 2022   #10
-
0
-

To draggable byl jen první nápad, kdyby sis s tím chtěl hrát.

Spíš jsem myslel nechat to scrolování na prohlížeči. Ale jak jsem si s tím hrál, tak mi to dost často scrolovalo celou stránku místo jen obrázku. S nabindovanými touch událostmi to ale pěkně scroluje jen obrázek.

A ještě raději asi jak to napsal Peter. Zobrazit ten obrázek celý a zase nechat zoomování na prohlížeči, pokud je to použitelné.

Nahlásit jako SPAM
IP: 213.211.51.–
oxidián0
Grafoman
29. 11. 2022   #11
-
0
-

#10 gna
Spíš jsem myslel nechat to scrolování na prohlížeči. Ale jak jsem si s tím hrál, tak mi to dost často scrolovalo celou stránku místo jen obrázku. S nabindovanými touch událostmi to ale pěkně scroluje jen obrázek.

Co myslíte? To? To byla hodně nespecifická odpověď. V kódu co jsem poslal není žádný specifický JS kód na skrolování.

Nahlásit jako SPAM
IP: 94.113.175.–
gna
~ Anonymní uživatel
1882 příspěvků
29. 11. 2022   #12
-
0
-

#11 oxidián
No, ty jsi chtěl šoupat obrázek. To je skrolování. Já jsem navrhl to nedělat programově, ale dát ho do skrolovatelného divu (overflow: auto).

Původně mi to fungovalo pěkně (sáhnu na obrázek a posunu ho), ale když jsem to později zkoušel znova, tak to často kvedlalo celou stránkou. To je na prd.

Tak jsem to ještě zkusil skrolovat programově a to funguje dobře.

Nahlásit jako SPAM
IP: 213.211.51.–
oxidián0
Grafoman
29. 11. 2022   #13
-
0
-

#12 gna
Ten název skrolování mi nesedí. Já myslel, že mluvíš o něčem jiném (například ten overflow slouží k vytvoření posuvníků a možnosti skrolování nebo tažení myši). Tomu říkám normální tažení nebo drag. Teď jak jsem to zkoušel to funguje. Já to zkusím a uvidím jestli to bude fungovat. A dám to někomu na zkoušku. A pak když ne, tak to lze udělat přes tlačítko. Např. Při každém stisku tlačítka se obrázek posune o 200 px doleva. Maximálně však o 600 px. S jak malou obrazovkou mohu počítat u smartphonů? Co je nejmenší velikost? Případně možnost zapnout ten horizontální scroll bar přes tlačítko.

Nahlásit jako SPAM
IP: 94.113.175.–
peter
~ Anonymní uživatel
4007 příspěvků
29. 11. 2022   #14
-
0
-

Existuje takovy plugin, kod, ktery jsem kdysi videl na jakpsatweb, tusim Lupa se to jmenovalo. Slouzi k zoomovani obrazku. Neco podobne pouzivaji eshopy. Jako, ten drag-drop take neni uplne spatny napad.
Nebo, jeste by tam slo udelat animaci, ze se to bude samo posouvat doleva, doprava..
https://www.jakpsatweb.cz/…zsireni.html#…

Nahlásit jako SPAM
IP: 2001:718:2601:258:84cd:8b85:b152:42e5...–
gna
~ Anonymní uživatel
1882 příspěvků
29. 11. 2022   #15
-
0
-

#13 oxidián
Já jsem chytil toho skrolování, protože na mobilech typicky nechytáš a netaháš posuvníky na kraji okna, ale vnitřní obsah toho okna. Takže efekt je stejný.

Nahlásit jako SPAM
IP: 213.211.51.–
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, 6 hostů

Podobná vlákna

Tisk na šířku — založil elvis

Zmena šírku webu pre desktop. — založil Peter Rusnák

 

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