Jump to:

5513 Posts in 1732 Topics by 1218 members

Customising the CMS

SilverStripe Forums » Customising the CMS » jQuery image slider

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

Page: 1 2
Go to End
Author Topic: 4042 Views
  • joelkrause
    Avatar
    Community Member
    1 Post

    jQuery image slider Link to this 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.

  • novaweb
    Avatar
    Community Member
    111 Posts

    Re: jQuery image slider Link to this post

    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
    Avatar
    Community Member
    111 Posts

    Re: jQuery image slider Link to this post

    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
    Avatar
    Community Member
    38 Posts

    Re: jQuery image slider Link to this post

    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
    Avatar
    Community Member
    111 Posts

    Re: jQuery image slider Link to this post

    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
    Avatar
    Community Member
    38 Posts

    Re: jQuery image slider Link to this post

    Thanks!

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: jQuery image slider Link to this post

    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
    Avatar
    Community Member
    38 Posts

    Re: jQuery image slider Link to this post

    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
    4042 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.