Podstránky a "hover"

Seth
12. pro 2016 10:41 #129555
Zdravím,

snažím se vyrobit stránky pro své podnikání: furnish-idea.com/

Šablonu jsem si vytvořil v Artisteeru.

V první řadě, bych rád, aby slidy na úvodní stránce se roztahovali a stahovali dle šíře monitoru, prostě aby to bylo responzivní (v Artisteeru se mi to nepovedlo nastavit).

A to druhé a hlavní, je v přiložených souborech, jak mi to poslal kolega, jak by to chtěl. Bohužel nevím, jak pracovat s "hoverem" v joomle s tím, aby to zůstalo na jednom článku.

Děkuji za pomoc.
Přílohy:

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od H13
12. pro 2016 11:16 #129556
Je to tzv. switch nebo swap efekt.

Seznam bude mít například attribute: data-image="cesta k obrázku"

jakmile se najede na položku v seznamu, javascript odchytí tuto událost a změní src u hlavního obrázku.

Nejjednodušeji to jde asi přes jQuery události:

Tedy jedna událost v Jquery, která hlídá hover nad položkama seznamu, když se událost stane, veme si src (cesta k obrázku) z položky seznamu a vloží ji místo src (cesty k obrázku) hlavního obrázku

$( "li" ).hover(
function() {
získej data-image hodnotu a tuto vlož místo cesty hlavního obrázku
}

Phoca Gallery - http://www.phoca.cz/phocagallery - obrázková galerie (Joomla!)
Phoca Guestbook - http://www.phoca.cz/phocaguestbook - kniha návštěv (Joomla!)
Phoca Download - http://www.phoca.cz/phocadownload - stahování souborů (Joomla!)
Phoca Cart - http://www.phoca.cz/phocacart - e-shop,...

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Seth
22. pro 2016 09:20 - 22. pro 2016 09:21 #129641
Děkuji, něco takového jsem potřeboval, nicméně nejsem moc kamarád s kódováním, tak se chci optat, jestli pro ten kód pro jQuery musím vytvořit nový soubor ve FTP a tam to psát a pak kód <li id="data-image budu psát přímo do articlu v joomle? Nebo ten kód jQuery dám také do articlu jako <script> ?

Děkuji.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od zpetr
22. pro 2016 18:01 #129646
no a nebylo by lepčí použít šablonu, kde je to už vyřešené včetně resp. funkcí než to bastlit v tom arti?
Jak vlastně má fungovat hover na mobilech ? Přiznávám, že pokud by mi web sosal obrázky podle toho jak jedu prstem tak to asi zahodím. ;o)

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Seth
23. pro 2016 09:39 #129647
No dobrá, ale kde seženu takovou šablonu? :D musí to být přesně jako na tom obrázku. Obrázky budou schované v css

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od zpetr
27. pro 2016 13:09 - 27. pro 2016 13:11 #129655
Šablon je spousta ale je na vás, jestli budete trvat na tomto schématu a v tom případě asi budujete od základů.
Nebo použitím hotového uděláte pár kompromisů. Případně přiohnete části k obrazu svému.
Vždycky je asi potřeba zvážit, která cesta vezme víc času a sil a jak bude vypadat výsledek.
jen pro inspiraci
demo.joomshaper.com/extensions/sp-simple-portfolio
je to sice jinak zobrazováno, ale bude to jezdit i v mobilní verzi. Pokud s ní tedy vůbec počítáte.

Obrázky schovane CSS tomu sice moc nerozumím, ale nedělejte si s tím hlavu. :blink:

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Seth
09. led 2017 12:26 - 09. led 2017 12:27 #129817
Tak nakonec jsem přišel i na to, jak vložit jquery do articlu, použiji tento:

<p> </p>
<div class="k1"></div>
<p><img class="test" style="display: none; position: absolute;" src="images/realizace/kuchyne/k1.jpg" height="150" /></p>
<script>// <![CDATA[
jQuery(function ($) {
'use strict';
$(".k1").mouseover(function(){
$(".test").fadeIn();
});
$(".k1").mouseleave(function(){
$(".test").fadeOut();
});
});
// ]]></script>

Nicméně potřebuji zachytit atribut "k1" a to nevím, kde zachytnu a upravým daný class viz. příloha.

Odkaz na web: furnish-idea.com/index.php/ct-menu-item-3
Přílohy:

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Seth
09. led 2017 15:27 - 09. led 2017 15:29 #129829
Tak už jsem na to přišel, je to podle id, přesněji: class="item-451" .id 451 je z databáze.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.