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.

Customising the CMS

jQuery image slider


Go to End
Reply

10 Posts   4245 Views

Avatar
joelkrause

1 May 2012 at 10:34pm Community Member, 1 Post

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

2 May 2012 at 10:53am Community Member, 115 Posts

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

2 May 2012 at 10:57am Community Member, 115 Posts

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

19 April 2013 at 8:02am Community Member, 38 Posts

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

19 April 2013 at 10:24am Community Member, 115 Posts

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 [url]http://www.zurb.com/playground/orbit-jquery-image-slider[/url]

Cheers,
Nova

Avatar
goodness

19 April 2013 at 1:22pm Community Member, 38 Posts

Thanks!

Avatar
goodness

20 April 2013 at 1:43am Community Member, 38 Posts

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

20 April 2013 at 3:31am Community Member, 38 Posts

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