We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 10076
    • 1,024 Posts
    Hi,

    here a simple solution to create a content slider with the very versatile Coda 2.0 Jquery slider created by Niall Doherty, in the link you can find the options available for this script http://www.ndoherty.biz/demos/coda-slider/2.0/..
    Edit: With the help of Kristalin and Phil_G, who modified the original Jquery-codaslider code, and the AnchorsAway plugin by Open Geek we got it running.

    Got it running here, I did not style it sorry:
    Check here

    Here s how to do it, there is not much to change except the links to the jquery codes and the CSS that needs to be adapted for your needs.
    Probably a good idea to start of with the original CSS file and adapt that.
    Rest of the chunks will find their way. The original CSS, the chunks and the plugin are attached in the zip, together with the modified Codaslider codes.

    • Download the attached modified coda package from the bottom of this post.
      Put a referer to the three jquery codes in your template <head> section. And off course copy the three jquery codes to that place. In my case:
      <script type="text/javascript" src="[(base_url)]assets/js/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="[(base_url)]assets/js/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="[(base_url)]assets/js/jquery.coda-slider-2.0.js"></script>
    • Make sure Ditto is installed
    • Upload the script files to the assets js folder and if you want the coda.css to its location and create a link to it in the header.
    • Create all the chunks; codaSlider,contentTpl and dittoSlider.
    • Put a call to the codaSlider chunk before the end head tag </head> in you template. Like so: {{codaSlider}} In the codaSlider chunk you can set the options for the behaviour of the slider.
    • Now create a document that is published and shows in menu. It needs to be a container to hold the documents that you want to use as content for that slideshow. These child documents dont need "show in menu" ticked. They need to be published.
    • [li]In this parent document place a call to the dittoSlider chunk. Like so {{dittoSlider}}. You put the same call in every parent document you like to use the slider in.


    That should do it.

    Frank.
      • 16702 ☆ A M B ☆
      • 536 Posts
      nice! thank you

      will now try...
        palma non sine pulvere
        • 2055
        • 3 Posts
        Hi Frank ..

        I’m so glad that finally somebody had a real sample on how to do the content slider on modx. But it’s seem I’m lost :-(
        I followed step by step of your instructions but somehow it’s not working for me .. Do you have a download sample for this on modx?

        Regard

        Arief
          • 2055
          • 3 Posts
          Thank Frank.


          Quote from: Frank at Apr 06, 2010, 02:41 AM

          Hi Arief,

          I will again do slider configuration on a fresh install tonight. And will try to make it as easy ass possible. So for now be patient,

          Frank.
            • 16702 ☆ A M B ☆
            • 536 Posts
            today i test the solution and i have a problem
            when i click to tab#2 or 3,4... etc. my page is reload and go to http://domain.net/#2 or #3 or something else...why and how i fix this?

            Thanks,
            Kristalin
              palma non sine pulvere
              • 10076
              • 1,024 Posts
              Quote from: Kristalin at Apr 06, 2010, 04:35 PM

              today i test the solution and i have a problem
              when i click to tab#2 or 3,4... etc. my page is reload and go to http://domain.net/#2 or #3 or something else...why and how i fix this?

              Thanks,
              Kristalin

              Kristalin,

              read above, I tried loads but keep running into the same error, the links is build like this #"number" for modx that means nothing (correct mods?) so it just reload the URL falling back to the start page. However, this script is usable for eg a header or with the use of the arrows. Maybe one of the folks better into scripting can make an adjustment to the script so the tabs will function. Frank.
                • 10076
                • 1,024 Posts
                Quote from: ariefwiseknight at Apr 06, 2010, 02:08 AM

                Hi Frank ..

                I’m so glad that finally somebody had a real sample on how to do the content slider on modx. But it’s seem I’m lost :-(
                I followed step by step of your instructions but somehow it’s not working for me .. Do you have a download sample for this on modx?

                Regard

                Arief

                Arief, what does happen for you with this script. Have you got it live?
                  • 2055
                  • 3 Posts
                  Nope ... getting much more confuse than ever. I already tried it couple of times even with black template but still wont worked. I’ll give it another try today .. hopefully it will work since I desperately need slider in my front page.
                    • 36699
                    • 8 Posts
                    This was tough, but I think I’ve got it figured out.

                    First up, you’ll need to install the fantastic AnchorsAway plugin by OpenGeek (http://modxcms.com/forums/index.php/topic,15753.0.html).

                    Then in the CodaSlider js file, on line 165 change:

                    targetPanel = parseInt($(this).attr("href").slice(1));
                    
                    --to--
                    
                    target = $(this).attr("href");
                    targetPanel = $(this).attr("href").slice(target.length - 1);
                    
                    


                    Basically what I could see happening was that targetPanel was returning NaN. Normally the links were all "#1, #2, #3" etc. so the slice function worked fine. But with the above plugin changing the links to "mypage.html#1, mypage.html#2" etc., it threw everything out.

                    There may well be a more elegant way to do this, so please post if you have such a solution.

                    Haven’t tested yet, but all this should work fine with Ditto or even generating the links with WayFinder (which is what I intend to do later).

                    Excelsior!
                      • 16702 ☆ A M B ☆
                      • 536 Posts
                      Hello Phil,


                      great work! Everything with this minimum edit work perfect.
                      Thanks!

                      //sorry I misled you on the successful development

                      Frank, thank you for the work


                      Nice, nice...
                        palma non sine pulvere