jQuery Plugin: Slinky Slider
I’ve just released Slinky Slider v1.0.
This simple jQuery plugin loads external HTML files into a series of panels. These are appended into the nominated container object (as selected via the standard jQuery selector engine). Once each panel is loaded, it is collapsed to a “small” clipped state, and the first panel is opened up to fill the remaining space in the container. An animation cycles through all the loaded panels automatically and the plugin also sets up a mouseover event to expand each panel.
Set up is easy, and I think it’s all largely bug free so give it a whirl.
I’ve set up a page that demos the effect, and a project page on jQuery’s Plugin repository.
February 1st, 2009 at 8:37 pm
thanks for the great script that you contributed to the jquery website, i downloaded it it works great except with IE7, do you know why? and if yes, can you please help me, because it works great with all other browsers (firefox, safari, chrome) but not with IE7.
thanks again, i’ll wait for your reply.
February 1st, 2009 at 8:54 pm
Hi Joe
What kind of issues are you having? I tested in IE7 and (apart from an occasional judder as the JavaScript engine struggled to keep up with rendering the animation) it worked okay.
February 1st, 2009 at 10:48 pm
for sure it’s a javascript issue, but when i open it on both IE6 & IE7, even your demo website, the sliding doesn’t work at all, it shows a black area with no pages. that’s my problem.
February 2nd, 2009 at 9:51 pm
Hello,
Nice job you’ve done here! Everything worked from the first time. But I changed the width to 1000px and now the panels won’t go further than their original width.
I tried to change the “largesize” but this doesn’t do much.
It would be great if somebody could whisper me the solution
Cheers!
February 2nd, 2009 at 10:09 pm
Hi Joe
I’m looking into this – at first sight it appears some specific iterations of IE are struggling with the extension of the jQuery object. I’ll let you know if I come up with a solution, or if someone else points me there first.
February 2nd, 2009 at 10:11 pm
Hi there. If you’re using the demo code and images, the images themselves are only a fixed width so you’ll need to swap those out for wider content so that it’s wide enough to fill the space overall. So long as you specify a width on the containing element, the plugin should pick up on that automatically and use that value for you.
February 2nd, 2009 at 10:28 pm
Ooops! I know
I should look in the panel.html before I ask something instead of after it.. it’s getting late here.
In any case thanks and good luck!
February 3rd, 2009 at 12:14 am
thanks samhs, i`ll be waiting for your response, meanwhile if i find a solutions i`ll let everyone know. i tried other jquery codes, mostly worked on IE, so hopefully you can find the solutions.
thanks.
February 9th, 2009 at 4:06 am
any updates on the code???
this is the error that i’m getting when trying to run the slinky slider on internet explorer 6 & 7,
“Object doesn’t support this property or method”
February 9th, 2009 at 6:38 am
now i’m pretty sure that the problem is with the “jquery.slinkyslider.js” file, but i still don’t know a solution for that problem.
February 9th, 2009 at 6:42 am
and in that file it’s related to row 36 which is “container = $(this);”
i hope this helps
February 10th, 2009 at 1:02 am
Hi Joe
Sorry, I haven’t had time to track the bug down yet. You’re right in that IE is reporting that line as the error, but I’m not convinced this is the true problem – I think it’s a bit of a red herring in true IE style. If you need a quicker answer, submit a bug report at the jQuery site above – that way other developers can contribute solutions. Alternatively, if you have a specific project in mind email me – see my contact page for details – and I can let you have a look at a non-plugin version of this which is verified as working on all versions of IE, FF & Safari.
February 13th, 2009 at 3:16 pm
Hi samhs, thanks for your reply, yes i would like to have a version that can work on any browser, even if i have to pay for it. please let me know the arrangement or email me.
p.s. i submitted a bug report to the jQuery site, let’s see if someone finds a solution.
thanks.
March 7th, 2009 at 11:22 pm
I can get this working on my local computer, but not when I publish it. Odd. All paths are the same as the demo and relative (not absolute).
The error I get on Windows XP / Firefox 3 is:
“$ is not defined”.
I might be able to troubleshoot it if I understood the javascript syntax. The way its running is this:
$(document).ready(function(){
$(”#content”).slinkySlider();
});
Is there some way to put that into an onLoad event? My theory is that its executing the script before the page (and slinkSlider.js) have loaded, so if it could be executed onLoad, this wouldn’t happen.
Something like:
, but this isn’t working.
I’ve never seen a syntax like “$(”#content”).slinkySlider();” before, so I don’t have any clue how to manipulate it. Any tips on how to execute it onLoad? Or otherwise fix this problem?
March 7th, 2009 at 11:24 pm
Oops, the line after “something like” above got stripped out, but it was:
(body onLoad = “$(”#content”).slinkySlider();”)
March 9th, 2009 at 3:19 pm
Hi Wrybread
The function $ is defined by the jQuery object, and is automatically assigned when the script is loaded into the page. Assuming it’s working locally, I’d suggest you make sure you’ve uploaded the jQuery core javascript file to your server as well as the slinkyslider Javascript file; it sounds like the JQuery script isn’t being loaded into your browser.
FYI the line of code you refer to in your first comment is synonymous with onload for the purposes of this issue – it’s not exactly the same, but you can think of it in that way.
Hope this helps.
March 20th, 2009 at 4:15 pm
Any way to pull this off vertically rather than horizontally?
March 20th, 2009 at 4:23 pm
Hi Shelly
The script is simply calculating the total width and the number of panels, taking off the width for the collapsed panels multiplied by the total number of panels less one, and setting the width of the open panel to the remainder. Using the same maths you could do this vertically really easily – just substitute width for height. Post back if you need help doing that.
March 20th, 2009 at 11:38 pm
Awesome – thanks! I’ll give it a shot
March 28th, 2009 at 10:40 am
Hi guys, i think i managed to get the bug Joe mention here fixed. Apparently, you can’t assign a jquery object into a variable and access it via the variable, IE seems to dislike it. Instead of using the variable ‘container’, removed ‘container’ and placed it as ‘$(this)’ for all ‘container’ found. This will fix the problem in IE!
Cheers,
Clay Lua
April 4th, 2009 at 1:42 pm
Hi Clay
Sorry for the slow reply – that’s great – thanks. I’ll update the plugin code on the JQuery repository.
April 16th, 2009 at 9:28 am
I can’t see anything may be because I am using IE8? There was just a solid background of the DIV and thats it no animation nothing. hit refresh couple of times to see if the page didn’t load properly but didn’t work.
April 21st, 2009 at 5:33 pm
Hi Sanya!
Maybe you havent downloaded the jquery plugin? I did that too. Just get it from jquery.com and then make sure it is being properly referenced in the demo.html
Just a question… I am thinking of utilizing this 5 times on a site (with about 5 frames each time.)
I was hoping, each time to pass a variable when I call the function:
$(”#content”).slinkySlider();
This variable would tell it which files to download into the frames.
Each set of frames would have the same page just with a different get variable.
I pretty much know how to do it – I just don’t understand:
settings = $.extend({}, $.fn.slinkySlider.defaults, settings);
Can you explain that to me?
May 14th, 2009 at 8:11 am
Hi, i have the same problem, black DIV… but in local he WORKS take a look in that link
http://www.vianettv.com.br/testex/demo.html
Tks
June 5th, 2009 at 12:54 pm
Love the plugin but won’t be able to use it on any sites at the moment due to the nature it degrades. Usually with plugins such as these its a great way to fit in more content for SEO while presenting it cleanly to visitor. As the javascript seems to draw in the html and search engines do not run the scripts nothing in this is visible to the search engine.
Are you planning to do an inline implementation of this code? I would love it if you did as it is really slick.
June 18th, 2009 at 11:36 pm
i was fix ie bug
http://plugins.jquery.com/node/6248#comment-3714
thanx samhs for this plugin
June 21st, 2009 at 8:04 pm
There’s a new release based on all the above at plugins.jquery.com
September 17th, 2009 at 10:55 am
Just in case anybody else comes across ‘$ is not defined’ (as did wrybread), with this or any other jQuery plugins, it may be that multiple plugins are being used on the same page and jQuery.noConflict() has been called. If so, you can access the jQuery object directly instead:
jQuery(document).ready(function(){
jQuery(’#content’).slinkySlider();
});
September 17th, 2009 at 1:51 pm
Hey samhs,
SlinkySlider is Great, but it doesn’t work with IE7/IE8.
You’ve release a newer version (1.0.1) in june, but with this version, it doesn’t work with IE7/IE8 and with FF etc.
Thanks for answer
October 25th, 2009 at 8:46 pm
Hi,
I am trying to create something very similar to what this website has http://www.ems-internet.co.uk/ if you scroll down to the main page under featured work. I think they are using the slinky slider of yours. But what im not sure is how they have got the panels evenly spaced out and the transitions on there? Any advice on how to achieve this Please!!?