Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Przewijana Galeria
Forum PHP.pl > Forum > Przedszkole
pftprzybylski
21.02.2015, 18:08:19
Witam mam problem z przewijana Galeria
Jak sama nazwa wskazuje jest to przedszkole , dlatego proszę o POMOC


Nie chce jakiś tematów to angielskich stron bo tam za dużo się nie naucze

Galeria ma być skromna , prosta.

Wejsć w 1 obrazek po czym przyciskiem / strzałka można było w nastepna strone dać - kolejne zdj

kpt_lucek
21.02.2015, 18:30:39
Witaj

Dokładnie, jest to Przedszkole, tutaj przychodzi się najczęściej z nie działającym kodem i proźbą o pomoc poprzez dokonanie zmian, zaproponowanie innego rozwiązania, tak aby otwierający temat mógł z powodzeniem rozwiązać problem z którym przychodzi.
ilidir
21.02.2015, 21:22:51
https://www.google.com/search?q=prosta+gale...-8&oe=utf-8

może to pomoże questionmark.gifquestionmark.gif? Jak sam dobrze zauważysz galeria to nie tylko HTML smile.gif
pftprzybylski
24.02.2015, 19:14:10
Mam juz galerie smile.gif

KOD HTML


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <title>Tutorial jQuery</title>
  6. <script language="JavaScript" type="text/javascript" src="jQuery.js"></script>
  7. <script language="JavaScript" type="text/javascript" src="nasze-skrypty.js"></script>
  8. <script language="JavaScript" type="text/javascript" src="cycle.js"></script>
  9. <link rel="stylesheet" type="text/css" href="styl.css"  />
  10.  
  11. </head>
  12.  
  13. <body>
  14. <center><div id="header">
  15. 		<div class="lukasz">
  16. 			<a></a>
  17. 		</div>
  18. 	</div></center>
  19. 	<div id="galeria">
  20. 		<div class="gora">
  21. 			<div class="autor">Zdjęcia autorstwa <a href="http://www.pftprzybylski.pl" target="_blank">Ireneusza Zalewskiego</a></div>
  22. 			<div class="pager">
  23.  
  24. 			</div>
  25. 		</div>
  26. 		<div class="zdjecia">
  27. 			<div class="zdjecia_pokaz">
  28. 			<img src="zdj/zdj1.jpg"/>
  29. 			<img src="zdj/zdj2.jpg"/>
  30. 			<img src="zdj/zdj3.jpg"/>
  31. 			<img src="zdj/zdj4.jpg"/>
  32. 			<img src="zdj/zdj5.jpg"/>
  33. 			<img src="zdj/zdj6.jpg"/>
  34. 			<img src="zdj/zdj7.jpg"/>
  35. 			<img src="zdj/zdj8.jpg"/>
  36. 			<img src="zdj/zdj9.jpg"/>
  37. 			</div>
  38. 			<div class="info">
  39.  
  40. 			</div>
  41. 		</div>
  42. 		<div class="next"></div>
  43. 		<div class="prev"></div>
  44. 		<div class="dol">
  45. 		</div>
  46. 	</div>
  47. </body>
  48. </html>
[HTML] pobierz, plaintext



KOD CSS


html, body {
background:url(img/bg_body.jpg) center repeat-x #f6f6f6;
}
/* HEADER */
#header {
background:url(img/header.png) bottom left no-repeat;
height:180px;
width:360px;
border:0px;
margin:0 auto;
}
#header .lukasz, .lukasz a {
padding-top:75px;
color:#d1cfd6;
text-decoration:none;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1.0em;
margin-left:190px;
}
/*DIV GALERIA*/
#galeria {
width:896px;
margin:0 auto;
position:relative;
}
#galeria .gora {
background:url(img/top_cont.jpg) bottom left no-repeat;
height:35px;
width:100%;
padding-left:9px;
padding-right:9px;
}
#galeria .gora .autor, .autor a {
font-family:Corbel, "Times New Roman", Times, serif;
font-size:0.9em;
letter-spacing:0.1em;
color:#6d7075;
padding-top:7px;
position:relative;
}
/*NUMEROWANIE ZDJEĆ */
#galeria .gora .pager {
position:absolute;
height:30px;
right:10px;
top:0px;
}
#galeria .gora .pager a {
background:url(img/pager.jpg) top left no-repeat;
height:28px;
width:45px;
margin-left:2px;
padding-top:8px;
text-align:center;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#959595;
display:block;
float:left;
text-decoration:none;
}
#galeria .gora .pager a.activeSlide {
background:url(img/pagerh.jpg) top left no-repeat;
}
/* BOX ZE ZDJĘCIAMI */
#galeria .zdjecia {
background:url(img/_cont.jpg) top left repeat-y;
width:100%;
padding-left:9px;
position:rrelative;
}
.zdjecia_pokaz img {
height:350px;
width:878px;
}
/* TYTUŁY ZDJĘĆ */
#galeria .zdjecia .info {
height:20px;
width:100%;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1.05em;
letter-spacing:0.36em;
color:#454545;
padding:15px;
text-align:center;
}
/* PRZYCISKI < I >*/
#galeria .prev {
background:url(img/prev.jpg) top left no-repeat;
height:41px;
width:47px;
position:absolute;
left:-46px;
top:175px;
}
#galeria .next {
background:url(img/next.jpg) top left no-repeat;
height:41px;
width:47px;
position:absolute;
right:-46px;
top:175px;
}
#galeria .prev:hover {
background:url(img/prevh.jpg) top left no-repeat;
}
#galeria .next:hover {
background:url(img/nexth.jpg) top left no-repeat;
}
#galeria .dol {
background:url(img/bottom_cont.png) top left no-repeat;
height:125px;
width:100%;
padding-top:35px;
text-align:center;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#767586;
}




TERAZ MOJE PYTANIA DO TEGO KODU

PO 1 NIE MOGE USTAWIĆ W CSS BORDER 0 DLA MOJEGO HEDERA , Chce aby dopasował się do tła a jest on bardziej biały ;c

PO 2 Czy jest możliwe aby zrobić żeby galeria brała rozmiar zdj i dopasowywała je do siebie ?
Bo tu jest pozycja apsolutna która sie nie zmienia , a ja chce aby raz była taka , raz taka w zależności od zdjecia

Pomoze ktoś ?

f5
jaca121212
24.02.2015, 22:36:51
na twoje wymaganie powinna być ok ta galeria http://lokeshdhakar.com/projects/lightbox2/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.