✔ Blätterfunktion via JS

Status
Nicht offen für weitere Antworten.
A

aargau

Erfahrenes Mitglied
Hallo zusammen,

ich habe ein kleines Problem...
Ich möchte via JS eine Gallery bzw. die Bilder der Gallery nachladen...
Das ganze natürlich via Ajax. Dies klappt soweit auch genau so wie ich das möchte. Nur habe ich nun das Problem das ich die Blätterfunktion auch mit JS machen möchte, dort auch immer die Aktuelle page gekennzeichnet wird mit <b></b>

nun bin ich soweit:
Code: 
mkurl('1') ; 
function mkurl(zahl) 
{
var akt = zahl ; 
var i = 1 ; 
while (i<='22')
{

if(i == akt)
{
document.write( '<b><A HREF="#pg'+i+'"   onclick="mkurl('+i+')">'+i+'</A> </b>') ;
} else {
document.write( '<A HREF="#pg'+i+'"   onclick="mkurl('+i+')">'+i+'</A> ') ;
}
i=i+1;
}
}
das mkurl('1') wird fals die Page komplett neugeladen wird durch die aktuelle seite erssetz (das via #pg=zahl im URL hinzugefügt wird)
nun klappt das ganze insofern, das wenn ich ein link das 1. Mal anklicke sich auh wirklich die akt zahl ändert auf die angeklickte... Beim 2. mal passiert jedoch nichts mehr.

Ich habe nahe zu keine ahnung von JS daher hoffe ich es kann mir jemand helfen.
was ich auch noch gerne wüsste, ist es möglich die Links nicht direkt in die Page zuschreiben sondern diese einem DIV zuzoodnen? (mit document.all.name.innerHTML habe ich es versucht geht aber nicht)
 
Hi,

du könntest die Linkliste in einem DIV durch eine Funktion aufbauen, die im onload-Event des Dokuments aufgerufen wird.

Das Markieren des aktiven Links würde ich über das Ändern der CSS-Eigenschaft fontWeight realisieren. So muss nicht bei jedem Betätigen eines Links die Linkliste neu aufgebaut werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var g_intOld = -1;

function mkurl(intLink){
  // DIV-Container-Objekt ermitteln und Inhalt löschen
  var objDiv = document.getElementById("linkDiv");
  objDiv.innerHTML = "";

  // Links erstellen und in DIV schreiben
  for(var i=1; i<=22; i++){
    var strLink = "<a href=\"#pg="+i+"\" onclick=\"markLink("+i+");\">"+i+"</a>"
    objDiv.innerHTML += strLink + "<br>";
  }

  g_intOld = intLink;  // Index des markierten Link speichern
  markLink(intLink);   // Link markieren
}

function markLink(intLink){
  // Alle Links im DIV ermitteln
  var arrLinks = document.getElementById("linkDiv").getElementsByTagName("a");

  // Falls bereits ein Link markiert war -> zurücksetzen
  if(g_intOld != -1)
    arrLinks[g_intOld-1].style.fontWeight = "normal";

  // Gewünschten Link markieren
  arrLinks[intLink-1].style.fontWeight = "bold";
  // Index des markierten Links speichern
  g_intOld = intLink;
}

window.onload = function(){
  mkurl(1);
}
 //-->
</script>
</head>
<body>
<div id="linkDiv"></div>
</body>
</html>
Im DIV-Container mit der Linkliste (id=linkDiv) dürfen nur Links enthalten sein, die auch zur Linkliste gehören.

Vielleicht kannst du damit etwas anfangen.


Ciao
Quaese
 
Besten dank!
Das hilft mir wirklich weiter. Nur habe ich nun das Problem das ich nicht alle 20 Seiten Links anzeigen möchte sondern nur den ersten und den letzten und von dem aktiven 2 weniger und 2 mehr
also z.B,
1 ... 5 6 [7] 8 9 ... 20

daher denke ich es geht nicht ohne die Liste jedesmal neu zu generieren.
Nur habe ich eben keine ahnung wie ich das tun mus, damit es dann auch stimmt.

Bis jetzt habe ich das ganze via PHP gemacht, also die gesammte page jedes mal neugeladen, da dies aber reichlich Serverleistung braucht und somit das laden oft recht langsam ist möchte ich nun nur noch die Bilder nachladen.
 
Hi,

soll die Linkliste jedes Mal neu aufgebaut werden, musst du die entsprechende Funktion (mkurl) entsprechend anpassen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function mkurl(intLink){
  // DIV-Container-Objekt ermitteln und Inhalt löschen
  var objDiv = document.getElementById("linkDiv");
  objDiv.innerHTML = "";

  for(var i=1; i<=22; i++){
    var strLink = "<a href=\"#pg="+i+"\" onclick=\"mkurl("+i+");\">"+i+"</a>"
    if(i==intLink){
      strLink = "<b>" + strLink + "</b>";
    }
    objDiv.innerHTML += strLink + "<br>";
  }
}

window.onload = function(){
  mkurl(1);
}
 //-->
</script>
</head>
<body>
<div id="linkDiv"></div>
</body>
</html>
Die Logik zum Ausblenden nicht gewünschter Links musst du noch implementieren.

Ciao
Quaese
 
Danke dir, das geht super.
Nun jedoch beim ausgeben der Links bekomme ich einfach ein Problem...

Ich schaffe es nicht die for schleife korrekt zu Schreiben, damit von der Aktuellen Page 2 seiten weniger, die aktuelle und 2 seiten mehr ausgegeben werden :(

mein gebastel sieht so aus:
Code: 
var i = intLink -1 ; 
var aktpg = intLink +1 ; 
var nr_links =  aktpg - "2";
var nr_rechts = aktpg + "2";

                 for(i>=nr_links;i<=nr_rechts;i++){
...
Funktioniert aber nicht. Ich hoffe auch hier kann mir jemand helfen.
JS ist leider überhaupt nicht mein gebiet.
 
Hi,

durchlaufe die for-Schleife wie bisher. Im Schleifenkörper prüfst du in einem if-Zweig, ob die Schleifenwert den Wert Eins oder das Maximum (22) besitzt oder im zulässigen Bereich (intLink-2 < = i <= intLink+2) liegt. In diesen Fällen wird ein Link angezeigt.

Im else-Zweig prüfst du, ob die Laufvariable kleiner oder grösser als der gewünschte Link ist. Tritt ein entsprechender Fall ein, setzt du die drei Punkte und kennzeichnest das in einer Variablen, um das Mehrfachsetzen zu vermeiden.
Code: 
function mkurl(intLink){
  var intMax = 22;
  var blnBtm = blnTop = false;
  // DIV-Container-Objekt ermitteln und Inhalt löschen
  var objDiv = document.getElementById("linkDiv");
  objDiv.innerHTML = "";

  for(var i=1; i<=intMax; i++){
    if((i==1) || ((i>=intLink-2)&&(i<=intLink+2)) || (i==intMax)){
      var strLink = "<a href=\"#pg="+i+"\" onclick=\"mkurl("+i+");\">"+i+"</a>"
      if(i==intLink){
        strLink = "<b>" + strLink + "</b>";
      }
      objDiv.innerHTML += strLink + "<br>";
    }else{
      if(!blnBtm && (i<intLink)){
      	objDiv.innerHTML += "...<br>";
        blnBtm = true;
      }
      if(!blnTop && (i>intLink)){
      	objDiv.innerHTML += "...<br>";
        blnTop = true;
      }
    }
  }
}
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück