content slider issues

Posted by Community Admin on 04-Aug-2018 16:43

content slider issues

All Replies

Posted by Community Admin on 11-Apr-2011 00:00

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.

Posted by Community Admin on 11-Apr-2011 00:00

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

Posted by Community Admin on 11-Apr-2011 00:00

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?

Posted by Community Admin on 11-Apr-2011 00:00

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


Posted by Community Admin on 11-Apr-2011 00:00

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?

Posted by Community Admin on 11-Apr-2011 00:00

Perhaps jQuery wasn't loaded yet?

I really have no idea, but I do know I screwed around with it for a while myself :)

Posted by Community Admin on 13-Apr-2011 00:00

 

Posted by Community Admin on 13-Apr-2011 00:00

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!

This thread is closed