Anything Slider, what am I missing?

[pixelwiz]

Hi Chris or Doug or someone else who is good at this and sees the thread.

Trying to implement your Anything Slider on the redesign of my site. And it doesn’t want to co-operate. I tried to follow all the instructions, got all the js and css loaded. No error in the console.

I am trying to put it into a narrow floating div that has some positioning attributes, not sure if that is what’s causing the problems. I did modify the CSS with the height and width I’m trying to fit it to.

Am I missing something obvious?
http://pixeltrics.cardreamr.com/index.cfm

Thanks

[pixelwiz]

Ok, I tried to strip everything out from the page, still no luck:
http://pixeltrics.cardreamr.com/test.cfm

[furrball1383]

Hey, I believe you’re missing something. Basically you have the anythingslider and jquery installed fine. What you’re missing is this

// JavaScript Document

$(document).ready(function(){

$('#slider')

.anythingSlider({

width          : 500,

height         : 300,

toggleControls : true,

startStopped   : true,

}

)

// target all images inside the current slider

// replace with 'img.someclass' to target specific images

.find('.panel:not(.cloned) img') // ignore the cloned panels

.attr('rel','group')            // add all slider images to a colorbox group

.colorbox({

width: '90%',

height: '90%',

href: function(){ return $(this).attr('src'); },

// use $(this).attr('title') for specific image captions

title: 'Press escape to close',

rel: 'group'

});

});

I was having the same problem as you before I added this into a js file and loaded with everything else. Try it and see if it works. And ofcourse you can change the width and height and stuff to what you want it to be

[Mottie]

Hi @Pixelwiz!

It appears that the anythingslider.css default stylesheet is missing, it is still required even though another theme is being used since the theme files build off of the default one.

Also, if the “resizeContents” option is set to false, each panel inside the slider needs to have dimensions assigned to them. Which might be easier if a class of some sort were added to differentiate them.

Then use css that looks something like this:

.panel1 { width: 500px; height: 400px; }

.panel2 { width: 450px; height: 250px; }

Or if all of the panels are the same size, set the “resizeContents” option to true and use this css:

#slider, #slider .panel { width: 500px; height: 400px; }

@furrball1383 The code you posted is for an older version of AnythingSlider as the width and height are now defined using css and not a width and height option. Also the “startStopped” option has been deprecated and replaced with just “autoPlay” (which starts the slideshow when true). And lastly, the trailing comma after the “startStopped” will break older version of IE. Might I suggest you check out a newer version of AnythingSlider ;)

[pixelwiz]

Thanks for the help guys, adding the default CSS seems to have done the trick. It’s not quite perfect yet but now it’s close and I just need to mess with the styles a little. Also I’ve discovered it’s better to say display:none in the css for the slider, and the add .show() in the jQuery ready after it’s done with loading… that way no content flicker.

[Mottie]

@pixelwiz Using display:none is one method of preventing the content flicker (aka FOUC) but not the best as users that have javascript disabled will not see any of the content. I have another method you could use as shown in the AnythingSlider FAQ

[furrball1383]

@Mottie, sorry didn’t know about the new version, I just pulled the code from a site I made a month ago. I shall look up the new version some time this week and orient myself with its use :D

[Author]

Posts