I am trying to make a dynamic slideshow with javascript , I add the pics in each page with TVs, and if there are no pics uploaded it returns =`` This is the code of the beginning:
<div id="slider">
<ul id="sliderContent">
[+phx:if=`[*slide-01*]`:is=``:then=``:else=`<li class="sliderImage"><img src="[*slide-01*]" alt="[*slide-titolo-01*]" /><span class="bottom"><strong>[*slide-titolo-01*]</strong><br />[*slide-testo-01*]</span> </li>`+]
[+phx:if=`[*slide-02*]`:is=``:then=``:else=`<li class="sliderImage"><img src="[*slide-02*]" alt="[*slide-titolo-02*]" /><span class="bottom"><strong>[*slide-titolo-02*]</strong><br />[*slide-testo-02*]</span> </li>`+]
[+phx:if=`[*slide-03*]`:is=``:then=``:else=`<li class="sliderImage"><img src="[*slide-03*]" alt="[*slide-titolo-03*]" /><span class="bottom"><strong>[*slide-titolo-03*]</strong><br />[*slide-testo-03*]</span> </li>`+]
</ul>
</div>
The HTML, if I add only one pic, is:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage"><img src="assets/images/Gallery01/1.jpg" alt="Title text 01" /><span class="bottom"><strong>Title text 01</strong><br />description text 01</span> </li>
</ul>
</div>
The slideshow works great, but as you can notice there is a big empty gap, can I remove it with Phx or in another way? I know that’s not important but it is nice to have a clean code in the HTML.
I have also another question: as because I am going to add about 20 images in the slideshow, I will have to create the following TVs [*slide-01*][*slide-titolo-01*][*slide-testo-01*] and then change number [*slide-02*][*slide-titolo-02*][*slide-testo-02*, and then [*slide-03*][*slide-titolo-03*][*slide-testo-03*] etc etc.
Does anyone know if there are better ways of accomplishing this same functionality, without, obviously, create 60 TVs?
Should I use Xedit and MultiTV?
http://modxcms.com/forums/index.php/topic,33985.msg206683.html
Thanks in advance.