Artikel in speziellen DIV laden, AJAX und jQuery

sgt. mike

Hallo Leute,

man kennt viele Bilder-Galerien, die so aussehen.

--------------------------
|
| loader-DIV
|
--------------------------

---------------------------
| bild1 | bild2 | bild3
---------------------------

Funktionsweise: Wenn auf das Thumbnail Bild1 geklickt wird, wird es im den loader-DIV geladen und gross dargestellt. Genau so verhält es sich mit Bild 2 und Bild 3.

Diese Sachen funktionieren wunderbar mit jQuery und der .load-Funktion und dem rel-Attribut im <a>-Tag.

Bsp: <a href="abc.jpg" rel="loader-DIV"><img src="abc_thumb.jpg" ></a>

So viel zur Vorgeschichte und nun zu meiner eigentlichen Frage.

Geplant ist folgendes, es hakt aber an der finalen Umsetzung, oder an dem entscheidenden Hinweis, der mir noch nicht gekommen ist.

Oben steht ein horizontales Menu.
---------------------------
| bild1 | bild2 | bild3
---------------------------

--------------------------
|
| loader-DIV
|
--------------------------

Wenn ich nun ein Bild klicke, soll ein fest definierter Artikel (Post) in den loader-DIV aus der Datenbank geladen werden. Also, Klick auf Bild 1 soll ?p=1, Klick auf Bild 2 soll ?p=2 in den loader-DIV geladen werden.

Ich habe folgende Seiten schon besucht:
http://stackoverflow.com/questions/7526…-div-using-ajax

http://stackoverflow.com/questions/1350…query-wordpress

http://stackoverflow.com/questions/7990…link-is-clicked

http://www.bpoviawebsitedesign.com/to-load-wordpr…query-ajax.html

http://www.emanueleferonato.com/2010/04/01/loa…jax-and-jquery/ (dies habe ich nach Anleitung probiert, funktioniert auch, aber ich kann trotzdem noch nicht eins und eins zusammen zählen)

Ich weiß nicht recht wo ich anfange, oder aufhöre. Ich muss doch "nur" im href, den post angeben, so mein Gedanke, aber wie. Warum ist das nicht so einfach wie unten dargestellt.

<a href="<?php
$post_id = 3;
query_posts('p=' . $post_id); // post-ID
the_content();
?>" rel="loader-DIV"><img src="abc_thumb.jpg" ></a>

Hat irgendjemand vielleicht den entscheidenden Hinweis.

Danke
Sgt. Mike

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

abstractizm

Aloha

Hallo,
ganz einfach:

Das JavaScript:

Code

function laden(artikelUrl){
  $.ajax({
    url: artikelUrl,
    type: 'GET',
    success: function(data){
       $('#zielContainer').html(data);
    }
  });
}


$(document).ready(function(){
  $('a').on('click', function(event) {
    event.preventDefault();
    if ($(this).attr('rel') === "loader-DIV") {
        console.log($(this).attr('href'));
    }
  });
});

Alles anzeigen

Html:

Code

<div id="zielContainer">Hier wird der Inhalt reingeladen</div>


<a href="?page_id=123" rel="loader-DIV">klick mich</a>
<a href="?page_id=456" rel="loader-DIV">oder mich</a>
<a href="?page_id=789" rel="loader-DIV">oder nur mich</a>

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Artikel in speziellen DIV laden, AJAX und jQuery

Jetzt mitmachen!