Конвертируйте текущий анимированный баннер в слайдер NIVO на заказ CMS - PullRequest
Новая
       3

Конвертируйте текущий анимированный баннер в слайдер NIVO на заказ CMS

0 голосов
/ 08 сентября 2011

Я завладел веб-сайтом, на котором в настоящее время имеется пользовательская 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, должнобыть бесконечным.

1 Ответ

1 голос
/ 08 сентября 2011 
<?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>";
    }
}
?>
...