Configuring 2 javascript sliders on 1 page - javascript

I know only CSS and little to no Javascript so I need some help here. I have 2 pikachoose sliders:
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame2").PikaChoose();
});
Both are autosliding as is set in javascript:
(function ($) {
var defaults = {
autoPlay: true,
speed: 5000,
How can I set #pikame2 to stop autoslide? I guess I have to set autoplay false or speed to 100k, but I don't know how to specifiy that it would only do that to the 2nd slider. Thanks!

You can pass the options in each call of the plugin, like this:
$("#pikame").PikaChoose({autoPlay:true});
$("#pikame2").PikaChoose({autoPlay:false});

$("#pikame2").PikaChoose ({autoplay: false})
You can pass options into each init call.

Related

How to change Javascript carousel (slick.js) settings on one page only?

I'm using Slick carousel by Ken Wheeler. I set the global settings (for the whole site) to autoplay slides like this:
autoplay: true,
autoplaySpeed: 5000,
but on one page on the site I don't want it to autoplay.
Is there any way I can override this global setting using an inline script?
Something like this:
<script>
function (iSuckAtJavaScript) {
autoplay: false,
};
</script>
?? Thank you!
There are a number of ways you could approach it depending on how your site is set up and how the plugin gets initialized. But to fill in the iSuckAtJavaScript part of your question, you could match on a specific path/page like this.
if (window.location.pathname === '/no-autoplay-page.html') {
// Initialize the carousel
}

SlideTabs for Wordpress autoheight

IF anyone is familiar with slidetbas for wordpress can you please help me out.
It there a way to autoheight the content viewer based on the active tab?
I tried to add something like this:
jQuery(document).ready(function () {
jQuery("#slidetabs_983").setContentHeight();
});
to the javascript for my particular slidetab (ID 983) but that didn't work.
http://www.slidetabs.com/ is their website and you can see a demo on there.
thanks
use autoHeight: true to slider tab setting
jQuery(document).ready(function () {
jQuery("#slidetabs_983").slidetabs({
// Define any options below
autoHeight: true
});
});

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex
You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});
you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

In JQuery Cycle how do you get the src of the current slide?

Im trying to work out the way to find the source of the current slide using JQuery cycle. I will be taking the source and using it to match the background image of another div using the 'after' method, it will change with each slide. This is what I have so far, all I need is to correct the var slideURL:
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL = currSlide.content.find('img').attr('src');
Thanks in advance!
you can get the current source like this
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL =this.src;
}
http://jsfiddle.net/dWstA/

Stop and Start controls for jquery innerfade

I am trying to control this animation with a stop and start button. Does anyone know how to accomplish this without using the cycle plugin?
<script type="text/javascript">
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 9000,
timeout: 5000,
type: 'sequence',
containerheight: '100%'
});
});
link: http://daveywhitney.com/ok/
not sure what you mean but theres is a stop() function you can use, and then recall the animation func
Edit: I found this page using the plugin, which very nice, and includes a pause func. See the example #2, the bgFrame: 'squelettes/img/frame.png' I guess you may like to photoshop some nicer controls, but keep in mind to use the same dimensions, in order to implement it simply and fast.

Categories

Resources