Slider problems - help to make first SlideshowGalAlbum have Div class="active item"

197 Posts

jonahnaylor Reply #1, 11 years, 7 months ago

Hi can anyone please help.

I have a slideshow set up using this code:

<!-- Slideshow -->
                    <div id="carousel-bamboo-bicycles" class="carousel slide">
                        <!-- Indicators -->
                        <ol class="carousel-indicators hidden-xs">
                            <li data-target="#carousel-bamboo-bicycles" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-bamboo-bicycles" data-slide-to="1"></li>
                            <li data-target="#carousel-bamboo-bicycles" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            [[!Gallery? &album=`[[*bike-gallery]]` &thumbTpl=`SlideshowGalAlbum` &thumbWidth=`1110` &thumbHeight=`531` &thumbZoomCrop=`0` ]]
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-bamboo-bicycles" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-bamboo-bicycles" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>

This outputs the right thing for the second, third, fourth slides etc:

<div class="item">
                                <img class="img-responsive img-full" src="[[+thumbnail]]" alt="[[+name]]">
                            </div>

But my problem is I need the first slider div to have the class "active item". Then the rest outputted as just div class="item" as they are now.

Does anyone know how to fix this?

Thanks for any help at all.

This question has been answered by jacobkball. See the first response.

Yorkshire UK based hosting provider: https://www.simulant.uk

discuss.answer

70 Posts

jacobkball Reply #2, 11 years, 1 month ago

I don't know if you were able to fix this on your own, but here's how I did it:

First, I made the first image in the gallery 'active', and all the other images 'not active'. (You do this by right-clicking images in the gallery, and clicking Update, then checking / unchecking the Active box).

I then added the &showInactive=`true` tag to my Gallery call.

Lastly, I updated the itemThumb template as follows:

<div class="[[+cls]][[+active:is=`1`:then=` active`]]">

so that it outputs ' active' if that particular gallery image is active.

Cheers,
Jacob

197 Posts

jonahnaylor Reply #3, 11 years, 1 month ago

That's brilliant thanks!

Yorkshire UK based hosting provider: https://www.simulant.uk

12 Posts

wzavhpem Reply #4, 9 years, 7 months ago

Hello jonahnaylor,
you can use [[+idx]] in Gallery.thumbTpl template

Here is how my bootstrap carousel chunk looks like,
it triggers [[If? &subject=`[[*gallery_tv]]` &operator=`isnotempty` &then=`[[$carousel_chunk]]`]]

<div id="carousel-[[*id]]" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
  [[Gallery? &album=`[[*gallery_tv]]` &plugin=`` &thumbTpl=`tpl_gallery_carousel_indicator` &loop=`0` &slimboxLoadJQuery=`0`]]
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    [[Gallery? &album=`[[*gallery_tv]]` &plugin=`` &thumbTpl=`tpl_gallery_carousel_slide` &loop=`0` &slimboxLoadJQuery=`0`]]
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-[[*id]]" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-[[*id]]" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

My &thumbTpl=`tpl_gallery_carousel_indicator` for indicators;

<li data-target="#carousel-[[*id]]" data-slide-to="[[+idx]]" [[If? &subject=`[[+idx]]` &operator=`is` &operand=`0` &then=`class="active"`]]></li>

My &thumbTpl=`tpl_gallery_carousel_slide` for slides;

<div class="item [[If? &subject=`[[+idx]]` &operator=`is` &operand=`0` &then=`active`]]">
      <img src="[[+image_absolute:phpthumbof=`&h=600&zc=0&fltr[]=wmi|assets/images/watermark.png|C`]]" alt="[[+name]] - [[++site_name]]">
[[If? &subject=`[[+description]]` &operator=`isnotempty` &then=`<div class="carousel-caption"><p>[[+description]]</p></div>`]] 
    </div>

Answered Slider problems - help to make first SlideshowGalAlbum have Div class="active item"