More in this section

Forums / Bugs & Issues / content slider issues

content slider issues

8 posts, 1 answered
  1. Eric
    Eric avatar
    8 posts
    Registered:
    04 Feb 2011
    11 Apr 2011
    Link to this post
    I have been trying to implement a jQuery content slider into my installation of Sitefinity. I am actually stuck at the place where I add the static HTML to the Master and check the functionality on the front-end. I have tried 4 different content sliders, all of which I have used before:
    jQuery Carousel
    Nivo slider
    SlideViewer Pro
    Slides JS

    This is insanely frustrating. When I check the source, all of the assets check out: images, css linked in the header, js linked in the header. I have other jQuery code that is not interfering with these javascripts. Is there a reason that these 4 content sliders will not render correctly, or at all, in Sitefinity?

    I would be more than happy to purchase a module from the marketplace that does this if there is one compatible with 4.0.
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    11 Apr 2011
    Link to this post
    Can you share your implementation at all? (Jing with Firebug console tab open perhaps?)

    I have Nivo running without problems
    http://www.sitefinitysteve.com

    Right now I have the Html Nivo uses just set in a simple Content Block Widget

  3. Eric
    Eric avatar
    8 posts
    Registered:
    04 Feb 2011
    11 Apr 2011
    Link to this post
    Steve,

    I just have a development copy of the website running locally. I also have a staging copy up, but unfortunately because of the client, I cannot share the URL. What you have implemented is exactly what I am looking to do. Are you keeping the CSS and JS relative to Nivo in your Master page? I also have tried putting the content in a static content block, to no avail. Would it be possible for me to shoot you an email outside of the forum with the URL?
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    11 Apr 2011
    Link to this post
    Ok, so in the page I have this in the content block
    <!-- BEGIN SLIDER --> <div style="background-color: rgb(255, 255, 255);" id="slider"> <a href="#"> <img alt="" src="http://c0429634.cdn2.cloudfiles.rackspacecloud.com/sample1.png" title="Wooooah, Plus sign rainbow" class="alignnone size-full wp-image-254" width="960" height="370"> </a> <a href="#"> <img alt="" src="http://c429634.r34.cf2.rackcdn.com/people.jpg" title="Super Cute Squared" class="alignnone size-full wp-image-255" width="960" height="370"> </a> <a href="#"> <img alt="" src="http://c0429634.cdn2.cloudfiles.rackspacecloud.com/sample2.png" title="Robot Ladybug, get down with your robot self" class="alignnone size-full wp-image-255" width="960" height="370"> </a> <a href="#"> <img alt="" src="http://c0429634.cdn2.cloudfiles.rackspacecloud.com/sample3.png" title="This camera is vomiting a rainbow, don't get drunk on rainbows mr.camera" class="alignnone size-full wp-image-256" width="960" height="370"> </a> </div> <div style="width: 960px; margin: 0pt auto; background: url("http://wordpress.site5.net/boldy/wp-content/themes/boldy/images/bk_shadow_slider.png";) no-repeat scroll 0pt 0pt transparent; height: 50px;"> </div> <!-- END SLIDER -->
    (apologies for the lack of indenting)


    The Nivo Javascript\CSS I add into my Page Template in the backend using the JS & CSS Widgets
    I have this in the "Write Javascript" section of my first JS Widget
    $(window).load(function() {
                    $('#slider').nivoSlider({
                        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
                        slices:15,
                        animSpeed:800,
                        pauseTime:5000,
                        startSlide:0, //Set starting Slide (0 index)
                        directionNav:true, //Next & Prev
                        directionNavHide:true, //Only show on hover
                        controlNav:true, //1,2,3...
                        controlNavThumbs:false, //Use thumbnails for Control Nav
                        controlNavThumbsFromRel:false, //Use image rel for thumbs
                        controlNavThumbsSearch: '.jpg', //Replace this with...
                        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                        keyboardNav:true, //Use left & right arrows
                        pauseOnHover:true, //Stop animation while hovering
                        manualAdvance:false, //Force manual transitions
                        captionOpacity:0.8, //Universal caption opacity
                        beforeChange: function(){},
                        afterChange: function(){},
                        slideshowEnd: function(){} //Triggers after all slides have been shown
                    });
                });
    Set to Render at bottom

    I also have a SECOND JS widget in there set to render at bottom with this as the .js URL
    /Sitefinity/WebsiteTemplates/sitefinitysteve/JS/jquery.nivo.slider.pack.js

    And then finally a CSS widget linking in the nivo CSS
    /Sitefinity/WebsiteTemplates/sitefinitysteve/App_themes/boldy/Styles/nivo-slider.css


    Answered
  5. Eric
    Eric avatar
    8 posts
    Registered:
    04 Feb 2011
    11 Apr 2011
    Link to this post
    Steve,

    You are awesome. For some reason putting the CSS and JS in my master didn't work, but putting them in the CSS and JS content blocks worked. Very strange. When I look at the rendered source code, it actually puts those blocks in the EXACT spots, so it's really mind-boggling. Any idea what would cause this discrepancy for future reference?
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    11 Apr 2011
    Link to this post
    Perhaps jQuery wasn't loaded yet?

    I really have no idea, but I do know I screwed around with it for a while myself :)
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Apr 2011
    Link to this post
     
  8. Eric
    Eric avatar
    8 posts
    Registered:
    04 Feb 2011
    13 Apr 2011
    Link to this post
    jQuery was definitely loaded, because I was using it in my JS to parse the URL and bold the nav item for the section of the website that you are on Firebug wasn't catching any JS errors. It's working now. Thanks for your help!
8 posts, 1 answered