WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => jQuery => Topic started by: Boudi on September 30, 2010, 10:05:51 PM
-
Hi there,
I want to use the Sudoslider because there are different slide methods to choose from.
And here is where my problem starts. I would like to use the auto-fade option of the Sudoslider. See [link removed].
This option however is not the standard slider-type of the Sudoslider. So my question is where I can implement the piece of code into the .js file in order to get the auto-fade of the Sudoslider working? It's not mentioned anywhere and I looked everywhere :(.
Hope for an answer.
Greetz,
Boudi
-
try this in your template.....
<script type="text/javascript">
$(document).ready(function(){
$("#slider11").sudoSlider({
prevNext: false,
fade: true,
auto:true
});
});
</script>
it's exactly mentioned how it should work....like other jQuery Plugins, too.
always the same you need a js file, a HTML Markup -> and the "jQuery Call" for Setup the Plugin as a script....
you could use the jQueryAdmin to collect, administrate your Plugins and it is very easy to create a own Preset to use it on every WB Installation you wish and "recycle" it easy with no additonal work for example on a new project.
regards martin
-
Hi Martin,
Thnq for responding! For me it wasn't clear to insert that js code into the template. But now I did it and it works!
But....the standard slider still works too. So what you get now are the auto-fade slider and standard slider together.
I checked and changed some things in the optionslist but still I end up with the same result as mentioned above.
Example [link removed]
So for now I'm stucked. :(
Any help would be appreciated.
Boudi
-
so thanks for the link....that would be prevent issues....from the first post.
I see you use jQueryAdmin right now!
So delete the JS Code in your Template....it is the manual way to setup a jquery plug
......with JQA all is to install the jQueryAdmin Plugin from AMASP and setup the Plugin right in the jQueryAdmin backend! nothing to do in the Template....
you could setup by clicking on the little wheel next to the installed JQA Plugin.....to change fade:true instead of false...
just play a little bit with these settings - be shure the HTML Markup was ready for the JS?
regards martin
-
Hi Martin,
May be I was not clear enough. My mistake. Sorry :S
But I already did several websites with the jquery admin which is working fine :)
I already checked the configuration of the Sudoslider as you mentioned. But there it's not possible to create another Sudoslider type. That's why I'm stucked because I want to use a different style of the Sudoslider and that is where my road ends...I just cannot get another style of the Sudoslider working, only the basic slider type regardless which options you fill in in the jquery admin, sudoslider.
Boudi
-
just play a little bit with these settings - be shure the HTML Markup was ready for the JS?
ok my fault.....you need two sliders on one page!???
then it could function with the existing PRESET!
there is only _one_ CSS id that you could use:
look at the loader.preset file in the Plugin folder in your installation there goes the setup for the backend settings:
$("#slider11").sudoSlider({
prevNext: false, // prevNext
prevHtml: '<a href="#" class="prevBtn"> previous </a>',
nextHtml: '<a href="#" class="nextBtn"> next </a>',
controlsShow: true, // controlsShow
controlsAttr: 'id="controls"',
controlsFadeSpeed: '400', //controlsFadeSpeed
controlsFade: true, // controlsFade
insertAfter: true, // insertAfter
firstShow: false, // firstShow
firstHtml: '<a href="#" class="firstBtn"> first </a>',
lastShow: false, // lastShow
lastHtml: '<a href="#" class="lastBtn"> last </a>',
numericAttr: 'class="controls"',
numericText: ['1'],
vertical: false, //vertical
speed: '800', //speed
ease: 'swing', //ease
auto: true, //auto
pause: '2000', //pause
continuous: false, //continuous
clickableAni: false, //clickableAni
numeric: false, //numeric
updateBefore: false, //updateBefore
history: false, //history
speedhistory: '400', //speedhistory
autoheight: true, //autoheight
customLink: false, //customLink
fade: false, //fade
crossFade: true, //crossFade
fadespeed: '1000', //fadespeed
ajax: false, //ajax
loadingText: false, //loadingText
preloadAjax: false, //preloadAjax
startSlide: false, //startSlide
imgAjaxFunction: false, //imgAjaxFunction
docAjaxFunction: false, //docAjaxFunction
beforeAniFunc: false, //beforeAniFunc
afterAniFunc: false, //afterAniFunc
uncurrentFunc: false, //uncurrentFunc
currentFunc: false //currentFunc
});
you could use #slider11 on your HTML but not twice like you know!
but you could add the same code with different #id to the loader.preset to have two sliders getting run....
hope this helps now...;)
regards martin
-
No, I just need 1 sudoslider. But then in auto-fade mode instead of the basic slide mode. :)
The code that I see in the .js file is:
(function($)
{
$.fn.sudoSlider = function(options)
{
if (typeof(options) != 'object' && options != '' && options)
{
// Here, i just trigger it to do something, it's way down the actual action happens.
return this.each(function(){
$(this).trigger("sudoSliderEvent", [options]);
});
}
else
{
// default configuration properties
var defaults = {
prevNext: false,
prevHtml: '<a href="#" class="prevBtn"> previous </a>',
nextHtml: '<a href="#" class="nextBtn"> next </a>',
controlsShow: false,
controlsAttr: 'id="controls"',
controlsFadeSpeed: '400',
controlsFade: false,
insertAfter: true,
firstShow: false,
firstHtml: '<a href="#" class="firstBtn"> first </a>',
lastShow: false,
lastHtml: '<a href="#" class="lastBtn"> last </a>',
numericAttr: 'class="controls"',
numericText: ['1'],
vertical: false,
speed: '800',
ease: 'swing',
auto: false,
pause: '2000',
continuous: false,
clickableAni: false,
numeric: false,
updateBefore: false,
history: false,
speedhistory: '400',
autoheight: true,
customLink: false,
fade: false,
crossFade: false,
fadespeed: '1000',
ajax: false,
loadingText: false,
preloadAjax: false,
startSlide: false,
imgAjaxFunction: false,
docAjaxFunction: false,
beforeAniFunc: false,
afterAniFunc: false,
uncurrentFunc: false,
currentFunc: false
};
var options = $.extend(defaults, options);
-
No one? :cry:
-
No one? :cry:
like i wrote.....delete the "manual" injected Template jQuery call!....delete the second "don't needed slider" two sliders one id = problems!
then edit the settings of the slider! or change the loader.preset or default.preset in the jqueryAdmin Plugin itself!
....first clean up the tesenvironment...th en take a breath....then do the right settings....
with my example you couldt see thatit have to work as expected....it's only a little settingsproblem
regards martin
-
....first clean up the tesenvironment...th en take a breath....then do the right settings....
You're totally right! What I did was doing 20 steps at the same time. I totally read your previous post wrong.
I'm sorry to put you in extra work right now. But....it's working!
ThnQ very much.
Boudi