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.
Related
I combined select2 and jQuery custom content scroller libraries to get a nice, functional dropdown but for some reason I can't make it work on mouse wheel.
here is a simple code for loading components, I tried different approach as well as built in options but no luck so far
$('#testDropdown').select2();
$("span.select2-selection").on("click", function () {
$(".select2-results").toggleClass("mCustomScrollbar").attr('data-mcs-theme', 'gray-theme');
$(".select2-results").mCustomScrollbar("destroy");
$(".select2-results").mCustomScrollbar({
advanced: {
updateOnContentResize: true
},
live: true,
mouseWheel:true,
scrollInertia: 500
});
});
FIDDLE
any pointers would be appreciated
I have been trying to set up LightBox_Me for a client. The idea is for an Age Verification overlay to appear when the page loads which asks "Are you over 18?". Yes or No. Upon clicking yes, the overlay disappears.
The Overlay will fade in, but I cannot work out how to get it to fade out.
Jive Release Notes with fadeOut support
The above link shows that the there should be support for fadeOut.
I have tried implementing this into the lightbox_me.js file which is where all of the appear effects are, but to no avail.
I have also tried implementing it into my age verification script, which is:
$(window).load(function () {
// Age Verification
if(!$.cookie('legal-age')){
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
//disappearEffect: fadeOut,
//overlayDisappearSpeed: 300,
//lightboxDisappearSpeed: fast,
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});
e.preventDefault();
}
});
The code above shows the 3 lines of code that should determine the fadeout animations.
Any help would be appreciated.
Cheers
If you are using the 'latest' build (which is over two years old now), then those particular options are no longer available. They were originally added over three years ago, and subsequently removed 9 months later.
Unfortunately there doesn't appear to be a graceful built-in way to fade out a lightbox_me lightbox any longer. If you are comfortable with jQuery you could probably re-add the code that was removed from that first commit, although I suspect it was removed for good reason.
A couple of other things worth pointing out:
Unless you're using a pre-1.9.x version of jQuery, the script is going to error out around line 31 - you'll want to replace this:
ie6 = ($.browser.msie && $.browser.version < 7);
...with this:
ie6 = navigator.userAgent.match(/MSIE 6/);
And if you do intend to re-add these effects, you'll want to make sure your values for disappearEffect & lightboxDisappearSpeed are declared as strings, otherwise it will error out:
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
disappearEffect: 'fadeOut',
overlayDisappearSpeed: 300,
lightboxDisappearSpeed: 'fast',
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function() {
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});
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.
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.
I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.