I am using http://responsiveslides.com/ to build a slideshow with custom navigation. I would love this navigation to run through once and then stop back at the first one. Any ideas on how to do this? This my JS for it (basically taken from their docs...).
Thanks in advance!
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: true, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: ".slider", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: ".types-home", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){
}, // Function: Before callback
after: function(){
} // Function: After callback
});
Related
how to start swiper Autoplay when user scroll to swiper wrapper id
It usually runs automatically when opening the page
how can i control autoplay events ?
This is example:
https://codepen.io/elostoracom/pen/ExgRNvP
And here is the js code
new Vue({
el: ".home-slider",
data() {
return {
homeSwiper: "",
};
},
mounted() {
this.homeSwiper = new Swiper(".home-slider", {
updateOnWindowResize: true,
loop: true,
slidesPerView: 1.5,
spaceBetween: 10,
speed: 500,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
}
})
how can i control autoplay events ?
You can use swiper.autoplay.start() to start the autoplay and swiper.autoplay.stop() to stop the auto play imperatively.
how to start swiper Autoplay when user scroll to swiper wrapper id It usually runs automatically when opening the page
Intersection Observer lets you know when an element is in view. It's got a good support in the (modern) browsers, but if you want it to work in all browsers, you can use the polyfill.
Here is a codepen
I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.
<script type="text/javascript">
if (Modernizr.touch) {
$(".scroll-banner").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
} else {
$(".scroll-banner").smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
</script>
How do I get two plugins to use the same selector?
is it possible to use it this way:
$(document).ready(function() {
var scrollbanner = $(".scroll-banner");
scrollbanner.smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
scrollbanner.lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?
I have a (royal)slider, I need to use the next/prev nav buttons to be out of the slider div.
Lets say I have the navigation nav buttons in my footer.
<div class="my-prev-button"></div>
<div class="my-next-button"></div>
Here is some documentation but I don't know how to use this!
http://dimsemenov.com/plugins/royal-slider/documentation/#api
How can I make these two buttons work with the slider (while it is outside)
<script id="addJS">
jQuery(document).ready(function($) {
$('#slider-with-blocks').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'none',
imageScaleMod: 'none',
autoScaleSlider: false,
imageScalePadding: 0,
slidesSpacing: 0,
autoHeight: false,
blockLoop: true,
loop: true,
numImagesToPreload: 4,
transitionType: 'fade',
autoPlay: {
enabled: true,
pauseOnHover: false,
},
block: {
delay: 400
}
});
});
</script>
<div class="slider">
<div id="slider-with-blocks" class="royalSlider rsMinW">
<div class="rsContent" data-rsDelay="5000">
some div and img here..
</div>
</div>
</div>
Style your Next and Previous div's as per your need and use below code after initializing royal-slider:
// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
slider.prev();
});
$('.my-next-button').on('click', function(){
slider.next();
});
You can find more API's here
http://dimsemenov.com/plugins/royal-slider/documentation/#api
here an example of the solution:
http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/
I am using jCarousel to show a list of items. Lets say there are 8 items. I am showing 4, waiting 10 seconds, then scrolling to show the last 4. I'd like it to then show the first four and then throw a trigger that tells it to rebind data. The items would update and continue cycling like this.
These items are being loaded through jquery.load [ajax]. I want the items to rebind after they all show. It'd be even better if I could get them to rebind after cycling twice. I was rebinding the data using setInterval (time based), but I'd like it to be dynamic so I don't have to change the javascript timer later down the road when more items are added.
My calling code looks like this:
$(document).ready(function () {
updateConsoles();
$("#tableapp").ajaxStop(function () {
scrollwindow();
});
});
function updateConsoles() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4
});
};
Ideally I am looking to be able to add something like:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
whenFinishedCyclingItems: updateConsoles()
});
};
I am pretty new to javascript and jQuery.
It looks like jCarouselLite has an afterEnd function.
So you should be able to do something like this:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
afterEnd: updateConsoles()
});
};
I'm not positive if you'd have to wrap that function inside another function or not, but just in case, the code would be:
afterEnd: function(){updateConsoles();}
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.