I purchased a slider plugin called MightySlider http://codecanyon.net/item/mightyslider-responsive-multipurpose-slider/5898508 I need a simple automated carousel that scrolls smoothly from the beginning to the end and then either loops or reverses direction. I've played with the settings enough to allow for a smooth scroll from beginning to end by setting the 'speed' and the 'cycling: {pauseTime}' parameters to be equal. No I have a delay of 20s (equal to the speed of the slider).
It's a long shot but can anyone help with the parameters to this or help me write a javascript hack to trigger the slider to start moving on page load or 1-2s after? Alternatively, could anyone recommend a different slider?
Site is here: http://smmcnyc.com/work/1919market/
JSFiddle is here: https://jsfiddle.net/fhhdxnum/
$(".frame").mightySlider({
// Mixed options
moveBy: 9000, // Speed in pixels per second used by forward and backward buttons.
speed: 20000, // Animations speed in milliseconds. 0 to disable animations.
easing: 'linear', // Easing for duration based (tweening) animations.
startAt: 10000, // Starting offset in slides.
startRandom: 0, // Starting offset in slides randomly, where: 1 = random, 0 = disable.
viewport: 'fill', // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
autoScale: 0, // Automatically updates slider height based on base width.
autoResize: 0, // Auto resize the slider when active slide is bigger than slider FRAME.
videoFrame: null, // The URL of the video frame to play videos with your custom player.
preloadMode: 'nearby', // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.
// Scrolling
scrolling: {
scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 0, // Slides to move per one mouse scroll. 0 to disable scrolling.
hijack: 300 // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
},
// Pages
pages: {
pagesBar: null, // Selector or DOM element for pages bar container.
activateOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
}
},
// Automated cycling
cycling: {
cycleBy: 'pages', // Enable automatic cycling by 'slides' or 'pages'.
pauseTime: 20000, // Delay between cycles in milliseconds.
loop: 1, // Repeat cycling when last slide/page is activated.
pauseOnHover: 0, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0 // Whether to start in paused sate.
},
});
Advice or a workaround would be very helpful!
Try nivo slider.
If you bought slider you can ask the customer support to do this.
Change cycling pouse time:
cycling: {
cycleBy: 'pages',
pauseTime: 1000,
or if this does not suit you:
I'm not sure if this is the best way, but this is how you can do this.
You will need to edit mightyslider.js
scroll down to function requestHandler and after timestamp=_now(); add (line ~2728) . These lines will start slide cycling if onLoadStart is true.
if(o.cycling.onLoadStart){
o.cycling.onLoadStart += -50;
if(o.cycling.onLoadStart == 0 || o.cycling.onLoadStart == true){
cyclingActivate();
o.cycling.onLoadStart = false;
}
}
add this value into mightySlider.defaults array line ~6648
// Automated cycling
cycling: {
.........................
startPaused: false,
onLoadStart: true
}
now you can pass in additional option into mightySlider
$(".frame").mightySlider({
........
// Automated cycling
cycling: {
..........
startPaused: 0,
onLoadStart: 1000 // true -- start immediately after load,
// false --- with delayed start,
// or enter time in miliseconds which is iess than delayed start.
}
...............
});
Related
I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
I've also tried both of the following:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();
Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.
It is using translate3d on the following div in question...
<div class="main onepage-wrapper">
With the following modified styles as the plugin operates...
-webkit-transform: translate3d(0px, -100%, 0px);
This answer may be of use to you...
Get translate3d values of a div?
To know current index of section:
var nCurSect = $("section.active", ".main").data("index");
Then you can just multiply it to the screen height and get offset.
I have a horizontal scrolling carousel:
_gotoNext: function (that) {
//tjobbe - put funciton here to check if there is anything else after the last slide, then stop / disable the gotonext. must only scroll one if only one is available (or 2). same for go to prev
that.$element.find('.mediaCarousel').trigger("next", false);
},
//This method tells the mediaCarousel to go to the previous slide.
_gotoPrev: function(that, callback) {
that.$element.find('.mediaCarousel').trigger("prev", false);
},
http://jsfiddle.net/YVCTx/
I need it to STOP or at least disable the next button when it gets to the last item. If there is an un-even number I also need it to only scroll one or two items, or let it do the full three.
My current code doesn't seem to be paying attention to the built in "infinite: true (or false)" option.
For example, I have 7 items at the moment, and I scroll 3 at a time. I'd like to stop at the third scroll, so that the second scroll only goes as for as the items in the list.
Any ideas if this is possible?
It seems that there is a circular and an infinite option which you can set.
I would imagine one of those would do what you want (most probably the infinite one):
$('#carousel').carouFredSel({
circular: true, // Determines whether the carousel should be circular.
infinite: true, // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
responsive: false, // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
direction: "left", // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
width: null, // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
height: null, // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
align: "center", // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
padding: null, // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
synchronise: null, // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
cookie: false, // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
onCreate: null // Function that will be called after the carousel has been created. Receives a map of all data.
});
Source: documentation
I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE.
The link is here http://www.secureshop.gr/POOL/citycars/website
Thank you in advance.
Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.
As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: '', // Prev directionNav text
nextText: '', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
</body>
I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82
I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.
Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter
There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });
I have a vertical javascript marquee on my website (http://blogandthecity.net). I want it to be stuck at the screen. I think it is called "fixed". Right now the marquee stops at a certain point, but I want it to be the size of the whole screen/website.
I think there are two options:
1. make the marquee as long as possible (However some webpages are longer than others. And I don't know how I can make the marquee longer. I already tried some things)
2. make the position fixed. (I tried to put "position: fixed" in the code, but the result is that the marquee doesn't scroll anymore. So the movement stops. And the marquee doesn't fit the screen either..)
Do you know how I can solve this problem? If you need the css style, I will put it here too.
Below the code (I excluded the text part):
<script type="text/javascript" src="http://blogandthecity.net/js/marquee-packed.js" ></script>
<script type="text/javascript">
//create instance and call method horizontal for horizontal scrolling
var horizontal = new marquee("marquee").horizontal(
{
step:1, //how many pixels to move per interval (default: 1)
interval: 40, //how often to move pixels in miliseconds (default: 10)
stop_on_hover: true, //should marquee stop on mouse hover (default: true)
backwards: false, //rotate elements in opposite direction
});
<script type="text/javascript">
//create instance and call method horizontal for horizontal scrolling
var horizontal = new marquee("marquee2").horizontal(
{
step:1, //how many pixels to move per interval (default: 1)
interval: 40, //how often to move pixels in miliseconds (default: 10)
stop_on_hover: true, //should marquee stop on mouse hover (default: true)
backwards: false, //rotate elements in opposite direction
});
It is called position:fixed; Below the css for your marquees scrolling down and being full screen. You may need to go jQuery since they are styled inline (or modify the html?)
#marquee, #marquee2 {
position:fixed;
}
#marquee {
margin-top:140px;
}
#marquee2 {
margin-left:-520px;
}