 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
weedman
Joined: 29 Jul 2009
Posts: 44
|
 Posted: Mon Apr 26, 2010 3:26 pm Help with JQuery |
 |
|
|
I downloaded this plugin, but the demo.html file doesnt work when i launch it from a server or from my computer. I contacted the author on several occassions, but never gota reply. Can anyone help?
http://plugins.jquery.com/project/slinkySlider |
|
sticks464
Joined: 31 Dec 2006
Posts: 2951
|
| Posted: Mon Apr 26, 2010 3:37 pm |
|
|
|
| How about posting the code your using on your page (that doesn't work). It's hard to diagnose a coding problem without seeing the code. |
|
weedman
Joined: 29 Jul 2009
Posts: 44
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2951
|
| Posted: Mon Apr 26, 2010 8:41 pm |
|
|
|
This is the script from the online demo, replace the downloaded version with the following.
slinkySlider.js
| Code: |
/*
# jQuery Slinky Slider Plugin
# ---------------------------
# Version: 1.0
# ---------------------------
# Author: samhs
# http://ohwrite.co.uk/jquery/jquery-plugin-slinky-slider/
# http://docs.jquery.com/Plugins/SlinkySlider
#
# Copyright (c) 2009 Sam Hampton-Smith
#
# Dual licensed under the MIT and GPL licenses:
# http://www.opensource.org/licenses/mit-license.php
# http://www.gnu.org/licenses/gpl.html
#
# Please view files mit.txt and gpl.txt for full license terms
# And include these two files if you redistribute this software
*/
(function($) {
$.fn.slinkySlider = function(settings) {
// Utility variables - do not alter
var currentpanel;
var panelwidth;
var goforward = true;
var t;
settings = $.extend({}, $.fn.slinkySlider.defaults, settings);
return $(this).each(function(){
panelwidth = $(this).width();
$(this).css("overflow","hidden");
settings.largesize = panelwidth-((settings.numberofpanels-1)*(settings.smallsize+settings.panelspacing));
container = $(this);
elheight = container.height();
for (var i=1;i<=settings.numberofpanels;i++) {
$(container).append("<div class='panelwrappers'><div class='panel'></div></div>");
$(".panelwrappers:last .panel").load(settings.panelname+i+".html").parents(".panelwrappers").data("number",i);
}
currentpanel = $(".panelwrappers:first");
$(".panelwrappers").css({
"width" : settings.smallsize+"px",
"float" : "left",
"height" : elheight+"px"});
$(".panels").css({
"width" : settings.largesize+"px",
"height" : "100%"});
$(currentpanel).css("width",settings.largesize+"px");
$(".panelwrappers").not(":last").css("margin-right",settings.panelspacing+"px");
$(".panelwrappers").each(function(){
$(this).mouseover(function(){switchpanel(this);});
});
if (settings.doauto) t = setTimeout(function(){switchpanel(null);},settings.autotimer);
});
function switchpanel(newpanel) {
if (newpanel==currentpanel) {
// do nothing because we're already on this panel
} else {
var auto = false;
if (newpanel==null) {
auto = true;
if (goforward && $(currentpanel).data("number")==settings.numberofpanels) {
goforward=false;
}
if (!goforward && $(currentpanel).data("number")==1) {
goforward=true;
}
if (goforward) {
newpanel = $(currentpanel).next();
} else {
newpanel = $(currentpanel).prev();
}
}
else {
$(".panelwrappers").stop();
clearTimeout(t);
}
$(".panelwrappers").not(newpanel).animate({width: settings.smallsize+"px"},settings.transition, "swing");
$(newpanel).animate({width: settings.largesize+"px"},settings.transition, "swing");
currentpanel = newpanel;
if (auto) t = setTimeout(function(){switchpanel(null);},settings.autotimer);
}
}
}
$.fn.slinkySlider.defaults = {
autotimer:8000,
transition:1000,
panelspacing:3,
smallsize:20,
numberofpanels:5,
largesize:0,
doauto:true,
panelname:"panel"
}
})(jQuery); |
And to make things simpler, I did away with the unnecessary demo.html code and made it auto play. Also using Googles library of jQuery scripts (newest version) so a copy does not have to be on my computer or loaded to the server.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slinky Slider Demonstration</title>
<style>
body {
font-family: arial, helv, sans-serif;
background: black;
color: black;
font-size: 80%;
}
#content {
width: 600px;
height: 300px;
padding: 3px;
background: black;
}
.panelwrappers {
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slinkySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#content").slinkySlider({
numberofpanels : 5, // number of panels to load
smallsize : 20, // size in pixels of collapsed panel
transition : 1000, // time in milliseconds for transition
doauto : true, // automatic timed animation? true/false
autotimer : 5000, // time between automatic animations
panelspacing : 3, // gap between collapsed panels
panelname : "panel" // sets the HTML filename (means filename will be "panel[x].html")
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html> |
|
|
weedman
Joined: 29 Jul 2009
Posts: 44
|
| Posted: Tue Apr 27, 2010 6:12 am |
|
|
|
| Thanks for that. Can you tell me why it wasnt working before? And, can you tell me how i would go about putting code into these panels? |
|
sticks464
Joined: 31 Dec 2006
Posts: 2951
|
| Posted: Tue Apr 27, 2010 8:34 am |
|
|
|
I did not do a comparison of scripts to see what was causing it not to work. See it in action.
You have to make new images or modify the ones that come with the demo. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
