Customising the CMS

SilverStripe Forums » Customising the CMS » jQuery image slider

Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2	Go to End	Next >
Author	Topic:	1843 Views

joelkrause

Community Member
1 Post

jQuery image slider

1 May 2012 at 10:34pm

Hey,
I want to put an image slider on my homepage of my website, and have found Craftyslide, but I cannot for the life of me figure out how to get it to work.. :/ I feel really bad. I could usually get things to work..
Anyway, if anyone could give me a hand, that would be great.
- Joel.
novaweb

Community Member
106 Posts

Re: jQuery image slider

2 May 2012 at 10:53am

Hi Joel,
Use this http://matt.zurb.s3.amazonaws.com/orbit-1.2.3.zip
Instructions here: http://www.zurb.com/playground/orbit-jquery-image-slider (But don't click the foundation link, use the link i've supplied above)
You will need the following in your Page_Controller:
(Files downloaded, as per the following, will need to be in mysite/javascript/orbit)
function init() {
parent::init();
Requirements::javascript("mysite/javascript/orbit/jquery.orbit-1.2.3.js");
Requirements::css("mysite/javascript/orbit/orbit-1.2.3.css");
}

This will need to be in Page:
   static $has_one = array(
      "FeatureImage1" => "Image",
      "FeatureImage2" => "Image",
      "FeatureImage3" => "Image",
   );
function getCMSFields(){
// you're going to have to read how to do this, I'm too lazy to write it outm let me know if you get stuck
}

Then in Page.ss:
<div id="FeatureContainer" style="width:690px;height:400px;">
<% if FeatureImage1 %>
$FeatureImage1
<% end_if %>
<% if FeatureImage2 %>
$FeatureImage2
<% end_if %>
<% if FeatureImage3 %>
$FeatureImage3
<% end_if %>
</div>

Then run dev/build?flush=1, upload images through CMS, Bingo.
Took me about 20 minutes to get going, holla if you get stuck.
Cheers,
Nova
novaweb

Community Member
106 Posts

Re: jQuery image slider

2 May 2012 at 10:57am

Forgot to mention, you'll have to add another Requirements::javascript call to your init() function (should be the last call in init). Name the file orbit.config.jquery.js and inside it write the equivalent of:
$(document).ready(function{
#FeatureContainer.orbit();
});
goodness

Community Member
31 Posts

Re: jQuery image slider

19 April 2013 at 8:02am

novaweb
I like this Orbit slider. I have a couple of quick questions:
1) Where do I go to change the speed of the transition/slide?
2) Can I change the transitions to a Fade or something else? If yes, can you point out where?
Thanks!
novaweb

Community Member
106 Posts

Re: jQuery image slider

19 April 2013 at 10:24am

Hi Goodness,
$('#featured').orbit({
animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true,           // true or false to have the timer
advanceSpeed: 4000,        // if timer is enabled, time between transitions
pauseOnHover: false,        // if you hover pauses the slider
startClockOnMouseOut: false,     // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000,     // how long after MouseOut should the timer start again
directionalNav: true,        // manual advancing directional navs
captions: true,           // do you want captions?
captionAnimation: 'fade',        // fade, slideOpen, none
captionAnimationSpeed: 800,     // if so how quickly should they animate in
bullets: false,          // true or false to activate the bullet navigation
bulletThumbs: false,       // thumbnails for the bullets
bulletThumbLocation: '',       // location from this file where thumbs will be
afterSlideChange: function(){}     // empty function
});

as per Advanced Options tab on http://www.zurb.com/playground/orbit-jquery-image-slider
Cheers,
Nova
goodness

Community Member
31 Posts

Re: jQuery image slider

19 April 2013 at 1:22pm

Thanks!
goodness

Community Member
31 Posts

Re: jQuery image slider

20 April 2013 at 1:43am

novaweb
Thanks again for the info on the advanced options. I've got a great stand-alone working version now.
What I'd like to do is simply create a slider that I can include in my HomePage.ss file that's located in my themes/mytheme/templates/Layout folder.
I have a div called SliderHolder in my HomePage.ss (layout file) that I would call the include into:
<div id="SliderHolder"><% include Slider %></div>
I don't need something that can be edited or created within the CMS. Just a hand-coded Slider.ss file that's located in my themes/mytheme/templates/Includes folder.
Can you help me with this? I'm not 100% sure where to put the calls to the .js and .css files.
Many thanks!
goodness

Community Member
31 Posts
Re: jQuery image slider

20 April 2013 at 3:31am

novaweb
I hope you can help me.
I've got the Orbit Slider working as an include. However, I have a strange thing happening.
I resized the nav images (left-arrow.png & right-arrow-png) to better fit my slider.
For some reason that I can't seem to find, there is the text "Right" hovering by my right-arrow.png (see the attached image)
When I Firebug it I get:
<div class="slider-nav">
<span class="right">Right</span>
<span class="left">Left</span>
</div>
I have no idea where the text "Right" and "Left" texts are coming from inside those spans.
Here's my css code:
/* DIRECTIONAL NAV
================================================== */
div.slider-nav {
display: block }
div.slider-nav span {
width: 23px;
height: 30px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 60%;
margin-top: -50px;
cursor: pointer; }
div.slider-nav span.right {
background: url(../images/orbit/right-arrow3.png) no-repeat;
right: 0;
}
div.slider-nav span.left {
background: url(../images/orbit/left-arrow3.png) no-repeat;
left: 0;
}
I've spent the better part of 2 hours trying to get rid of the "Right" text that appears in the browser. For some reason I don't see the "Left" text on the left side.
Any help would be greatly appreciated.
Thanks!
Attached Files
- OrbitRightNavBtn.png
  1.1 KB