Help making basic 'if' statement

197 Posts

jonahnaylor Reply #1, 11 years, 6 months ago

Hi if anyone can please help. I have made a slideshow in modx but I need an IF statement to get this to work.

Each slide item is like this:

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

But the first slide should also have the class "active" as well to start the slideshow going.

So it should be like this in the chunk for the first image, then like above for all the others:

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

Does anyone know how to add an IF statement in the chunk above that says if this is the first image in the gallery then set the class to active?

Thanks very much for any help at all with this.

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

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

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 11 years, 6 months ago

What listing snippet are you using to generate the list? It should have a first-item tpl, tplFirst or something along those lines. Or, if it has an [[+idx]] placeholder available, you could use an output modifier to check for 0 or 1, whichever the snippet uses for the first item

[[+idx:is=`0`:then=`active`:else=``]]

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

197 Posts

jonahnaylor Reply #3, 11 years, 6 months ago

Hi thanks for helping.

I'm using Gallery:

                            [[!Gallery? &album=`[[*galleryname]]` &thumbTpl=`SlideshowGalAlbum` &thumbWidth=`1110` &thumbHeight=`auto` &thumbZoomCrop=`0` ]]

My SlideshowGalAlbum tpl is:

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

and I've now installed IF in case it is possible to use this?

Thanks.

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

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 11 years, 6 months ago

No, what you need is a way to determine if the item is in fact the first item in the list. Gallery, as far as I can see, doesn't have any way to indicate that.

There is a "rank" field in the database, but I don't know if that is made into a placeholder.

Does it automatically give the first item the &activeCls value if specified in the snippet properties? i.e. &activeCls=`active`

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

discuss.answer

1 Posts

joeyaugustin Reply #5, 11 years, 6 months ago

If you are trying to append a class to the first item in the slideshow in order for a script to work, I would suggest simply adding the class dynamically through javascript before the slideshow call.

With jQuery, you could use:

$( ".item" ).first().addClass( "active" );

With plain js, IE 9+:

var firstSlide = document.querySelector(".slideshow-container").children[0];
firstSlide.className += " active";

In the plain js example, I gave a theoretical container for the slideshow a class of

.slideshow-container

as this would be a simple way to scope out the first slide. Make sure there is a space when adding the active class through plain js =

" active"

- as it treats it like appending a string inside the class attribute. Otherwise the output would be:

<div class="itemactive">
  <img>
</div>

☆ A M B ☆
427 Posts

W. Shawn Wilkerson Reply #6, 11 years, 6 months ago

You may be over thinking this.

Wayfinder, pdoMenu, and getResources all have means to deal with first item either by adding a special class or by applying a special template.

Make sure your place holders match the documentation on the method you are using to create the gallery.

Get your copy of MODX Revolution Building the Web Your Way http://www.sanitypress.com/books/modx-revolution-building-the-web-your-way.html

Check out my MODX || xPDO resources here: http://www.shawnwilkerson.com

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 11 years, 6 months ago

The Gallery snippet doesn't have anything like that. However, from looking at code and at GitHub issues, it does look like if you specify the activeCls it will automatically insert that classname into the first item.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

197 Posts

jonahnaylor Reply #8, 11 years, 6 months ago

Quote from: sottwell at Mar 10, 2015, 01:55 AM

The Gallery snippet doesn't have anything like that. However, from looking at code and at GitHub issues, it does look like if you specify the activeCls it will automatically insert that classname into the first item.

Hi thanks for everyone's help. Adding: &activeCls=`active` doesn't seem to do anything, so instead I've added:

$( '.item' ).first().addClass( 'active' );

to my jQuery call and it is now working great!! Thank you everyone and thanks to Joeyaugustin for the solution!

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

Answered Help making basic 'if' statement