Convertir la bannière animée actuelle dans un curseur nivo à partir de CMS sur mesure

Question

J'ai repris un site Web qui a actuellement un CMS personnalisé que nous voulons conserver. Le seul changement que nous voulons faire est la bannière animée de la page d'accueil, car elle est plutôt mauvaise.

Il est actuellement configuré afin qu'il saisisse les images saisies à travers les cms et les affiche dans une bannière animée. Je veux garder cette fonctionnalité mais nourrir les images dans un curseur nivo à la place. Je suis un peu prudent quant à la façon dont je vais le faire.

C'est le code qui est la sortie des images dans la bannière animée (je pense !!):

<? if ($page[id] == 1) { ?> 
<? 
    $i = 0; 
    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC"); 
    while ($banner = mysql_fetch_assoc($homebanners)) { 
     if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; } 

     $javascript .= "bannerimage[$i] = '$banner[banner_image]'; 
     bannertext[$i] = '".addslashes($banner[banner_text])."'; 
     bannerlink[$i] = '$banner[banner_link]'; 
     "; 
     $i++; 
    } 

if ($i > 1) { 
?> 
<script> 

    var curbanner = 0; 

    var bannerimage = new Array(); 
    var bannertext = new Array(); 
    var bannerlink = new Array(); 

    <? echo $javascript; ?> 

    totalbanners = bannerimage.length; 

    function changebanner() { 
     curbanner = curbanner + 1; 
     if (totalbanners == curbanner) { curbanner = 0; } 

     bannerurl = 'banner_images/'+bannerimage[curbanner]; 

      $('#bannertext').fadeOut('100', function() { 
      $("#banner").animate({"height": "0px"}, 350, "linear", 
      function() { 
       $('#banner').css({ 'background-image': 'url('+bannerurl+')' }).fadeIn('slow'); 
       $("#banner").animate({"height": "222px"}, 350, "linear", 
       function() { 
        document.getElementById('btext').innerHTML=bannertext[curbanner]; 
        document.getElementById('bannerlink').href=bannerlink[curbanner]; 
        if (bannerlink[curbanner] == "") { document.getElementById('bannerlink').innerHTML = ''; } else { document.getElementById('bannerlink').innerHTML = 'Read more...'; } 
        $('#bannertext').fadeIn('100'); 
       }); 
      }); 
      }); 
    } 

    setInterval('changebanner()',10000); 
</script><? } ?> 

Et ...

<div id="rightcol" style="height:222px;"> 
    <div id="banner" style="background-image:url('banner_images/<? echo $bannerimage; ?>')"> 
     <div id="bannertext"> 
      <h2 id="btext"><? echo $bannertext; ?></h2> 
      <a id="bannerlink" href="<? echo $bannerlink; ?>" class="readmore"><? if ($bannerlink) { ?>Read more...<? } ?></a> 
     </div><!-- END bannertext --> 
    </div><!-- END banner --> 
</div><!-- END rightcol --> 

Comment puis-je obtenir l'image, le texte de la bannière et un lien de bannière dans un curseur nivo dans ce format:

<div id="slider" class="nivoSlider"> 
    <a href="page-link-1"><img src="image-1.jpg" alt="" title="banner-text-1" /></a> 
    <a href="page-link-2"><img src="image-2.jpg" alt="" title="banner-text-2" /></a> 
    <a href="page-link-3"><img src="image-3.jpg" alt="" title="banner-text-3" /></a> 
</div> 

La quantité de diapositives entrées à travers les CMS devraient être en fini.

Answer 1

<?php 
if ($page[id] == 1) { 

    $i = 0; 
    $html = ''; 

    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC"); 
    while ($banner = mysql_fetch_assoc($homebanners)) { 
     if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; } 

     $html .= "<a href=\"$bannerlink\"><img src=\"$bannerimage\" alt=\"$bannertext\" title=\"$bannertext\" /></a>"; 
     $i++; 
    } 

    if ($i > 1) { 
     echo "<div id=\"slider\" class=\"nivoSlider\">"; 
     echo $html; 
     echo "</div>"; 
    } 
} 
?>