Pomocy slider

Dział poświęcony JavaScriptowi - tworzeniu dynamicznym stron WWW.
Post Reply
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Pomocy slider

Post przez jawa »

chce zrobic slideshow jakna stronie http://www.berberys.pl/ a nie moge nigdzie nic znalezc moze wy mi pomozecie??
Góra
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:
Contact tajger

Re: Pomocy slider

Post przez tajger »

Umiesz JQuery? Potrafisz w jakimś stopniu? JAk chcesz gotowy skrypt to szukaj w necie bo takich jest milion.
Zawsze walcz do końca i nigdy się nie poddawaj!
Góra
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Re: Pomocy slider

Post przez jawa »

no niby cos mam ale nie wiem gdzie jest problem. wyswietlalo mi jedo zdjecie pod drugim i kazde z efektem fadein. dodalem opoznienie niby lepiej ale podczas znikania zdjecia (w oczekiwaniu na drugie) przyciki ruszaja mi sie do gory a nie powinny przeciez bo sa pod divem z podanymi wymiarami. niech mi ktos pomoze

Code: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
	
<head>
	<meta http–equiv="content–type" content="text/html; charset=utf–8" />
	<meta http–equiv="content–language" content="pl" />
	     
	<meta name="author" content="xxxx" />
	<meta name="robots" content="index, follow" />
	<meta name="copyright" content="xxxxx" />
	<title>slider</title> 
	
 
	<link rel="stylesheet" href="style.css" type="text/css"/>

</head>
<body>
	<div class="wrapper">
		<div id="slider">
			<img id="1" src="img/1.jpg" />
			<img id="2" src="img/2.jpg" />
		</div>
		<a href="#" class="left">Previous</a>
		<a href="#" class="right">Next</a>
	</div>
	<script src="jquery.js"></script> <!--plik ze strony http://code.jquery.com/jquery-1.9.1.min.js z kodem -->
	<script src="slider.js"></script>
</body>
</html>
w stylach mam

Code: Zaznacz cały

*
{
	margin:0;
	padding:0;
}
body
{
	
}
#sliders
{
	width:650px;
	height:433px;
	margin:0px auto;
	overflow: hidden; 
	
}
#slider > img
{
	
	width:650px;
	height:433px;
	float: left; 
	display:none; 
}
a
{
	padding:5px 10px;
	background-color:#F0F0F0;
	text-decoration:none;
	color:#000000;
}
a.left
{
	float:left; /* aby jeden z przyciskow przesunal sie do lewej skarjnej */
}
a.right
{
	float:right; /* aby jeden z przyciskow przesunal sie do prawej skarjnej */
}
.wrapper /* uzylem zeby wrzucic linki i foty do jednego contenera*/
{
	width:650px; /* ustawiam szerosc aby przyciski ustawily sie pod zdjeciem*/
	margin:30px auto;
}
i plik js

Code: Zaznacz cały


sliderInt=1;
sliderNext=2;

$(document).ready(function()
{
	$("#slider>img#1").fadeIn(300); 
	startSlider();
});

function startSlider()
{
	count=$("#slider>img").size(); /*pobiera ilosc zdjec aby iedzialo ile bedzie do wyswietlenia*/
	loop=setInterval(function()
	{
		if(sliderNext>count) /* jesli przekroczy petle to wraca do 1 zdjecia*/
		{
			sliderNext=1;
			sliderInt=1;
		}
		
		$("#slider>img").fadeOut(300);
		$("#slider>img#"+sliderNext).fadeIn(300);
		sliderIn=sliderNext;
		sliderNext=sliderNext+1;
	},3000) /* bedzie wyswietlalo zdjecie co 3 sekundy*/
}
Góra
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:
Contact tajger

Re: Pomocy slider

Post przez tajger »

Z chęcią bym ci pomógl, ale kurs jquery jeszcze nie przerobiłem. :?
Zawsze walcz do końca i nigdy się nie poddawaj!
Góra
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:
Contact Morfidon

Re: Pomocy slider

Post przez Morfidon »

Identyfikator nie powinien być liczbą. Możesz zastosować A1, A2, ale nie 1,2.
Góra
jawa
Bywalec
Bywalec
Posty: 43
Dołączył(a): sobota, 17 grudnia 2011, 13:23

Re: Pomocy slider

Post przez jawa »

ooo juz widze...literowka......id diva bylo sliders a powinno byc slider ;-) dzieki za poswiecona uwage ;-)
Góra
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:
Contact Morfidon

Re: Pomocy slider

Post przez Morfidon »

Takie błędy znajdzie Ci firebug, pamiętaj aby go odpalać, gdy skrypt nie działa.
Góra
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:
Contact tajger

Re: Pomocy slider

Post przez tajger »

Żeby nie robić nowego tematu chciałbym się zapytać o lekcję 17 w Jquery o rotator zdjęć.
Otóż dodająć absoluta, to wszystko co sobie dodamy pod obrazkami naszymi, treść i inne elementy strony, będą zawarte właśnie od momentu jak zaczyna się obrazek. Tekst się nakłada z obrazkiem. Nie wiem jak ominąć ten problem, ale cały czas próbuje to robić.

Oczywiście mam jedno rozwiązanie żę ustawiamy szerokość HEIGHT statyczną dla diva w ktorym znajduja się zdjęcia, ale nie jest to za dobre moim zdaniem chyba.
Zawsze walcz do końca i nigdy się nie poddawaj!
Góra
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:
Contact Morfidon

Re: Pomocy slider

Post przez Morfidon »

możesz ustawić, aby absolute był relatywny do elementu wyżej położonego poprzez dodanie wyżej położonemu tagu relative;. W kursie xhtml i css jest to omówione.
Góra
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:
Contact tajger

Re: Pomocy slider

Post przez tajger »

Code: Zaznacz cały

<div style="position:relative">
    <img class="imgToRotate" src="img/banners/main_1.JPG">
    <img class="imgToRotate" src="img/banners/main_2.JPG">
    <img class="imgToRotate" src="img/banners/main_3.JPG">
</div>
Obcina tylko obrazek do szerokości jaką stanowi wielkość tekstu.
Zawsze walcz do końca i nigdy się nie poddawaj!
Góra
Post Reply

Powrót do