Slideshow count problem

7 posts by 2 authors in: Forums > CMS Builder
Last Post: May 11, 2016   (RSS)

By CommonSenseDesign - May 7, 2016

Hi, All.

I have a slideshow that's supposed to work like this (which is hard coded, not via CMSB): http://creativebeginningschildcare.ca/home0.php.

I tried to replicate this with CMSB, but something's gone wrong and both the slides I've added with CMSB are showing up at the same time: http://creativebeginningschildcare.ca/home.php.

Here's the hard coded version:

<section id="slide">

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">


<div class="active item">
<div class="fillbg1">
<div id="featuress" class="parallax">
<div id="features" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/1.jpg');background-attachment: fixed;background-size: cover;"></div>
<div class="overlay"></div>
<div class="container clearfix">
<div class="parallax-content">
<div class="row-fluid margin">
<div class="span12">
<h1>3 locations to serve you best</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="item">
<div class="fillbg2">
<div id="featuress" class="parallax">
<div id="features-2" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/3a.jpg');background-attachment: fixed;background-size: cover;"></div>
<div class="overlay"></div>
<div class="container clearfix">
<div class="parallax-content">
<div class="row-fluid margin">
<div class="span12">
<h1>Compassion. Safety. Respect.</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>


</section>

And this is the CMSB version:

<section id="slide">

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">


<?php foreach ($homepage_slideshowRecords as $record): ?>
<div class="fillbg<?php echo htmlencode($record['num']) ?>">
<div id="featuress" class="parallax">


<?php foreach ($record['image'] as $index => $upload): ?>
<div id="features<?php echo htmlencode($record['num']) ?>" class="parallax-bg" style="background-position: 50% -33px; background:url('<?php echo htmlencode($upload['urlPath']) ?>');background-attachment: fixed;background-size: cover;"></div>
<?php endforeach ?>


<div class="overlay"></div>
<div class="container clearfix">
<div class="parallax-content">
<div class="row-fluid margin">
<div class="span12">
<h1><?php echo htmlencode($record['title']) ?></h1>
<h4><?php echo $record['content']; ?></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php if (!$homepage_slideshowRecords): ?><?php endif ?>


</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>


</section>

Any suggestions how to correct this, please?

By gregThomas - May 9, 2016

Hi commonSenseDesign,

I've neatened the example code to make it clearer what the layout should be:

<section id="slide">

  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">

      <div class="active item">
        <div class="fillbg1">
          <div id="featuress" class="parallax">
          <div id="features" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/1.jpg');background-attachment: fixed;background-size: cover;"></div>
          <div class="overlay"></div>
          <div class="container clearfix">
            <div class="parallax-content">
              <div class="row-fluid margin">
                <div class="span12">
                  <h1>3 locations to serve you best</h1>
                  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="fillbg2">
          <div id="featuress" class="parallax">
          <div id="features-2" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/3a.jpg');background-attachment: fixed;background-size: cover;"></div>
          <div class="overlay"></div>
          <div class="container clearfix">
            <div class="parallax-content">
              <div class="row-fluid margin">
                <div class="span12">
                  <h1>Compassion. Safety. Respect.</h1>
                  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>

    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  </div>
</section>

It looks like each slide should be it's own item div, the code in the previous post was creating one item with all the slides in. I think you need to update your code to something like this:

<section id="slide">
  <div id="myCarousel" class="slide">
    <div class="carousel-inner">
      <?php foreach ($homepage_slideshowRecords as $record): ?>
        <?php foreach ($record['image'] as $index => $upload): ?>
          <div class="active item">
            <div class="fillbg<?php echo htmlencode($record['num']) ?>">
              <div id="featuress" class="parallax">
                <div id="features<?php echo htmlencode($record['num']) ?>" class="parallax-bg" style="background-position: 50% -33px; background:url('<?php echo htmlencode($upload['urlPath']) ?>');background-attachment: fixed;background-size: cover;">
                </div>
                <div class="overlay"></div>
                <div class="container clearfix">
                  <div class="parallax-content">
                    <div class="row-fluid margin">
                      <div class="span12">
                        <h1><?php echo htmlencode($record['title']) ?></h1>
                        <h4><?php echo $record['content']; ?></h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <?php endforeach ?>
      <?php endforeach ?>
      <?php if (!$homepage_slideshowRecords): ?><?php endif ?>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  </div>
</section>

So for each record and image we create a separate div with the class item. This is example code, so you might have to make a few changes to get it working.

Let me know if you have any questions. 

Cheers,

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By CommonSenseDesign - May 11, 2016

Thanks for this, Greg.

This still seems to be displaying all of the input slides at once, rather than as a slideshow: http://creativebeginningschildcare.ca/home1.php.

I realized that with the hand-coded version, the first slide uses the div class "active item", whereas the subsequent ones use "item". On the CMSB version, all slides are classified as "active item".

Do you think might be the issue? If so, is there a way you of fixing this, please?

By gregThomas - May 11, 2016

Hi, 

This link isn't working for me:

http://creativebeginningschildcare.ca/home1.php

I realized that with the hand-coded version, the first slide uses the div class "active item", whereas the subsequent ones use "item". On the CMSB version, all slides are classified as "active item".

You'll need to add an if statement that checks if we're looking at the first slide and its image adds the active class if we are. You can do this by checking if the key is equal to zero for both the slide and image index.

Cheers!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By CommonSenseDesign - May 11, 2016 - edited: May 11, 2016

Sorry about the link; there seemed to be an errant period at the end.

http://www.creativebeginningschildcare.ca/home1.php

>>You'll need to add an if statement that checks if we're looking at the first slide and its image adds the active class if we are. You can do this by checking if the key is equal to zero for both the slide and image index.<<

Please can you point me in the direction of how-to instructions?

By CommonSenseDesign - May 11, 2016

Perfect! Thanks so much for your patience and advice.

http://www.creativebeginningschildcare.ca/home1.php