Sziasztok!
Volna egy olyan kérdésem, hogy megoldható-e, hogy az oldal tetején 4 slider, vagy hozzá hasonló legyen úgy, mint pl itt:
http://www.honvedart.hu/fooldal/htmls/
Egy slider: egy link, kb 2-3 kép és max egy mondat?
Előre is köszönöm a segítséget!
Jó pénzért mindent meglehet oldani! .
Sziasztok!
Elég sok slider -es megoldás van a neten, nagyon programozni sem kell. (max egy picit)
Például
Twitter Bootstrap-al készítettem egy ilyen példát: http://jsfiddle.net/lorincz_andras/5GCjZ/
A RUN -ra kell kattintani, hogy elinduljon, lehet nagyobbra venni az ablakot, jobb alsó ablakban fut az eredmény. Bármilyen wp oldalra is be lehet tenni, ill. ki lehet egészíteni saját css el is, lehet könnyen formázni.
Ãllandó vagy a képpel együtt mozgó feliratokat is be lehet tenni a képek fölé, alá, bárhová. Ha pedig 3 slidert szeretnél egymás mellé, akkor értelem szerűen ki kell számolni mekkora hely van nekik (width), mekkorák a paddingok közöttük és akkor úgy kell beszabni (vagy beb*szni ha már unod) meg a képeket méretezni.
András! Nem is sejted mennyire sokat segítettél és nagyon köszönöm Neked! Nem nagyon értek a programozáshoz, de ilyenkor mindíg elámulok, hogy milyen szép dolgokat lehet belőle kihozni:)… mindjárt elsírom magam:D
köszi!
Tudtok segíteni, hogy az András által adott dolgot hogy illesszem be a templatebe? a css-t és a div-et betettem, már csak valahogy mozgásra kéne bírni…
Közben megoldottam. a küldött linken az eredmény forráskódját bemásoltam egy slider.php-ba, aztán azt behívtam a head.php-ba.
A következő problémám, hogy ezzel az egész oldal odébb ment (persze, hogy egyszerű legyen nem egységesen) kb 20px-el…
Gondolom, hogy a sliderek css-ében lesz a bibi, de mit keressek?
próbáltam a
parancsot, de nem értem el vele semmit (persze gondolom nem is kellene használni…)
Egyébként András wp tutorial oldalán tanulgatom a dolgokat.
Egyébként András wp tutorial oldalán tanulgatom a dolgokat.
Szia!
Tudsz mutatni egy példa oldalt? (Már ha online elérhető az oldalad, mert akkor meg tudnám nézni, mi lehet az elcsúszás oka.)
Te beszúrtad a teljes példát, úgy, ahogy ott van (http://jsfiddle.net/…z_andras/5GCjZ/) ? Ãgy 2 fejrészed is lett ([font=Inconsolata, Monaco, Consolas, ‘Andale Mono’, ‘Bitstream Vera Sans Mono’, ‘Courier New’, Courier, monospace][/font]), nem így kell, ez teljesen rossz irány, ilyet nem szabad!
Amit csináltál, azt mindent törölj ki.
Amire neked szükséged van:
- Js fájlok, pontosabban 3 darabara a ba:
Egyébként így sem jó, hogy valaki oda beszúrja ezeket! Ennek másik módja:
Megnyitod a functions.php-t, és oda mehet:
function enyim_jquery() {
if ( !is_admin() ) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://twitter.github.com/bootstrap/assets/js/jquery.js’, false);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘wp_head’, ‘enyim_jquery’, 1, 0);
Meg a másik kettőt:
function enyim_jquery_bootstrap() {
if ( !is_admin() ) {
wp_enqueue_script( ‘bootstrap-trans’, ‘http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js’, array( ‘jquery’ ) );
wp_enqueue_script( ‘bootstrap-car’, ‘http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js’, array( ‘jquery’ ) );
}
}
add_action(‘wp_footer’, ‘enyim_jquery_bootstrap’, 1, 0);
Akkor a js-ek meg is vannak.
Utána amivel ki kell egészítened még, készítesz egy css -fájlt. Mindegy mi a neve, legyen lofsz.css mondjuk. (SLIDER CSS-e)
Annak tartalma:
a {
text-decoration: none;
}
img {
width: auto9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: “”;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carousel {
position: relative;
margin-bottom: 20px;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel .item > img {
display: block;
line-height: 1;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
}
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
line-height: 20px;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
.kepen_fix_felirat{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.kepen_fix_felirat p{
color: white;
padding: 0 0 5px 0;
}
​
Utána ha ez megvan, akkor a head.php ba, a wp_head() elé beszúrod ezt a lofasz.css-t:
<link rel=“stylesheet” href="/lofsz.css" type=“text/css” media=“screen, projection”>
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
Egyébként így sem jó, hogy valaki oda beszúrja ezeket! Ennek másik módja:
Megnyitod a functions.php-t, és oda mehet:
function enyim_jquery() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://twitter.github.com/bootstrap/assets/js/jquery.js', false);
wp_enqueue_script('jquery');
}
}
add_action('wp_head', 'enyim_jquery', 1, 0);
Meg a másik kettőt:
function enyim_jquery_bootstrap() {
if ( !is_admin() ) {
wp_enqueue_script( 'bootstrap-trans', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-car', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js', array( 'jquery' ) );
}
}
add_action('wp_footer', 'enyim_jquery_bootstrap', 1, 0);
Akkor a js-ek meg is vannak.
Utána amivel ki kell egészítened még, készítesz egy css -fájlt. Mindegy mi a neve, legyen lofsz.css mondjuk. (SLIDER CSS-e)
Annak tartalma:
a {
text-decoration: none;
}
img {
width: auto9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carousel {
position: relative;
margin-bottom: 20px;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel .item > img {
display: block;
line-height: 1;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
}
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
line-height: 20px;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
.kepen_fix_felirat{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.kepen_fix_felirat p{
color: white;
padding: 0 0 5px 0;
}
​
Utána ha ez megvan, akkor a head.php ba, a wp_head() elé beszúrod ezt a lofasz.css-t:
<link rel="stylesheet" href="/lofsz.css" type="text/css" media="screen, projection">
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
function enyim_jquery() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://twitter.github.com/bootstrap/assets/js/jquery.js', false);
wp_enqueue_script('jquery');
}
}
add_action('wp_head', 'enyim_jquery', 1, 0);
Meg a másik kettőt:
function enyim_jquery_bootstrap() {
if ( !is_admin() ) {
wp_enqueue_script( 'bootstrap-trans', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-car', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js', array( 'jquery' ) );
}
}
add_action('wp_footer', 'enyim_jquery_bootstrap', 1, 0);
Akkor a js-ek meg is vannak.
Utána amivel ki kell egészítened még, készítesz egy css -fájlt. Mindegy mi a neve, legyen lofsz.css mondjuk. (SLIDER CSS-e)
Annak tartalma:
a {
text-decoration: none;
}
img {
width: auto9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carousel {
position: relative;
margin-bottom: 20px;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel .item > img {
display: block;
line-height: 1;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
}
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
line-height: 20px;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
.kepen_fix_felirat{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.kepen_fix_felirat p{
color: white;
padding: 0 0 5px 0;
}
​
Utána ha ez megvan, akkor a head.php ba, a wp_head() elé beszúrod ezt a lofasz.css-t:
<link rel="stylesheet" href="/lofsz.css" type="text/css" media="screen, projection">
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
function enyim_jquery_bootstrap() {
if ( !is_admin() ) {
wp_enqueue_script( 'bootstrap-trans', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-car', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js', array( 'jquery' ) );
}
}
add_action('wp_footer', 'enyim_jquery_bootstrap', 1, 0);
Akkor a js-ek meg is vannak.
Utána amivel ki kell egészítened még, készítesz egy css -fájlt. Mindegy mi a neve, legyen lofsz.css mondjuk. (SLIDER CSS-e)
Annak tartalma:
a {
text-decoration: none;
}
img {
width: auto9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carousel {
position: relative;
margin-bottom: 20px;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel .item > img {
display: block;
line-height: 1;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
}
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
line-height: 20px;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
.kepen_fix_felirat{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.kepen_fix_felirat p{
color: white;
padding: 0 0 5px 0;
}
​
Utána ha ez megvan, akkor a head.php ba, a wp_head() elé beszúrod ezt a lofasz.css-t:
<link rel="stylesheet" href="/lofsz.css" type="text/css" media="screen, projection">
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
a {
text-decoration: none;
}
img {
width: auto9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carousel {
position: relative;
margin-bottom: 20px;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel .item > img {
display: block;
line-height: 1;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
left: auto;
right: 15px;
}
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
line-height: 20px;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}
.kepen_fix_felirat{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.kepen_fix_felirat p{
color: white;
padding: 0 0 5px 0;
}
​
Utána ha ez megvan, akkor a head.php ba, a wp_head() elé beszúrod ezt a lofasz.css-t:
<link rel="stylesheet" href="/lofsz.css" type="text/css" media="screen, projection">
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
<link rel="stylesheet" href="/lofsz.css" type="text/css" media="screen, projection">
Ugye, ez a lofsz.css, ez legyen a sablonod könyvtárában! Érted. Mert a fenti útvonal ott keresi. Ebben van a slider-hez szükséges + css, mert nem kell a teljes bootstrap css-e.
Ha ez megvan, akkor minden megvan.
Ezután jönnek a sliderek, ami CSAK ez a része: (a sablon annak a részébe kell, ahová szeretnéd)
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
Meg lehet többet is, ugyan azt másoltam ki, mint ami a jsfiddle ben is van, azzal a különbséggel, hogy span-9 be tettem, mert ebbena sablonban, ilyen nevű css-van. Arról szól az egész cikk egyébként. Ott, meg lehet nézni, mik vannak.
És ami még kell:
Beteszed egy ilyet a footer.php ba (vagy bárhová)
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
$(function(){
$('.carousel').carousel();
});
$('#myCarousel.carousel').carousel({
interval: 1000
});
Ez fogja scroll ozni meg időzíteni. Annyi slider teszel be, amennyit szeretnél, csak ott, ahogy látod a jsfiddle példában is.
Az, hogy hová teszed (bannerba vagy hová), az rajtad áll, értelem szerűen úgy kell a sablont bővíteni! DE EHHEZ érteni kell a css-t meg a html-et, meg az egészet. Anélkül nem fog sikerülni, állandóan minden szét fog eseni, meg el fog csúszni.
A képeket is méretezni kell, stb. Az a lényeg, hogy a fenti példa automatikusan átméretezi a height -et, a width függvényében!
Tehát ha van egy nagy képed, ami négyzet alakú, de csak egy 300 pixel széles div be teszed, akkor hiába adsz meg neki 800px magasságot, nem lesz akkora, mert arányaiban lekicsinyítődik. Ezt css ben lévő img teszi meg. (lofasz.css ben az img miatt)
Ennél többet nem tudok segíteni.
nagyon köszönöm! És most megyek és átgondolom az életemet. Nem zargatok már többet.
Lényegében ennél többet csak akkor tudnék segíteni, ha megcsinálnám. Pont így készülne, ahogyan írtam.
Nyugodtan kérdezz, ha valami nem tiszta.