We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 13390
    • 8 Posts
    Hi all,
    I’ve dug through past posts and the online documentation for the past couple weeks, but I can’t seem to find the answers I’m looking for to what I’d like to do. I’m convinced it’s possible with ModX, I’m just not sure how yet with my limited experience.

    I haven’t exactly settled on which slideshow to use yet, so if one works better, I’m game to change. But I’m looking for something like the JonDesign or s3Slider (they’re both almost the same) functionality.
    http://smoothgallery.jondesign.net/getting-started/
    http://www.serie3.info/s3slider/

    Now, setting up the slider itself is no big deal. Here’s where I’m stumped with ModX. I’d like to have the featured images & text change, and have those changes happen automatically. So for example (this is for a tv station) I put in 10 upcoming shows to promote, and list their publish start and end dates. I’d like to have ModX be able to look at the list, take the earliest 4 items that have not yet expired on the list, and display them. When something expires, it automatically drops that item from the slideshow and adds a new one.

    So I’m just updating the queue of data. Even better would be having my assistant (with limited access permissions) updating that list and photos.

    Please help, this totally has me pulling my hair out, because I *KNOW* it’s possible, but I just can’t seem to wrap my brain around it. smiley
      • 10313
      • 375 Posts
      You can use Ditto with your own template to generate the needed output for each single slide. This works very fine for me, I already did this on a website for a customer.
        • 26931
        • 2,314 Posts
          • 21191
          • 236 Posts
          This is all going to be Document based. So each of your "slides" will need at least 1 TV for the image used in the sideshow, on my site http://himmdesign.com my slideshow is dynamic and I use 2 TVs , one for an image and one for text, and then I build a ditto template chunk with the proper place holders

           <div class="slide">
                   
                    <div class="image"><a  href="[~[+id+]~]"><img src="[+client-image+]" alt="[+slider-alt-txt+]"/></a></div>
          <div class="description">
                        <h2><a  href="[~[+id+]~]">[+menutitle+]</a></h2>
                          [+slider-content+]
                        <a  href="[~[+id+]~]" class="read-more">Read More</a>
                    </div>
                  </div>
                 <!-- end slide -->


          I have my place holders than might be needed but I wanted to tightly control content for SEO and whatnot.
            ~Shawn Himmelberger
            Check out my MODx Development and MODx Design Company - Himmelberger Design
            • 13390
            • 8 Posts
            Yes, I’ve been fiddling with Ditto, and I think that’s the solution. I’m going to keep doing some more testing to see if I can get what I want. neon_eddy, what slideshow is that you’re using? It’s really nice.

            I’ve got a test version working with no formatting, and I think I even have it working with automatic publish dates too. The trick is going to be if this is the right solution that will work with having an assistant updating the slide content data and me being able to keep it all simple for him. smiley

            I had tried the Maxigallery version, but it just wouldn’t work right for me.
              • 21191
              • 236 Posts
              That is jQuery’s cycle plugin, we used that on http://tng-inc.net as well. However on this site it’s driven by maxigallery http://tng-inc.net/portfolio/residential/minnetonka-residence
                ~Shawn Himmelberger
                Check out my MODx Development and MODx Design Company - Himmelberger Design
                • 10076
                • 1,024 Posts
                Hi,

                I am trying the Jquery FeaturedContentSliderhttp://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ with Ditto.
                As I want a horizontal "menu" my first call is
                 <div class="slider-wrap">
                <div id="content-top">
                		<div id="movers-row"><ul>[!Ditto? &startID=`2`&tpl=`slidemenu`!]</ul></div></div>


                Where the tpl is
                <li><a href="#[+introtext+]]" class="cross-link">[+title+]</a></li>

                As the menu uses a number followed by a squarebracket I use the introtext to fill out a unique number, should probably use the doc id there.

                Second call is
                [!Ditto? &startID=`2`&tpl=`dittoslide`!]
                where the tpl is
                <div id="content-bottom">
                		<div id="main-photo-slider" class="csw">
                			<div class="panelContainer">
                
                				<div class="panel" title="Panel [+introtext+]">
                					<div class="wrapper">
                						<h1>[+title+]</h1>
                						<p><em>[+longtitle+]</em></p>
                						<p>[+content+]</p>
                						</div>
                					</div>


                The menu is build the way is shows in the original, also the HTML output seems okay:
                <div id="content"> 
                  <div class="slider-wrap"> 
                <div id="content-top"> 
                		<div id="movers-row"><ul><li><a href="#9]" class="cross-link">middag</a></li> 
                   <li><a href="#8]" class="cross-link">ochtend</a></li> 
                   </ul></div></div> 
                <div id="content-bottom"> 
                		<div id="main-photo-slider" class="csw"> 
                			<div class="panelContainer"> 
                				<div class="panel" title="Panel 9]"> 
                					<div class="wrapper"> 
                						<h1>middag</h1> 
                						<p><em></em></p> 
                						<p><p>13.00 uur de oudste kinderen gaan slapen</p> 
                <p>14.30 uur kinderen komen uit bed, er volgt een toiletronde en na het aankleden gaan we richting school</p> 
                <p>15.15 uur we drinken sap, eten fruit en eten een koekje</p> 
                <p>15.45 uur er is tijd voor vrij spel, kinderen kunnen kiezen uit een spelletje uit de kast, er kan buiten gespeeld worden enz.</p> 
                <p>17.00 – 18.00 uur kinderen worden opgehaald</p> 
                <p>De allerkleinsten volgen een ander dagritme. Hierbij wordt zoveel mogelijk rekening gehouden met ritme van thuis.</p></p> 
                						</div> 
                					</div> 
                				<div id="content-bottom"> 
                		<div id="main-photo-slider" class="csw"> 
                			<div class="panelContainer"> 
                				<div class="panel" title="Panel 8]"> 
                					<div class="wrapper"> 
                						<h1>ochtend</h1> 
                						<p><em></em></p> 
                						<p><p>9.00 uur – 10.00 uur vrij spel</p> 
                <p>Samen opruimen en daarna aan tafel</p> 
                <p>10.00 uur fruit eten en wat drinken. Er wordt voorgelezen, we zingen liedjes enz</p> 
                <p>Na het fruit eten volgt de toiletronde</p> 
                <p>10.30 uur we gaan naar buiten / er wordt geknutseld of we gaan een uitstapje maken</p> 
                <p>12.00 uur aan tafel, we gaan brood eten. Soms eten we een tosti of bakken we pannenkoeken</p> 
                <p> </p></p> 
                						</div> 
                					</div> 
                				
                 
                  </div> 
                  
                  
                  
                  </div> 


                Still the thing does not work, At first I put the whole thing in a chunkm so static, and that worked.
                What could be the problem here? Is it that it cant be dynamic?

                  • 15175
                  • 116 Posts
                  Maybe having two closing square brackets for the [+introtext+] placeholder in the tpl is causing an issue?
                    • 10076
                    • 1,024 Posts
                    Hi JP,

                    the double square bracket is used in the static html to create the links:

                    <ul>
                      <li><a href="#1]" class="cross-link">dada</a></li>
                      <li><a href="#2]" class="cross-link">dodod</a></li>
                      <li><a href="#3]" class="cross-link">didi</a></li></ul>


                    So thats not it. May be it s to do with the parsing order, because the html source is a 100% copy of the html source code of the original.

                    fr.
                      • 28042 ☆ A M B ☆
                      • 24,524 Posts
                      The point being suggested was that the double bracket may be upsetting the MODx parser, causing it to fail on processing the tag properly.
                        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