Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak zrobić przeładowanie
Forum PHP.pl > Forum > Po stronie przeglądarki
tangor
8.09.2013, 17:28:45
Chozdzi mi o coś takiego, że kiedy kliknę w jakiś link to footer jedzie do gory i zjezdza na dol i pokazuje nawa tresc cos takiego jak na tej stronie: http://www.ep-archprojekt.pl/(tutaj takie przeladowanie jest w galeri)

Pomoze ktos?
WiruSSS
13.09.2013, 20:23:48
Coś w ten deseń, oczywiście musisz sobie do swoich potrzeb dostosować

[HTML] pobierz, plaintext 
  1. <nav id="galleries">
  2.     <ul>
  3.         <li><a href="gallery/get/cars.html">Cars</a></li>
  4.         <li><a href="gallery/get/airplanes.html">Airplanes</a></li>
  5.         <li><a href="gallery/get/ships.html">Ships</a></li>
  6.     </ul>
  7. </nav>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. (function(){
  2. 	"use strict";
  3. 	$('#galleryList a').click(function(){
  4.  
  5. 		var gallery = $("#gallery"),
  6. 			height = gallery.height(),
  7. 			request = null;
  8.  
  9. 		gallery.animate({height: 0}, 800, function() {
  10.  
  11. 			request = $.ajax({
  12. 				url: "gallery/get/",
  13. 				type: "GET",
  14. 				data: {id : this.rel},
  15. 				dataType: "html"
  16. 			});
  17.  
  18. 			request.done(function(result) {
  19. 				$("#gallery")
  20. 					.html(result)
  21. 					.animate({height: height+'px'}, 800);
  22. 			});
  23.  
  24. 		});
  25.  
  26. 		return false;
  27.  
  28. 	});
  29. }());
[JAVASCRIPT] pobierz, plaintext
tangor
13.09.2013, 22:38:10
A żeby uruchomić ten skrypt to ja mam jakas biblioteke zaimplementowac?, A i żeby to dzialalo to trzeba tez jakis css? Bo probowalem tego kodu i nie dziala
com
13.09.2013, 23:00:33
bibliotekę JQuery smile.gif a css wdg własnego uznania , kilka przykładów http://www.freshdesignweb.com/one-page-web...-templates.html wink.gif
tangor
14.09.2013, 19:34:03
Niestety nie potrafie uruchomic tego skryptu, zaimplementowalem biblioteke jquery, stworzylem pliki html: cars.html, airplanes.html, ships.html. Ale nie dziala ten skrypt nie wiem czemu, niestety dopiero ucze sie js i nie potrafie rozwiazac tego problemu.
com
14.09.2013, 20:13:41
to pokaż swój kod, bo wróżka nie jestem...
tangor
14.09.2013, 20:53:19
Ja wklepalem ten kod co WiruSSS podeslal, tylko w tym
Kod
<nav id="galleries">
    <ul>
        <li><a href="gallery/get/cars.html">Cars</a></li>
        <li><a href="gallery/get/airplanes.html">Airplanes</a></li>
        <li><a href="gallery/get/ships.html">Ships</a></li>
    </ul>
</nav>

dalem nazwy swoich przykladowych plikow. No, ale po kliknieciu w link przechodzi sie do pliku, a skrypt js nie jest uruchamiany
com
14.09.2013, 21:07:26
no tak ja wiem, ale jak zmieniasz ścieżki do pliku, tu to musisz też w js, dlatego powiedziałem żebyś dał cały swój kod, bo jak mogę Ci pomóc jak mam kod od użytkownika WiruSSS a nie twój...

a poza tym, może gdzieś jeszcze masz jakiś błąd wink.gif nie bardzo wiem czemu nie chcesz skorzystać z tego co Ci podrzuciłem i na podstawie któregoś z tamtych dostosować pod siebie, tym bardziej że nie orientujesz się zbytnio w temacie js jak mówisz wink.gif
tangor
15.09.2013, 17:14:53 
[PHP] pobierz, plaintext 
  1. <?php
  2. echo'
  3. <head>
  4. 	<script type="text/javascript" src="js/jquery-1.6.js" ></script>
  5. 	</head>
  6.  
  7.  
  8. <script type="text/javascript">
  9. (function(){
  10. 	"use strict";
  11. 	$(\'#galleryList a\').click(function(){
  12.  
  13. 		var gallery = $("#gallery"),
  14. 			height = gallery.height(),
  15. 			request = null;
  16.  
  17. 		gallery.animate({height: 0}, 800, function() {
  18.  
  19. 			request = $.ajax({
  20. 				url: "gallery/get/",
  21. 				type: "GET",
  22. 				data: {id : this.rel},
  23. 				dataType: "html"
  24. 			});
  25.  
  26. 			request.done(function(result) {
  27. 				$("#gallery")
  28. 					.html(result)
  29. 					.animate({height: height+\'px\'}, 800);
  30. 			});
  31.  
  32. 		});
  33.  
  34. 		return false;
  35.  
  36. 	});
  37. }());
  38.  
  39.  
  40. </script>
  41. <nav id="galleries">
  42.     <ul>
  43.         <li><a href="gallery/get/1.html">Cars</a></li>
  44.         <li><a href="gallery/get/2.html">Airplanes</a></li>
  45.         <li><a href="gallery/get/3.html">Ships</a></li>
  46.     </ul>
  47. </nav>
  48.  
  49. <div id="footer" style="background:#000000; height:300px; width:100%;"></div>
  50.  
  51. ';
  52. ?>
  53.  
  54.  
  55.  
  56.  
[PHP] pobierz, plaintext
WiruSSS
16.09.2013, 00:57:41
hmm ..ja nie napisałem ci gotowca ...chociaż niewiele temu brakuje, skoro nie potrafisz tego dostosować dla siebie, to chyba za wysoko sobie poprzeczkę postawiłeś. W linkach brakuje atrybutu rel, nie wiem czemu go zgubiłem. Skrypt napisałem w taki sposób, że w momencie gdy js nie jest włączone linki kierują po prostu na dana galerię, jednak jeśli js jest aktywny w atrybucie rel podajesz sobie przykładowo id galerii. Teraz za pomocą ajax wczytujesz plik php odpowiadający wczytaniu galerii z bazy danych, pliku czy co tam sobie wymyślisz ..to już Twój wybór. Najistotniejszy w tym skrypcie jest plik podany w request ajax jako url. pod tym linkiem powinieneś mieć skrypt, który wygeneruje galerię na podstawie np jej id. Bez problemu możesz także wywoływać bezpośrednio plik html z galerią, może to być nawet ten sam co masz w linku pod href. Jest sporo dróg aby to osiągnąć. Ja podałem przykładową.

[EDIT]

zresztą niech stracę ..stwórz sobie pliki html z galeriami i podstaw te pliki pod linki. Boxowi gallery nadaj w stylach overflow:hidden

[HTML] pobierz, plaintext 
  1. <nav id="galleries">
  2. 	<ul>
  3. 		<li><a href="link_do_galerii_1.html">galeria 1</a></li>
  4. 		<li><a href="link_do_galerii_2.html">galeria 2</a></li>
  5. 		<li><a href="link_do_galerii_3.html">galeria 3</a></li>
  6. 	</ul>
  7. </nav>
  8. <div id="gallery"></div>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. (function () {
  2. 	$('#galleries a').click(function () {
  3.  
  4. 		var gallery = $("#gallery"),
  5. 			height = 500; //tutaj sobie ustaw swoja wartość, wysokośc galerii w px
  6.  
  7. 		gallery.animate({
  8. 			height: 0
  9. 		}, 800, function () {
  10.  
  11. 			$.ajax({
  12. 				url: this.href,
  13. 				type: 'GET', //lub POST lub całkiem wywal
  14. 				success: function (result) {
  15. 					$("#gallery")
  16. 						.html(result)
  17. 						.animate({
  18. 							height: height + 'px'
  19. 						}, 800);
  20. 				}
  21. 			});
  22.  
  23. 		});
  24.  
  25. 		return false;
  26.  
  27. 	});
  28. }());
[JAVASCRIPT] pobierz, plaintext
marcin16
26.09.2013, 21:07:58
A nie ma żadnych programów z którymi byłoby to prostsze? jakoś skomplikowane się to wydaje:(
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.