基于分页查看的动态轮播横幅

Question

I trying to produce a dynamic carousel banner to update the image, headers, text, links & alts based on the content page being viewed.

The site is being coded in .php & using the bootstrap CSS framework. I've broken the site into three main parts... Header, "Content" and Footer.

I'm calling the function img-banner as part of the header.php but wish to use variables stored in the "content" pages which will determine the images etc being viewed.

Calling the function:

<div class="img-banner">
  <?php include ("functions/img-banner.php"); ?>    
<!-- closing img-banner -->
</div>

The function:

<?php
function img_banner()
{   
?>
<div class="carousel-inner">
  <div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
    <div class="container">
      <div class="carousel-caption">
        <h1><?php echo $head1;?></h1>
        <p><?php echo $text1;?></p>
        <p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
     </div>
  </div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
  <div class="container">
    <div class="carousel-caption">
      <h1><?php echo $head2;?></h1>
      <p><?php echo $text2;?></p>
      <p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
    </div>
  </div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
  <div class="container">
    <div class="carousel-caption">
      <h1><?php echo $head3;?></h1>
      <p><?php echo $text3;?></p>
      <p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
    </div>
   </div>
  </div>
 </div>
<?php
}
?>

I'm a little stumped and have tried (obviously unsuccessfully lol) global and SESSION variables but cant get them to work correctly.

I'd appreciate confirmation on the best method to implement the above so I can read up and figure this out. My main goal is to have a cms style admin panel to update the images.

Thanks!

Answer 1

First of all, the function does not have access to the $img1-$img3 variables as you're not passing them to the function.

Secondly, you really do not require a function to do this simple task.

Last but not least, you are not even calling the function, only including it's file.

Here's how you should do this:

<div class="img-banner">
  <?php include ("img-banner.php"); ?>    
<!-- closing img-banner -->
</div>

And the img-banner.php:

<div class="carousel-inner">
  <div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
    <div class="container">
      <div class="carousel-caption">
        <h1><?php echo $head1;?></h1>
        <p><?php echo $text1;?></p>
        <p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
     </div>
  </div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
  <div class="container">
    <div class="carousel-caption">
      <h1><?php echo $head2;?></h1>
      <p><?php echo $text2;?></p>
      <p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
    </div>
  </div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
  <div class="container">
    <div class="carousel-caption">
      <h1><?php echo $head3;?></h1>
      <p><?php echo $text3;?></p>
      <p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
    </div>
   </div>
  </div>
 </div>