Samym HTMLem i CSS może być trudno. Użyj do tego jakiegoś skryptu slidera (np. jQuery Cycle – http://jquery.malsup.com/cycle/).
Gdzie te zdjęcia wrzucisz, to już zależy od Ciebie. Tylko je potem dobrze osadź w HTMLu. Proponowałbym umieścić je gdzieś w katalogu Twojej skórki (jeśli mają być niezmienne) lub wrzuć je przez panel WP do biblioteki mediów…
Dzięki Krzysiek, bardzo mi pomogłes, zrobiłem to po swojemu:
oto rozwiązanie mojej zachcianki:
Zainstalować plugin o nazwie JJ NextGen JQuery Cycle wersja 1.1.2
w pliku header.php do sekcji <head> </head> wkleić skrypt :
<style type=”text/css”>
#slides {
position: relative;
width: 400px;
height: 268px;
overflow: hidden; }
#slides img {
display: block;
width: 400px;
height: 268px; }
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<script type=”text/javascript” src=”http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js”></script>
<script type=”text/javascript”>
$(function()
{
$(„#slides”).cycle();
});
</script>
nastepnie w porządanym miejscu, w moim przypadku header wkleić
w sekcji SPLASH
wkleić
<div id=”slides”>
<img src=”foto1.jpg” alt=”Img 1″ />
<img src=”foto2.jpg” alt=”Img 2″ />
<img src=”foto3.jpg” alt=”Img 3″ />
<img src=”foto4.jpg” alt=”Img 4″ />
</div>
foty wrzucic do głownego katalogu wordpressa tam gdzie wszystkie pliki wp-…
u mnie gotowe z porządanym efektem
Mam jeszcze jedno pytanie,
czy ktoś wie w jakis sposób i w ktorym miejscu nadać atrybuty dla efektu przejscia??
Chciałbym aby efekt przejscia trfał około 3 sekund a teraz wydaje mi sie ze jest około 2 sek.
Ktos pomoże ?
Pozdrawiam
Te „atrybuty” ustawiasz już w skrypcie slidera.
http://jquery.malsup.com/cycle/options.html
Czyli np.
$('#slides').cycle({
timeout: 3000
});
Witam,
Krzysiek wcześniej próbowałem rozwiązania z tej strony, ale nic to nie dało a dodatkowo powiem ze zatrzymało działanie skryptu tzn. zatrzymuje sie na pierwszej grafice a mam ich 4.
Ma ktoś jakies rozwiązanie ??
pozdrawiam
Jeśli Ci zatrzymywało slider, to pewnie się JS wysypywał, bo go np. źle wstawiałeś.
Wstaw dokładnie ten kod, który Ci wkleiłem powyżej. Jak nie będzie działać, to nie zmieniaj, tylko podeślij linka do strony, to sprawdzę, czy tam JS nie sypie żadnymi błędami.
hej,
@wuemstrony – mam dokładną zachciankę jak Ty i od razu mówię że jestem poczatkująca, własnie zainstalowałam te wtyczki i chciałam wyedytować plik header.php (chciałam wkleić ten skrypt który podajesz do zmiany obrazków) – czy mógłbyś mi powiedzieć gdzie ten plik znajdę ? mogę to zrobić z pozycji kokpitu wordpressa ?
Możesz to zrobić z poziomu panelu administracyjnego WordPressa (jest tam odpowiedni edytor).
Tyle, że musisz jeszcze na serwer wrzucić plik skryptu (i to niby na siłę dałoby się zrobić przez panel administratora, ale byłoby to mocno kombinowane).
W razie czego możesz napisać do mnie na priv (FB lub wpmagus.pl) – jak mi dasz dostęp do tego WP na chwilę, to Ci to podepnę, bo to dużo pracy nie powinno być.
Witam
Mogę poprosić o dokładne wskazanie pliku i miejsca, gdzie mam umieścić tą część:
<div id=”slides”>
<img src=”foto1.jpg” alt=”Img 1″ />
<img src=”foto2.jpg” alt=”Img 2″ />
<img src=”foto3.jpg” alt=”Img 3″ />
<img src=”foto4.jpg” alt=”Img 4″ />
</div>
W tej chwili testuję to na motywie Mantra
Dla tych, którzy nie chcę grzebać w kodzie…
Jeżeli używasz motywu Twenty Eleven jest taka czadowa wtyczka, która zamienia jego standardowy nagłówek ze zdjęciami na slider z ciekawymi efektami:
http://wordpress.org/extend/plugins/header-image-slider/screenshots/
W innym przypadku kod umieść sobie w pliku header.php w miejsce „starego nagłówka”. Wiem, że to dość mało precyzyjne określenie… bo tak na prawdę zależy to od wersji twojego motywu.
Natomiast w Twoim przypadku @loituma motyw Mantra już ma coś takiego.
Ma taki slider i to całkie dobrze zrobiony – więc dodawanie tu swojego mija się z cele 😉
Jeżeli oczywiście mówimy o tym samym motywie Mantra:
1. wejdź do zakładki Presentation Page
2. i ustaw Enable Presentation Page na:
Enable
Dalej powinnaś sobie poradzić 😉
Pozostaje tylko kwestia zmiany jego miejsca – bo podejrzewam, że o to Ci chodzi. 🙂
Dzięki Paweł.
Ponieważ jestem zielony w te klocki to nie chciałem ruszać wbudowanego slidera w Mantrę. Mam zamiar jeszcze kiedyś go wykorzystać, tam gdzie jest, a nie byłem pewien jego zachowania po skopiowaniu w inne miejsce (chodzi o zmianę ustawień osobno dla standardowego slidera i skopiowanego w nowe miejsce, czyli do nagłówka.
Poradziłem sobie ze sliderem wg porady @wuemstrony
Witam,
przeniosłem właśnie stronkę na serwer i niestety po przenosinach slider „znieruchomiał” a dodatkowo wyświetla się tylko na stronie głównej. Na podstronach już nic nie widać.
Ponieważ, tak jak pisałem wcześniej, raczkuje dopiero w tej zabawie (wszystkie wiadomości, które posiadam wygrzebałem sam w necie) bardzo proszę o w miarę zrozumiałą poradę. 🙂
Plik header.php wygląda następująco:
<?php
/**
* The Header
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package Cryout Creations
* @subpackage mantra
* @since mantra 0.5
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<?php cryout_seo_hook(); ?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
cryout_header_hook();
wp_head(); ?>
<style type="text/css">
#slides {
position: relative;
width: 1040px;
height: 210px;
overflow: hidden; }
#slides img {
display: block;
width: 1040px;
height: 210px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#slides").cycle();
});
</script>
</head>
<body <?php body_class(); ?>>
<?php cryout_body_hook(); ?>
<div id="wrapper" class="hfeed">
<?php cryout_wrapper_hook(); ?>
<header id="header">
<div id="slides">
<img src="foto1.jpg" alt="Img 1" />
<img src="foto2.jpg" alt="Img 2" />
<img src="foto3.jpg" alt="Img 3" />
</div>
<div id="masthead">
<div id="branding" role="banner" >
<?php cryout_branding_hook();?>
<div style="clear:both;"></div>
</div><!-- #branding -->
<nav id="access" role="navigation">
<?php cryout_access_hook();?>
</nav><!-- #access -->
</div><!-- #masthead -->
<div style="clear:both;"> </div>
</header><!-- #header -->
<div id="main">
<div id="forbottom" >
<?php cryout_forbottom_hook(); ?>
<div style="clear:both;"> </div>
<?php cryout_breadcrumbs_hook();?>
A strona to: bartnickipodlogi.pl
Jeśli potrzeba jeszcze coś podesłać to proszę napisać co.
Pozdrawiam
i dziękuję z góry.
Przede wszystkim, to obstawiam, że slider Ci znieruchomiał (lub przestał działać), bo biblioteka http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js przestała być dostępna pod tym adresem 😉
