Tooltip Inhalt erst laden bei Mouseover

playnic

Hallo,

ich habe folgendes Problem, auf meiner Startseite sind mehrere Tabellen mit auflistungen von den Artikel (Cover, Release, Kategorie usw.), wenn man mit der Maus über ein Artikel Titel fährt dann erscheind ein Tooltip (Div). Das Funktioniert soweit alles wie gewünscht, außer, dass der Inhalt des Tooltip schon komplett geladen wird, und deswegen die Html-Datei viel zu groß wird (Ladezeit wird viel Größer).

Ich würde es gerne so haben, dass erst beim Mouseover des Titel der Inhalt des Tooltip geladen wird.

PHP

<div class="single">
      <div class="main-area">
         <ul>
            <li class="main-head">
               <span class="main-pic-h">Cover</span>
               <span class="main-rls-h">Release</span>
               <span class="main-cat-h">Kategorie</span>
               <span class="main-size-h">Größe</span>
               <span class="main-upper-h">Uploader</span>
               <span class="main-date-h">Datum</span>
            </li>
            <?php $rand_posts = get_posts('category=-11,-73,-75,-74,-95,-4&numberposts=10'); foreach( $rand_posts as $post ) : setup_postdata( $post ); ?>
            <li class="main-single">
               <span class="main-pic"><a href="<?php $thumbnail_id=get_the_post_thumbnail($post->ID); preg_match ('/src="(.*)" class/',$thumbnail_id,$link); echo $link[1]; ?>" rel="lightbox"><?php the_post_thumbnail( 'main-pic', array( 'title' => get_the_title() ) );  ?></a></span>
               <span class="main-rls">
                  <b>
                     <a class="tooltip" href="<?php the_permalink() ?>">
                        <?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Titel: </b>', '</li>', $content); $result1 = substr($result, 0 , 56); echo "$result1"; ?>
                        <span>
                           <div class="tTop">
                              <div class="tTitle"><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Titel: </b>', '</li>', $content); echo "$result"; ?></div>
                              <div class="tRlsTitle"><?php the_title(); ?></div>
                           </div>
                           <div class="tCover">
                              <?php the_post_thumbnail( 'thumbnail', array( 'title' => get_the_title() ) );  ?>
                           </div>
                           <div class="tRight">
                              <div class="tDescr">
                                 <?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<div id="upload-descr">', '</div>', $content); $result1 = substr($result, 0 , 330); echo "$result1"; ?>...
                              </div>
                              <div class="tinfo">
                                 <b>Genre: </b><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Genre: </b>', '</li>', $content); echo "$result"; ?><br>
                                 <b>Laufzeit: </b><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Laufzeit: </b>', '</li>', $content); echo "$result"; ?><br>
                                 <b>Größe: </b><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Größe: </b>', '</li>', $content); echo "$result"; ?><br>
                                 <b>Sprachen: </b><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Sprachen: </b>', '</li>', $content); echo "$result"; ?><br>
                                 <b>Uploader: </b><?php the_author() ?>
                              </div>
                           </div>
                           <div class="clear"></div>
                        </span>
                     </a>
                  </b>
                  <br><?php the_title(); ?>
               </span>
               <span class="main-cat"><?php the_category('<br>') ?></span>
               <span class="main-size"><?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Größe: </b>', '</li>', $content); echo "$result"; ?><br>&nbsp;<?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Sprachen: </b>', '</li>', $content); echo "$result"; ?></span>
               <span class="main-upper"><?php echo the_author_posts_link(); ?><br><?php if(function_exists('the_views')) { the_views(); } ?></span>
               <span class="main-date"><?php the_time('d.m.Y') ?><br><?php the_time('G:i') ?> Uhr</span>
            </li>
            <?php endforeach; ?>
         </ul>
      </div>
   </div>

Alles anzeigen

Hoffe das mir da jemand weiterhelfen kann, habe schon paar Sachen versucht aber es hat nichts gebracht.

Vielen dank schonmal im vorraus

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

playnic

Hier noch eine Ergänzung zum Problem, der Tooltip soll ja immer für jeden Beitrag geladen werden, (die Php Abfrage bzw. und Artikelbild) aber da der Content vom Tooltip ja nachgeladen werden soll bei Mouseover vom Titel (wegen der Html-Größe/Ladezeit usw.), weiß ich nicht genau wie das funktionieren soll.

<?php $content = get_the_content(); $content = apply_filters('the_content', $content); $result = getInbetweenStrings('<li><b>Genre: </b>', '</li>', $content); echo "$result"; ?>

Ich hoffe ich hab mein Problem recht gut beschrieben.

playnic

Pusch ?? ???

playnic

Pusch :D

-------------------------------------

pixselig

Hallo,

Ich habe mir jetzt deinen Code nicht im Detail angesehen ich kann dir daher nur einen Hinweis geben wie das prinzipiell funktioniert (eine von mehreren Möglichkeiten):
1.) Die Auflistung der Alben erfolgt über einen Standardloop in zBsp. der category.php.
2.) Du erstellst eine eigene PHP Datei, welche du zum Beispiel "tooltip.php" nennst.
3.) in diese Datei bindest du die wp-load.php mittels require_once() ein.
4.) danach startest du einen eigenen wp_query Loop in welchem du alle benötigten Inhalte des Tooltips aufrufst.
5.) das Array dieses wp_query besetzt du bei post_id mit einer Variablen (alle anderen kannst du beliebig statisch wählen)
6.) Du erstellst eine Ajax Ladefunktion welche beim hovern eines Titels der category.php ausgelöst wird und die tooltip.php nachladet.
7.) die Ajax Ladefunktion übergibt dabei die entsprechende Post_ID mittels HTTP-GET-Anforderung an die tooltip.php.

LG, pixselig

playnic

Hallo Pixselig,

Erstmal vielen dank für deine Hilfe.

Leider kenne ich mich nicht so genau mit PHP aus, könntest du mir vielleicht ein komplettes Beispiel erstellen,
dass ich mir das ansehen kann um daraus zu Lernen wie es genau Funktioniert?

Die Funktion vorstellen, kann ich mir schon, aber wie genau es eingebunden bzw. in PHP geschrieben wird weiß ich leider nicht.

Wäre sehr nett von dir :)

Vielen dank schonmal im vorraus

LG

pixselig

Hallo playnic.

Suche im Netz mal nach "WordPress Ajax powered loop" oder so ähnlich, dann findest du einige englische tuts welche du für dich nur ein klein wenig anpassen musst.
Sollte das nicht genügen schreibe ich dir in den nächsten Tagen wenn ich Zeit habe mal ein paar Codezeilen.
LG

playnic

Hallo Pixselig,

vielen dank für deine Hilfe.

Ich habe mal geschaut, aber nichts wirklich hilfreiches gefunden.

Würde mich freuen, wenn du mir da doch weiterhelfen würdest.

Vielen dank schonmal im vorraus

LG

pixselig

Nur ganz rudimentär:

tooltip.php

PHP

<?php
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// der Pfad zu wp-load.php stimmt nur wenn sich diese Datei direkt im Verzeichnis eines Themes befindet -> gegebenenfalls muss er angepasst werden!


$tooltip_id = (isset($_GET['tooltip'])) ? $_GET['tooltip'] : 0;






        $the_tooltip_query = new WP_Query(array(
            'p'                 => $tooltip_id,
            'posts_per_page'    => 1,
            'post_status'        => 'any',
            'order'                => 'ASC'
            ));


            while ( $the_tooltip_query->have_posts() ) : $the_tooltip_query->the_post();?>
            <div class="tooltip">
            <!-- hier kommt der gesamte Inhalt hinein, der in dem Tooltip ausgegeben werden soll.
            zBsp.: if ( has_post_thumbnail() ) { the_post_thumbnail(); } -->
            </div>
            <?php endwhile;
            wp_reset_postdata();
            // der Query-Reset ist bei einer Ajax-Abfrage eigentlich nicht notwendig -> der Vollstaendigkeit fuege ich ihn aber trotzdem hier an.

Alles anzeigen

jquery Script:

PHP

$(function () {
    $('.album-titel').hover(function(){
        var $tooltip = $('.tooltip-outer');
        var load_aktionen = function(){
                $.ajax({
                    type       : "GET",
                    data       : {tooltip:<?php get_the_ID(); ?>},
                    dataType   : "html",
                    url        : "http://deine-domain.xx/wp-content/themes/theme-name/tooltip.php",
                    beforeSend : function(){
                    },
                    success    : function(data){
                        $data = $(data);
                        $data.hide();
                        $tooltip.append($data);
                        $data.fadeIn(500);
                    },
                    error     : function() {
                        alert('Leider ist ein Fehler aufgetreten - bitte wenden Sie sich an den Webseiten-Administrator!');
                    }
            });
        }


        load_aktionen();


    });


});

Alles anzeigen

-> das ganze gehört natürlich noch an deine Dateien und anforderungen angepasst.

playnic

Hallo,

Vielen dank für die Rückmeldung.

Habe es soweit hinbekommen, er läd den Tooltip bei Mouseover in der Div.
Das Problem ist, dass er immer die Daten vom gleichen Beitrag benutzt, und die Funktion nicht mehr aufhört.

Also bei Mouseover läd er von nur einem Beitrag die Daten in die Vorbestimmte Div und macht das jede Sekunde wieder.

Lg Peter

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Tooltip Inhalt erst laden bei Mouseover

Jetzt mitmachen!