Ditto slideshow: show paging divs only if 2 or more slides exist

486 Posts

nickf08 Reply #1, 12 years, 10 months ago

Hello,

In a Ditto slideshow (in an Evo 1.0.12 site with PHx 2.2) I am trying to show the paging and arrow divs only if 2 or more slides exist.

If one slide exists I want to hide the paging and arrow divs.

With the PHx or If snippet, I don't mind which.

I am currently trying with ditto-menu-name_totalPages and ditto_iteration but cannot get it working.

My ditto call is:

[[Ditto? id=`slider` &parents=`123` &depth=`1` &display=`20` &paginate=`1` &paginateAlwaysShowLinks=`1` &showPublishedOnly=`1` &tpl=`slideshow-row` &tplFirst=`slideshow-row-first` &orderBy=`menuindex ASC`]]

I am trying this without success in the chunk that contains the ditto call:

[[if? &is=`[+ditto_iteration+]:gt:1` &then=`<div id="slider-prev" title="previous slide"><span></span></div>` &else=``]]
[[if? &is=`[+slider_totalPages+]:gt:1` &then=`<div id="slider-next" title="next slide"><span></span></div>` &else=``]]	 
[+phx:if=`[+slider_totalPages+]`:gt=`1`:then=`<div id="slider-pager"></div>`:else=``+]

Any ideas?

Thanks in advance for any help.

Web design Adelaide
http://gocreate.com.au

953 Posts

iusemodx Reply #2, 12 years, 10 months ago

I am no expert and I am not sure if this will help you, but:

If you say the page should display 20, it will only start to show the paginated navigation when you have 21 e.g. 2 pages

So: "&paginateAlwaysShowLinks" should be set to "0" as it, in your case, should only be shown when more than "1" output page is required.

Setting to "0" removes the paginated navigation completely until Ditto recognises that it should be shown as more than your limit has been reached.

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

486 Posts

nickf08 Reply #3, 12 years, 10 months ago

Howdy iusemodx,

Thanks for the post.

To tell you the truth I am not paginating the links at all in the slideshow, I just thought it was the only way to get a count of the number of slides that PHx or the If snippet could use to then show or hide the paging buttons.

So I started playing with it (without success), based on how I display the pagination in a Ditto news menu when 2 or more pages exist. But the more I think of it, I don't think "&display=`20` &paginate=`1` &paginateAlwaysShowLinks=`1` or =`0`" is even relevant to the desired outcome of showing the paging buttons if 2 or more slides exist.

The only time I can get the right output showing on the screen is with &display=`1` - but this means that only one slide shows in the source and I'd be relying on ditto's pagination to jump to the next slide etc - not at all what I want.

I think the [+ditto_iteration+] placeholder sounds more relevant but I cannot get that to work in my testing either.

This is tricky.

Web design Adelaide
http://gocreate.com.au

☆ A M B ☆
1,031 Posts

Jako Reply #4, 12 years, 10 months ago

Ditto placeholder are not set outside of the Ditto call. So you have to output the slider pagination in the Ditto Chunk (i.e. with a PHx construct). Easiest way would be in the last element.

[!Ditto … &tplLast=`tplLast`!]

tplLast

[+ditto_iteration:gt=`1`:then=`<div id="slider-prev" title="previous slide"><span></span></div><div id="slider-next" title="next slide"><span></span></div>
<div id="slider-pager"></div>`+]

http://www.pogwatch.com/ditto/ditto-parameters.html

486 Posts

nickf08 Reply #5, 12 years, 10 months ago

Thanks Jako.

Ditto placeholder are not set outside of the Ditto call. So you have to output the slider pagination in the Ditto Chunk (i.e. with a PHx construct). Easiest way would be in the last element.

Ah ok, that makes sense.

Hmmmm, I still can't get it to work.

This is my ditto call chunk...

 <div class="cycle-slideshow"
  data-cycle-slides="> div.slide"
  data-cycle-fx="scrollHorz"
  data-cycle-delay="1000"
  data-cycle-timeout="5000"
  data-cycle-speed="900"
  data-cycle-pause-on-hover="true"
  data-cycle-tmpl-regex="%((\.)?.*?)%"
  data-cycle-caption="#slide-caption"
  data-cycle-caption-template="<h1><span>[*pagetitle*]</span></h1>"
  data-cycle-overlay="#slide-overlay"
  data-cycle-overlay-template="<h2><span>%title% - %desc%</span></h2>"	 
  data-cycle-prev="#slide-prev"
  data-cycle-next="#slide-next"
  data-cycle-pager="#slide-pager"
  data-cycle-pager-template="<a href=# title=slide %slideNum%><span></span></a>"
  data-cycle-pager-active-class="active"
  data-cycle-loader="true"
  data-cycle-swipe="true"
 >

[[Ditto? &id=`slides` &parents=`123` &depth=`1` &showPublishedOnly=`1` &tpl=`slideshow-row` &tplFirst=`slideshow-row-first` &tplLast=`slideshow-row-last` &orderBy=`menuindex ASC`]]

</div>

This is the first row template (&tplFirst=`slideshow-row-first`)...

  <div class="slide first" data-title="[+title+]" data-cycle-desc="[+bannertxt+]">
   [+url:is=``:then=`<img src="[+image+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+] alt="slideshow image" />`:else=`<a href="[+url+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+]><img src="[+image+]" alt="slideshow image" /></a>`+]
  </div>

This is the main row template (&tpl=`slideshow-row`)...

  <div class="slide" data-title="[+title+]" data-cycle-desc="[+bannertxt+]">
   [+url:is=``:then=`<img src="[+image+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+] alt="slideshow image" />`:else=`<a href="[+url+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+]><img src="[+image+]" alt="slideshow image" /></a>`+]
  </div>

This is the last row template (&tplLast=`slideshow-row-last`)...

<div class="slide last" data-title="[+title+]" data-cycle-desc="[+bannertxt+]">
   [+url:is=``:then=`<img src="[+image+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+] alt="slideshow image" />`:else=`<a href="[+url+]"[+pagetitle:isnot=``:then=` title="[+pagetitle+]"`+]><img src="[+image+]" alt="slideshow image" /></a>`+]
  </div>
[+ditto_iteration:gt=`1`:then=`
  <div id="slide-prev" title="previous slide"><span></span></div>
  <div id="slide-next" title="next slide"><span></span></div>
  <div id="slide-pager"></div>`+]
  <div id="slide-caption"></div>
  <div id="slide-overlay"></div>

Any ideas where I am going wrong? [ed. note: nickf08 last edited this post 12 years, 10 months ago.]

Web design Adelaide
http://gocreate.com.au