Jump to:

23376 Posts in 18262 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » including a slide show in a page

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: 1458 Views
  • Rishi
    Avatar
    Community Member
    97 Posts

    including a slide show in a page Link to this post

    hello
    i am trying to include a slide show inside a page,my slide show code is running fine in a html page.the code and file name are as follows

    jquery.cycle.all.2.73.js
    jquery.min.js

    this files are the javascript files for the slide show
    the CSS file have this code
    .slideshow { height: 232px; width: 232px; margin: auto }
    .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

    the code in my html file is

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

    AND
    <div class="slideshow">
          <img src="images/winter.jpg" width="200" height="200" />
          <img src="images/Bluehills.jpg" width="200" height="200" />
          <img src="images/Sunset.jpg" width="200" height="200" />
          <img src="images/water.jpg" width="200" height="200" />
          
       </div>

    here is the work i have done in php page.php
    I have written the below code under

    public function init() {
       parent::init();

    //MY CODE
    Requirements::Javascript("mysite/javascript/jquery.cycle.all.2.73.js");
    Requirements::Javascript("mysite/javascript/jquery.min.js");
          Requirements::customScript("$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'toss'
       });
    });");
    //MY CODE ENDS HERE

    I have written this code in Page.ss
    <div class="slideshow">
          <img src="images/winter.jpg" width="200" height="200" />
          <img src="images/Bluehills.jpg" width="200" height="200" />
          <img src="images/Sunset.jpg" width="200" height="200" />
          <img src="images/water.jpg" width="200" height="200" />
          
       </div>
    I have created the images folder and have saved the images there

    what i am getting the output is a single image in my page without the slideshow
    Please help me out in running this slide show
    Thank you in advance

    Note:just for information-i have tried the code in this page that also not working
    http://ssbits.com/working-with-banners/

  • patjnr
    Avatar
    Community Member
    101 Posts

    Re: including a slide show in a page Link to this post

    Hi

    I had the same problem and here is how i came around it.
    the way you are doing it is NOT recommended anyway.
    Now take a look at this extract form the default SS PHP after installation.

       public function init() {
          parent::init();

          /* Note: you should use <% require %> tags inside your templates instead of putting Requirements calls here. However
           * these are included so that our older themes still work */
          Requirements::themedCSS("layout");
          Requirements::themedCSS("typography");
          Requirements::themedCSS("form");
       }

    so this is what i then figured out.
    taking a look at the page source you will find that if you include your JavaScript using php (not recommended) and not in the template your script will be right at the bottom of the page but if you include they in the template (recommended) they will be at the top.

    At time we prefer to put our Requirements in page.php because its global other than in template which limits the scope to the pages which are using the template.

    Please note: if your slideshow is on every page then require the JQuery on page.ss otherwise create a separate template for your slideshow pages or else you will have browser compatibility issues (null values).

    For this reason i always include my Requirements in the template and it works wonderfully.
    *NB* the example on SSbits assume you have JQuery scripts already.

    just hope this helps

    1458 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.