Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

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

including a slide show in a page


Reply

2 Posts   1495 Views

Avatar
Rishi

14 January 2010 at 10:40pm (Last edited: 14 January 2010 10:41pm), Community Member, 97 Posts

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/

Avatar
patjnr

15 January 2010 at 9:28pm Community Member, 101 Posts

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