Jump to:

23459 Posts in 18906 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » JQuery and Cycle for Carousel image slider

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 7396 Views
  • Vladas
    Avatar
    Community Member
    17 Posts

    JQuery and Cycle for Carousel image slider Link to this post

    Hello,
    I'm trying to implement an image slider into SilverStripe.

    I'm using http://malsup.com/jquery/cycle/ .

    I've searched through this forum, but couldn't find the right answer.

    I've used this as a basic example for me to kickstart.

    So in my themes/blackcandy/templates/Page.ss I've added this to the <head></head>:
          

    <script type="text/javascript" src="themes/blackcandy/js/jquery.js"></script>
          <script type="text/javascript" src="themes/blackcandy/js/jquery.cycle.all.min.js"></script>
          
          <script type="text/javascript">
          $(document).ready(function() {
             $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
             });
          });
          </script>

    Then in the body:

    <div class="slideshow">
                   <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                   <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                   <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
                   <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
                   <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
                </div>

    Then in the themes/blackcandy/css/layout.css

    .slideshow { height: 232px; width: 232px; margin: auto }
          .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

    Now what it does, it shows me the picture as in the example, but it doesn't do anything. Just shows one image and stays with it without changing. What the problem could be? This is very weird.

  • Vladas
    Avatar
    Community Member
    17 Posts

    Re: JQuery and Cycle for Carousel image slider Link to this post

    Sorted.
    It didn't work, because the div object had to have id property and fade set to #id property as well rather than class just in case someone else will have same problem in the future. Though I don't know why it didn't work when example works fine.

  • SSadmin
    Avatar
    Community Member
    90 Posts

    Re: JQuery and Cycle for Carousel image slider Link to this post

    think Jquery selector can aslo select the div class name. i have been used class name for quite long time, but havent met the problem before. you may try use $(".slideshow"), see if it still doesnt work?!

  • Chip Designs
    Avatar
    Community Member
    15 Posts

    Re: JQuery and Cycle for Carousel image slider Link to this post

    Hi Vladas,

    I have tried the same jquery fade as you have below and I'm also getting the same problem you did. I am unsure of your solution, could you please post the code that you changed to make it work.

    i have tried changing the <div class="slideshow"> to <div id="slideshow"> as well as
    $("#slideshow").cycle({ plus the css, but this has not fixed anything.

    SOLVED
    found a solution here http://silverstripe.org/general-questions/show/257964?showPost=287140

    Cheers,
    Rob

    7396 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.