NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Honza
Člen
Avatar
Honza:5.1.2018 14:11

Ahoj, rád by jsem udělal tooltip když najedu na obrázek, vše funguje, až na to, že to nemůžu nastylovat, nevíte proč?
Zde je příklad: https://jsfiddle.net/0dgxsu0z/1/

 
Odpovědět
5.1.2018 14:11
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Honza
Neaktivní uživatel:5.1.2018 16:55

Ahoj, našel jsem hned několik problémů:

  1. Neuzavřený tag <div>, to může dělat neplechu, tudiž jsem ho radši uzavřel.
  2. Skript, který zprovozní tooltip, je umíštěný před Jquery, musíš ho mít až po nalinkování Jquery, asi bych šel do normální verze, namísto slim.
  3. Test integrity akorát přidělával problémy, proto jsem jej umazal.
  4. Špatné selektory v css

Po delší době, a zkoušení různých verzí jsem přišel na to, že ve verzi 3.x, se tooltip placne hned za element, čili bez problémů můžeš udělat několik různých stylů pro každou classu, ale nevýhodou je, že to rozbilo všechny rowy a columny. Odkaz: https://jsfiddle.net/9qvv03c3/9/ (Linky jsou v external)

Zatímco ve verzi 4.x se tooltip placne na konec stránky, tzn. že nemám tušení jak vybrat právě jej, tudiž styly platí pro všechny tooltipy, a nejsou specifické pro danou třídu. Zase odkaz: https://jsfiddle.net/xbmpgyLz/3/ (Už jsem byl, až moc línej, vše házet do external, a tak jsem vše nechal v html)

Styly si kdyžtak dostyluj jak potřebuješ, neřešil jsem je, stačilo, že fungovaly.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
5.1.2018 16:55
Neaktivní uživatelský účet
Avatar
Honza
Člen
Avatar
Honza:7.1.2018 16:10

Ten neuzavřený div tag jsem v kodu neměl, ale zapomněl jsem ho zkopírovat do Jsfiddle. Udělal jsem to jak říkáš a funguje to. Díky moc. A ještě jsem se chtěl zeptat, jestli když mám slideshow a otevřu obrázek kterej má např. 800x2300px jestli ho jde zmenšit aby se mi vešel do stránky, ale aby stále ten obrázek vypadal přirozeně. Zkoušel jsem to pomocí overflow a nic. Díky Honza

Editováno 7.1.2018 16:10
 
Nahoru Odpovědět
7.1.2018 16:10
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Honza
Neaktivní uživatel:7.1.2018 21:07

Můžeš v css nastavit vlastnost width, s tím, že height se automaticky dopočítá, případně obráceně. Nicméně pokud chceš, aby všechny obrázky byly doopravdy pěkné, tak bych doporučil, mít stejné rozlišení, při nejhorším stejný poměr stran.

Nahoru Odpovědět
7.1.2018 21:07
Neaktivní uživatelský účet
Avatar
Honza
Člen
Avatar
Odpovídá na Neaktivní uživatel
Honza:8.1.2018 16:20

No mám asi takovýto obrázek a chtěl bych, aby se nedalo scrollovat a ten obrázek se automaticky zmenšil a vešel se na obrazovku bez scrollování, jde to?
https://jsfiddle.net/ns3q2vpa/

 
Nahoru Odpovědět
8.1.2018 16:20
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Honza
Neaktivní uživatel:8.1.2018 20:46

Boostrap, tě má zbavit přebytečného js kódu, a celá slideshow/galerie, lze udělat jen s použitím jejich javascriptu. To znamená, že ty vůbec nemusíš psát žádný js kód, v tom je ta krása, stačí se mrknout do dokumentace, a chvíli experimentovat. Kdykoliv máš moc javascriptu, něco je špatně :P.

S tím, že chceš slideshow jak jsi říkal, doporučil bych použít Carousel, který je na tyto věci přesně přizpůsobený. Ten pak jednoduše hodíš do Modalu.

https://jsfiddle.net/94t49vnp/21/ Je tam hotová jednoduchá galerie, snad z ní něco vyčteš, doufám, že jsem víceméně pochopil, čeho chceš dosáhnout. Kód je psaný pro verzi 4.x, ale přepsat jej případně do 3.x určitě nebude problém. Mimochodem, ten škaredý efekt resizování je přesně to, o čem jsem mluvil v minulém komentáři - stejné rozlišení obrázků.

Nahoru Odpovědět
8.1.2018 20:46
Neaktivní uživatelský účet
Avatar
Honza
Člen
Avatar
Odpovídá na Neaktivní uživatel
Honza:9.1.2018 18:53

Super, o tom Carouselu jsem nevěděl. Ale asi jsem to špatně vysvětlil, chtěl bych, aby se ten obrázek automaticky zmenšil na výšku a zachovali se poměry stran, takže by se zmenšil i šířkově, pokud by bylo třeba, aby obrázek stále vypadal normálně a přirozeně. Použil jsem tvůj příklad a přidal již finální obrázky.
https://jsfiddle.net/g0q402tz/4/

 
Nahoru Odpovědět
9.1.2018 18:53
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Honza
Neaktivní uživatel:9.1.2018 19:34

Můžeš natvrdo nastavit pro každý obrázek výšku:

#myCarousel > .carousel-inner > .carousel-item > img {
  max-height: 90vh;
  height: 90vh;
}

Tím pádem, výška carouselu vždy bude stejná, jediné co, tak obrázky s nízkým rozlišením nemusí být tak pěkné.

Nahoru Odpovědět
9.1.2018 19:34
Neaktivní uživatelský účet
Avatar
Honza
Člen
Avatar
Odpovídá na Neaktivní uživatel
Honza:9.1.2018 20:14

Také ještě není přesně to, co hledám, chtěl bych aby se i ten carousel měnil pokud by to šlo, aby třeba jedny dveře vypadali viz. obr1 a druhé viz. obr2

Editováno 9.1.2018 20:15
 
Nahoru Odpovědět
9.1.2018 20:14
Avatar
Honza
Člen
Avatar
Honza:10.1.2018 20:20

Kecám, je to ono, teď na to koukám, díky moc :)

 
Nahoru Odpovědět
10.1.2018 20:20
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Honza
Neaktivní uživatel:10.1.2018 20:48

Doufám, že jsme se konečně pochopili, https://jsfiddle.net/g0q402tz/12/, už by mělo jen stačil doplnit pár pěkných stylů, opravit pár drobností, kterými jsem se nezabýval, a je to.

Nahoru Odpovědět
10.1.2018 20:48
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.