9 years ago
3
Topic

Hello!

I want to share with you, how i solved to display an images slideshow in my bootstrap template.

First i created a field x in my content type for the images which the slideshow should contain.

Then i published the field also in my Content Tab.

In the override file for the mainbody.php (templates/seb_one/positions/contenttypename/content/mainbody.php) i added following code:

<div id="carousel-example-generic" data-ride="carousel">

<!-- Indicators -->
<ol>
<?php $slideindex = 0; ?>
<?php foreach($cck->get( 'fieldxname' )->value as $fx){ ?>
<?php $item_class_li = ($i == 1) ? 'active' : ''; ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $slideindex; ?>"></li>
<?php $slideindex++; ?>
<?php } ?>
</ol>

<!-- Wrapper for slides -->
<div role="listbox">
<?php foreach($cck->get( 'fieldxname' )->value as $fx){ ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
<div>
<img src="/<?php echo $fx->value; ?>" alt="<?php echo $fx->image_alt; ?>" title ="<?php echo $fx->image_title; ?>" />
<div> <?php echo $fx->image_title; ?> </div>
</div>
<?php $i++; ?>
<?php } ?>
</div>

<!-- Controls -->
<a href="#carousel-example-generic" role="button" data-slide="prev">
<span aria-hidden="true"></span> <span>Previous</span>
</a>
<a href="#carousel-example-generic" role="button" data-slide="next">
<span aria-hidden="true"></span> <span>Next</span>
</a>

</div>

Should work with all bootstrap themes. I hope that helps!

Regards,

Elisa

Get a VIP membership
572 Posts
_jrmo
9 years ago
0
Level 1

Hi Elisa,

Great stuff :) Thanks so much for sharing.

Please feel free to add this to the tutorials page. After it is reviewed it will be published. Keep it up!

www.seblod.com/resources/tutorials

Ral
9 years ago
0
Level 1

Hi... I try to do this on the Group X, but does not work for me. Anyone here knows how to do this on Seblod, but using Group X?

Now it's ok! I changed my code: http://goo.gl/2SCUQe for http://goo.gl/W6dmFJ I follow this tutorial http://goo.gl/AHSYVH Thks!

7 years ago
0
Level 1

Hi,

Do you have an idea why the images can not loaded? When I displayed the fieldX without the override the images are displayed and with the override the slideshow worked but just the images titles are displayed (without images).

Get a VIP membership