Hover popup plugins de préférence pour Wordpress

Question

Je pensais que je commencerais un site de codage, avec la facilité d'écriture d'un blog, et qui se lit comme un texte normal sur papier (c'est-à-dire, sans le fluff autour, c'est dans le template et je m'en occuperai).

Dans le texte que je voudrais marquer des mots simples comme simplement « liens d'aperçu », les suivantes: - extraits de code (pré ou similaire) - images - un div ou un cadre avec html et php - peut-être clips audio et vidéo, sous la forme de petits lecteurs intégrés.

Le comportement devrait être que, en vol stationnaire, une boîte de type greybox montrerait le contenu sur le texte. Mieux encore, en cliquant, il serait possible d'étendre ou de contracter une section sous la ligne avec le lien, aussi large que le conteneur de texte, révélant la fenêtre contextuelle, pour ainsi dire.

Je peux le faire en PHP, mais je voudrais économiser du codetime, et aussi avoir une insertion facile des types d'éléments ci-dessus.

Alors, pouvez-vous recommander quelque chose (un plug-in) comme ceci, par exemple, Wordpress ou Movable Type? J'accepterais également des liens vers des sites Web qui présentent de bons exemples de la technique de pliage et de dépliage «div visibility: hidden».

La facilité d'insertion de ces éléments est la clé. De préférence, appuyez sur Ctrl + V et marquez son type.

Answer 1

Je vous recommande de créer un code court à utiliser en post-création (c.-à-[toggle heading="Preview Link"]Hidden Content[/toggle].) Ce contenu sera enveloppé dans un span avec une classe que vous déterminez quand il apparaît sur votre site.Puis juste inclure un petit jQuery pour ramasser classe et révéler le contenu caché sur click ou mouseover ou quoi que

Sample fonction pour shortcode functions.php

function toggle_content($atts, $content = null) { 
    extract(shortcode_atts(array(
     'heading'  => '', 
    ), $atts)); 

    $out .= '<span class="toggle"><a href="#">' .$heading. '</a></span>'; 
    $out .= '<div class="toggle_content" style="display: none;">'; 
    $out .= '<div class="toggleinside">'; 
    $out .= do_shortcode($content); 
    $out .= '</div>'; 
    $out .= '</div>'; 

    return $out; 
} 
add_shortcode('toggle', 'toggle_content'); 
?> 

jQuery pourrait ressembler à ceci (par exemple pour click):.

function sys_toggle() { 
    jQuery(".toggle_content").hide(); 

    jQuery(".toggle").toggle(function(){ 
     jQuery(this).addClass("active"); 
     }, function() { 
     jQuery(this).removeClass("active"); 
    }); 

    jQuery(".toggle").click(function(){ 
     jQuery(this).next(".toggle_content").slideToggle(); 
    }); 
} 

jQuery(function(){ 
    sys_toggle(); 
});