Thread

Firstly my apologies if this has been discussed before, I fear it may be somewhere I cannot find.

I am utilising some jQuery Tools sliding panels of content on a page - fairly common strategy now.
Each panel has 4 small content snippets in and then the user can shift to the next panel and see another four and so on.

The code, stripped bare looks like this:

<section class="scrollable">
    <section class="items">
        <div>
            <article>
                <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
            <article>
                <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
        </div>
        <div>
            <article>
                <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
            <article>
                <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
        </div>
    </section>
</section>

Each panel is represented by a div containing four articles.  Pretty straighforward.

Question is now can I build this dynamically with a channel entries tag.  Taking a traditional approach:

<div>
{exp:channel:entries channel="news"}
<article>
            <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
            <article>
                <!-- Content Here -->
            </article>
            <article class="omega">
                <!-- Content Here -->
            </article>
{/exp:channel:entries}
</div>

This would simply fill the panel with all entries.  Placing the EE tags outside the div would create a panel for every entry.
How can I fill each panel with four entries, without having to set up additional loops which would of course also keep pulling in the same 4 entries without further selection.

Or is the easiest approach to find a javascript implementation which doesn’t rely on semantic encapsulation of the panel contents?

Thanks

[Mod Edit: Moved to the Community Help forum]

That’s pretty straightforward. Just output your items inside a Channel entries tag…

<div id="scrolltrigger">
{exp:channel:entries channel="news"}
<article>
Content here
</article>
{/exp:channel:entries}
</div>

The DIV with ID “scrolltrigger” is what you specify in your Javascript and the ARTICLE tags are the bits that scroll, eg your Jquery call would be something like:

$("#scrolltrigger").scroller();

Thanks for the response.  I am not sure this gets me what I want.
The important point is to output just 4 articles into each div, and then create a second div and so on…

A sliding panel is a DIV.  Each div includes 4 articles and 4 only.

Hiya,

Pretty sure this should get you what you need.

<section class="scrollable">
<section class="items">

{exp:channel:entries
    channel="news"
    dynamic="no"
    sort="asc"
    disable="member_data|pagination|categories"}

{switch="<div>|||"}<article>{title}</article>{switch="|||</div>"}

{/exp:channel:entries}

</section>
</section>

Hope that works and helps a bit.

Best wishes,

Mark

Didn’t event occur to use switch in this way.  Once again Mark, fantastic idea.  Thanks…

No problem at all. Glad that helped a bit.

Best wishes,

Mark

Hmmmm…  This might be pushing it, but it occurs to me that the final div (which may in fact be the first in some cases) won’t always have 4 articles.  Hence the closing div tag would not be included in such instances.

I am thinking there would be no easy way of getting around this without doing some math, checking if the number of returned entries was a multiple of 4 and if not testing for the final entry etc.

Any ideas?

Hi Mantishead,

If it’s only the final section that might not have 4 entries then you can use the format that Mark suggests but limit your output to 12 entries. Then you can use another channel entries tag with a limit of 4 and an [url=http://ellislab.com/expressionengine/user-guide/modules/channel/parameters.html#par_offset]offset[/ur] of 12. Of course, you’d be much better of making sure that 16 entries are available or limiting the initial tag to multiples of 4 if at all possible.

Cheers

Greg

@Mark, Rob, thanks for the help.

Thanks Greg, but I am trying to avoid having any implicit knowledge and/or limits on entries…

Logically I think this might work but I don’t know if it can even by implemented.  I added pseudo logic here to explain but basically I am suggesting testing to see if there is a remainder when dividing the total number of entries by 4.  If there is a remainder then then the closing DIV will not have been switched and hence we add it back in again.

Or am I on a road to nowhere here… 😊

<section class="scrollable">
<section class="items">

{exp:channel:entries
    channel="news"
    dynamic="no"
    sort="asc"
    disable="member_data|pagination|categories"}

{switch="<div>|||"}<article>{title}</article>{switch="|||</div>"}

{/exp:channel:entries}
[IF {exp:channel:entries channel="news"} NUM_ENTRIES % 4 !=0{
</div>
{/exp:channel:entries}
}
</section>
</section>

Hi Mantishead,

This is indeed possible but you would either need a plugin or PHP in the template (on Output) to do that. I’ll move this thread to the Community Help forum since now we’re a bit outside a technical support issue.

Cheers

Greg