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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

including a slide show in a page


Go to End


2 Posts   2198 Views

Avatar
Rishi

Community Member, 97 Posts

14 January 2010 at 10:40pm

Edited: 14/01/2010 10:41pm

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

Community Member, 102 Posts

15 January 2010 at 9:28pm

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