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

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.

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>

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.

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.

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)

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

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.
 

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

Zkusím někde sehnat samostatný touchpad a pak tento článek.

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

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

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

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

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#…

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