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.

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

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

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!

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

Thanks!

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!

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!