web-dev-qa-db-fra.com

Faire pivoter les widgets ou les blocs de contenu toutes les x sec/min

Est-il possible de faire pivoter des widgets ou des blocs de texte avec une bannière Flash? J'avais un widget chargeant une vidéo Flash chargée par WordTube Flash et un lecteur YouTube. Le client souhaitait faire pivoter cette vidéo avec du texte Flash (effet montrant le texte en cours de saisie). J'ai remplacé la bannière de texte Flash par le plugin jQuery Tickertype - un meilleur référencement - et j'ai essayé Datafeedr pour charger les deux alternativement. Il vous permet d'ajouter du code HTML et Flash à plusieurs annonces par groupe d'annonces. Mais je me suis rendu compte que le plug-in ne fait que pivoter les annonces lors de l'actualisation de la page. Un plugin qui tourne (annonce) bloque toutes les x secondes ou minutes?

Mise à jour 1

Je teste http://wordpress.org/extend/plugins/randomtext/ , mais cela ne semble pas tourner, même si je n'ai pas de mise en cache du plugin en cours d'exécution.

Mise à jour 2

jQuery sur jQuery howto Blog semblait prometteur, mais il récupère le contenu d'un fichier et non le contenu d'un autre élément HTML.

Mise à jour 3

Vérification http://forums.asp.net/t/1777232.aspx/1?Fade+In+Out+bien+two+divs pour jQuery animate() avec 'setTimeoutandfadeIn () andfadeOut () `Tout cela est assez nouveau pour moi et je me demande si je peux combiner ce type de ticket.

Mise à jour 4

J'ai ajouté un peu de jQuery pour faire pivoter deux divs, mais je n'arrive pas à conserver le widget texte que j'utilise pour faire pivoter ces deux divs d'une taille fixe. Voici le plugin de base:

$(document).ready(function () {
        fadeIn_();
    })

    function fadeIn_() {
        $('#flash').fadeIn(2000,
        function () {
            setTimeout("$('#flash').fadeOut(2500); fadeOut_();", 6000);
        })
    }

    function fadeOut_() {
        $('#ticker-area').fadeIn(2000,
        function () {
            setTimeout("$('#ticker-area').fadeOut(2500); fadeIn_();", 6000);
        })
    }

Et voici le code HTML et CSS à l'intérieur du widget texte:

<div id="flash-rotate"><div id="flash"><object width="560" height="315" type="application/x-shockwave-flash" id="WT1" name="WT1" data="http://elc.imagewize.com/wp-content/uploads/player.swf"><param name="wmode" value="opaque"><param name="allowscriptaccess" value="always"><param name="allownetworking" value="all"><param name="flashvars" value="file=path/to/file.flv&volume=80&bufferlength=5&quality=false&logo.hide=false&image=http%3A%2F%2Fdomain.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fsteve-martin-thumb.png&title=Steve%20Martin%20learning%20English&linktarget=_self"></object>
</div>
<div id="ticker-area">
  <ul>
    <li>Sed venenatis <a href="http://www.google.com">diam quis</a> lorem. Curabitur.</li>
    <li>Fusce <strong>vehicula</strong> iaculis felis. Phasellus congue!</li>
    <li>Morbi vitae enim vel <em>purus sollicitudin</em>.</li>
  </ul>
</div>
</div>

CSS:

#home-top-row .widget_text {margin-top: 50px;}

#ticker-area{
    width:320px;
    height:240px;
    padding: 10px 0;
    margin: 20px 0;
    font-size: 1.5em;
    font-weight: normal;
    color: #060;
}

/*Flash and TickerType*/

#flash-rotate, #text-5{
    width:320px;
    height:240px;
}

Mise à jour 5

Bricolé avec le fond et les dimensions CSS et maintenant tout va bien!

pluginswidgets
1
rhand

Tous les détails ajoutés à la question elle-même. J'utilise un plugin jQuery pour charger une div, puis une autre. Le script ajouté à question est chargé dans le thème en ajoutant le code suivant à functions.php:

function load_home_rotator() {
        wp_enqueue_script('rotator', get_stylesheet_directory_uri() . '/js/rotator.js');
  }
add_action('template_redirect', 'load_home_rotator' );

jQuery lui-même est chargé par WP donc inutile de charger cela. J'utilise fadein et fadeout pour les effets + setTimeout pour faire pivoter ces div que j'ai ajoutés à un widget de texte WordPress. Tout court très bien maintenant.

1
rhand