Podstránky a "hover"

12. pro 2016 10:41 #129555

Podstránky a "hover" od Seth

Začátečník

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:

12. pro 2016 11:16 #129556

Odpověď od H13

Admin

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 Cart - www.phoca.cz/phocacart - e-shop, e-commerce
Phoca Gallery - www.phoca.cz/phocagallery - obrázková galerie
Phoca Download - www.phoca.cz/phocadownload - stahování souborů
Phoca Guestbook - www.phoca.cz/phocaguestbook - guestbook

22. pro 2016 09:20 - 22. pro 2016 09:21 #129641

Odpověď od Seth

Začátečník

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.

22. pro 2016 18:01 #129646

Odpověď od zpetr

Zkušený uživatel

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)

23. pro 2016 09:39 #129647

Odpověď od Seth

Začátečník

No dobrá, ale kde seženu takovou šablonu?

musí to být přesně jako na tom obrázku. Obrázky budou schované v css

27. pro 2016 13:09 - 27. pro 2016 13:11 #129655

Odpověď od zpetr

Zkušený uživatel

Š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:

09. led 2017 12:26 - 09. led 2017 12:27 #129817

Odpověď od Seth

Začátečník

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: