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're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Customising the CMS /

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

jQuery image slider


Go to End


10 Posts   8420 Views

Avatar
joelkrause

Community Member, 1 Post

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.

Avatar
novaweb

Community Member, 116 Posts

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

Avatar
novaweb

Community Member, 116 Posts

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();
});

Avatar
goodness

Community Member, 38 Posts

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!

Avatar
novaweb

Community Member, 116 Posts

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

Avatar
goodness

Community Member, 38 Posts

19 April 2013 at 1:22pm

Thanks!

Avatar
goodness

Community Member, 38 Posts

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!

Avatar
goodness

Community Member, 38 Posts

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
Go to Top