맞춤형 CMS에서 현재 애니메이션 배너를 nivo 슬라이더로 변환

Question

현재 보유하고 싶은 사용자 정의 된 CMS가있는 웹 사이트를 인수했습니다. 우리가 만들고 싶은 한 가지 변화는 꽤 가난해서 홈페이지 애니메이션 배너에 있습니다.

현재 CMS를 통해 입력 된 이미지를 잡고 애니메이션 배너로 출력하도록 설정되었습니다. 그 기능을 유지하고 대신 이미지를 nivo 슬라이더에 넣고 싶습니다. 나는 그것을하는 방법에 대해 조금 신중하다.

이

(나는!) 생각 애니메이션 배너에 이미지를 출력 년대 코드 :

<? 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><? } ?> 

그리고 ... 나는 이미지를 얻을 수있는 방법

<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 --> 

, 배너 텍스트 및 배너 링크를이 형식의 nivo 슬라이더에 넣습니다.

<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> 

CMS를 통해 입력되는 슬라이드의 양은 다음과 같아야합니다. 한정된.

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>"; 
    } 
} 
?>