Podstránky a "hover"
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.
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.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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
}
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.
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.
Děkuji.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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.
Š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.
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.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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> </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
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
