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

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