Zoom webu kolem kurzoru – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Zoom webu kolem kurzoru – JavaScript, AJAX, jQuery – Fórum – Programujte.comZoom webu kolem kurzoru – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
reffcz0
Duch
19. 9. 2014   #1
-
0
-

Zdravím všechny :)

Možná nevim úplně kam s tim. Domnívám se, že tohle potřebuje script na straně uživatele. Resp. v html/css a lehce php nevim jak si něco takového napsat.

Moje představa je asi taková, po kliknutí na ikonku/odkaz na webu se kolem kurzoru ukáže obdélník se zoomem. Stejnym způsobem se to i vypne. Toť vše.

Připojen obrázek.Obrázek z netu pro představu.

Podle toho co o js vím, byl bych radší za klasický javascript, jen tato funkce v nějakém souboru. Nerad bych kvůli jedné funkci načítal nějakou online knihovnu.

Případně, psali by jste to v něčem jiném?

Našel jsem na internetu hodně hotových řešení web zoomu, ale žádné neodpovídalo mé představě. Provedením a jednoduchostí. Ten zoom na obrázku je pomocí desktopová aplikace.

Díky za každou radu.

Nahlásit jako SPAM
IP: 84.42.186.–
Reklama
Reklama
Matěj Andrle+1
Grafoman
19. 9. 2014   #2
-
0
-

#1 reffcz
Otázkou je, zda máte obrázek, kterýžto chcete zobrazit zprvu jako preview - načež jej následně v separátním elementu zobrazit, či alespoň HTML element, kterémuž následně zvětšit velikost - jakož i dětem. Jedná-li se o jeden z těchto případů, stačí mít 2 verze - jak již jsem naznačil a jen je pak prohazovat. Pokud nechcete zobrazovat pod myší, nemusí to být ani separát - stačí 2 verze CSS a jen je střídat...

Nahlásit jako SPAM
IP: 78.136.183.–
peter
~ Anonymní uživatel
2528 příspěvků
19. 9. 2014   #3
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:1f7:a873:a6...–
peter
~ Anonymní uživatel
2528 příspěvků
19. 9. 2014   #4
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:1f7:a873:a6...–
reffcz0
Duch
20. 9. 2014   #5
-
0
-

Pro lepší představu, chci to použít na stránce reff.cz

Nechci scrollovat v jednotlivém boxu, chtěl bych opravdu obdélník kolem kurzoru, který ho bude následovat a v tom zoom všeho v určitý oblasti (v závislosti na % zoomu a velikosti obdélníku kolem kurzoru).

Prvky jako odkazy, vstupní pole atd musí v tomto "režimu" se zaplou lupou fungovat.. díky

Nahlásit jako SPAM
IP: 84.42.186.–
Matěj Andrle+1
Grafoman
20. 9. 2014   #6
-
0
-

#5 reffcz
Již jsem to vysvětlil. Povedeš si 2 soubory CSS a kombinovat je budeš za pomoci JS. Stačí naplňovat innerHTML separovaného elementu (od okolí - za pomocí "position: fixed") elementy, kteréžto chceš zvětšit - jen jim za pomoci JS změníš třídy atp.

Nahlásit jako SPAM
IP: 78.136.141.–
reffcz0
Duch
21. 9. 2014   #7
-
0
-

Promiň, ale myslím, že se nechápem.

Jinak.

Problém č. 1

Je potřeba vytvořit element, třeba 400 x 200px, umístěný kolem kurzoru tak, že kurzor je vždy uprostřed. Element se hejbe spolu s kurzorem.

Problém č. 2

Element musí zobrazovat plochu 200 x 100px kolem kurzoru ve dojnásobném zvětšení. Je jedno nad čim se v tu chvíli kurzor nachází, prostě přibližuje vše kolem kurzoru.

Problém č.3

Všechny takto přiblížené prvky (odkazy, tlačítka atd..) musí fungovat, tzn. stránku je s touto lupou možno normálně používat.

Problém č.4

Tato lupa tam nesmí být pořád, zapne a vypne se po kliknutí na nějakou ikonku.

Ber mě tak, že s js neumim nic. A jestli jde tohle vyřešit jen s html a css, tak asi i tam mám velké mezery.

Nahlásit jako SPAM
IP: 84.42.186.–
Matěj Andrle+1
Grafoman
22. 9. 2014   #8
-
0
-

#7 reffcz
Což jsem přesně popsal - jak vyřešit!!! Problém první - to je ten element, co ho dáš "position: fixed" a top a left budeš v intervalu nastavovat na pozici myši. Problém 2. a 3. -> 2 CSS soubory a jen pomocí JS měnit třídy atp.! Bod 3. - JS funkce... Pořádně si přečti co jsem ti napsal - já na vše odpověděl hned v první reakci!

BTW:

JS funkci zapínající lupu si představuji takto:

"position: fixed" element dostane innerHTML od elementu, který se má zvětšit
změní se v tom ID, třídy a další atributy pro použití stylů "zoom.css" (ilustrační název)
zapne se interval nastavující top a left "position: fixed" elementu


 

Nahlásit jako SPAM
IP: 78.136.164.–
Matěj Andrle+1
Grafoman
22. 9. 2014   #9
-
0
-

Vlastně namísto intervalu bude asi vhodnější ohandlovat hover atp.

Nahlásit jako SPAM
IP: 78.136.164.–
peter
~ Anonymní uživatel
2528 příspěvků
22. 9. 2014   #10
-
0
-

Myslim, ze te chapeme. Chces neco takovehoto, ale aby web fungoval.
http://peter-mlich.wz.cz/…y/pplupa.htm
Jeden velky, jeden maly obrazek. Takze mas stranku s jednim css a pak mas jinou strenku ve framu s css, ktery ma velikosti nastavene dvojnasobne. Ten ifreme pres clip orezes a pozicujes na pozici kurzoru. Presne, jak to dela tady s tim obrazkem.
V tom iframe by mozna slo vyuzit browserovy zoom stranky.
https://www.google.cz/search?…

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:8d40:7e...–
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, 15 hostů

 

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