Φόρτωμα σελίδων/πλοηγός με jquery

SlackulatoR · 27 Δεκεμβρίου 2018

Καλησπέρα και Χρόνια Πολλά,

Έχω μια σελίδα στην οποία το κάθε link ανοίγει .html κανονικά (τα .html μέσα σε υποφάκελο π.χ /portfolio/page1/1.html)

Σε κάθε μία από αυτές τις σελίδες έχων ένα Previous/Next menu το οποίο φορτώνει με php include. Πως μπορώ να φτιάξω το μενού αυτό σαν πλοηγώ και να φορτώνει την επόμενη ή προηγούμενη σελίδα (χωρίς iframe);

Δοκίμασα με την indexOf αλλά αν κάνω αλλαγές στην σειρά κάποιας σελίδας ή στο αρχικό html πρέπει να ξαναγραφτεί όλος ο κώδικας που είναι αυτό που προσπαθώ να αποφύγω:

if (window.location.href.indexOf("page1") > -1){
  $(".next").attr('href', "portfolio/page2/");
  }
else if (window.location.href.indexOf('page2') > -1){
  $(".previous").attr('href', "portfolio/page1/");
  $(".next").attr('href', "portfolio/page3/");
}
else if (window.location.href.indexOf('page3') > -1){
  $(".previous").attr('href', "portfolio/page2/");
  $(".next").attr('href', "portfolio/page4/");
}

Επεξ/σία 27 Δεκεμβρίου 2018 από SlackulatoR

ajaxmonkey4hire · 27 Δεκεμβρίου 2018

<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1">  
		<title>Jquery Prev-Next</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				pages = ['page_1.html','page_2.html','page_3.html','page_4.html','page_5.html'];
				
				var page= window.location.href.substr(window.location.href.lastIndexOf('/')+1);
				var pageIndex = pages.indexOf(page);
				
				if(pageIndex>0){
					$('#prev').attr('href',pages[pageIndex-1]).css({display:'inline-block'});
				}
				
				if(pageIndex<pages.length-1){
					$('#next').attr('href',pages[pageIndex+1]).css({display:'inline-block'});
				}

			});
		
		</script>
	</head>
	<body>
		<a href="" id="prev" style="display:none">Prev</a>
        &nbsp;
        <a href="" id="next" style="display:none">Next</a>
		<p>
			this is page 1
		</p>
	</body>
</html>

μπορείς να το δεις εν δράση εδώ -> http://104.236.83.163/jq-prev-next/page_1.html

εναλλακτικά θα μπορούσες να χρησιμοποιήσεις και το window.history object αν και εγώ προτιμώ την πάνω λύση διότι λειτουργεί από όποια σελίδα (2, 4 ,5 ...) και να μπεις.

Επεξ/σία 27 Δεκεμβρίου 2018 από ajaxmonkey4hire

SlackulatoR · 27 Δεκεμβρίου 2018

Ευχαριστώ για την απάντηση.

Αν οι ονοματολογίες μου είναι κάπως έτσι;

pages = ['portfolio/selida/','portfolio/allo_project/','portfolio/allo_project2/'];

(κάθε φάκελος έχει index.php μέσα γι αυτό δεν προσθέτω κάτι μετά την κάθετο)

Επεξ/σία 27 Δεκεμβρίου 2018 από SlackulatoR

ajaxmonkey4hire · 27 Δεκεμβρίου 2018

εφόσον όλα τα project είναι μέσα στο portofolio folder και κάθε ένα από αυτά έχει default index.php

χρησιμοποιείς

pages = ['project_1','project_2','project_3',....];

και στο link βάζεις

$('#next').attr('href','portofolio/'+pages[pageIndex+1])

SlackulatoR · 28 Δεκεμβρίου 2018

Δούλεψε ευχαριστώ!

Σύνδεση

Φόρτωμα σελίδων/πλοηγός με jquery

Προτεινόμενες αναρτήσεις

SlackulatoR

ajaxmonkey4hire

SlackulatoR

ajaxmonkey4hire

SlackulatoR

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση