For a recent project, we are using Cycle2. I've upgraded to the latest version.
We are using Sitecore to render content. No matter the approach I take (below), I cannot get autostop to function. We have 2-3 slides per slideshow, and we want it to move in the following pattern: 1-2-3-1.
Whether we render it to autoplay in rules like this:
<ul class="<%# Sitecore.Context.PageMode.IsPageEditor ? String.Empty : "cycle-slideshow" %> interior"
data-cycle-speed="3000"
data-cycle-autostop="true"
data-cycle-timeout="5000"
data-cycle-auto-height="container"
data-cycle-slides="> li" >
<sc:Placeholder runat="server" ID="SlidePlaceholder" Key="SlidePlaceholder" /></ul>
Or if we have it play programmatically in JS without the "cycle-slideshow" class:
$('#my-slideshow').cycle({
speed: 3000,
autostop: true,
timeout: 5000,
end: function() {
$('#my-slideshow').cycle('stop');
}
});
We are properly loading JQuery.
I have tried both 'true' and '1' for autostop after doing some
research o the functionality.
We are also using the Carousel and Swipe Cycle2 Libraries.
We are loading the following libraries at the same time: fancybox 2.1.4, enquire, imagesloaded jquery.ba-resize, jquery.qtip, jquery.rwdImageMaps, Slimscroll, and modernizer.
It cycles normally. We can get it to stop inline based on capturing changes of the viewport, but the standard autostop does not work. Here is a quick concole log capture (same between IE, FF, and Chrome)
[cycle2] --c2 init-- jquery.cycle2.min.js:6
[cycle2] speed: 3000 (number) jquery.cycle2.min.js:6
[cycle2] autostop: true (boolean) jquery.cycle2.min.js:6
[cycle2] timeout: 5000 (number) jquery.cycle2.min.js:6
[cycle2] autoHeight: container (string) jquery.cycle2.min.js:6
[cycle2] slides: > li (string) jquery.cycle2.min.js:6
It is demonstrating identical behavior in Raw HTML mode with static content
Additionally, I've run all the JS that launches with the page through JS Lint.
Any help / suggestions are appreciated. Thanks for your time.
Assuming you are using the Cycle2 plugin by Malsup, then the documentation for the API does not contain an option called autostop. Perhaps you mean the loop option?
loop
integer
0
The number of times an auto-advancing slideshow
should loop before terminating. If the value is less than 1 then the
slideshow will loop continuously. Set to 1 to loop once, etc.
So either:
<ul ... data-cycle-loop="1" .. /></ul>
or
var $slideshow = $('#my-slideshow');
$slideshow.cycle({
speed: 3000,
loop: 1,
timeout: 5000
});
// jump back to the first slide when loop has finished
// you might have to use setTimeout() to delay the transition back to the first slide
$slideshow.on('cycle-finished', function(event, opts) {
$slideshow.cycle('goto', 0);
});
Related
I have a TYPO3 Page where i need to get a score above 90.
For this in particular i've already set jQuery, OwlCarousel and the initating script to defer.
However, if i keep the Slider away from loading, i get a 97 Score.
If i keep it, it goes down as far as 71.
"Reduce initial response time of the server" comes around if i load it all defer.
As for my understanding, this happens because it loads the HTML and seperatly the JavaScript.
But that will make the Slider load later ofc. because the document gets first loaded.
But if i will load jQuery, OwlCarousel and the init-script without defer the score also will get to 74.
I dont see a solution here, any tipps?
var slider = '.slider-owl-268';
var tnav = true;
var amount = 1;
var dautoplay = false;
amount = parseInt(amount);
var tdots = true;
$(slider).owlCarousel({
items: amount,
lazyLoad:true,
loop: true,
margin: 15,
autoplay: dautoplay,
autoHeight: true,
nav: tnav,
dots: tdots,
fluidSpeed: 1,
responsiveClass: true
});
$( ".owl-prev").html('');
$( ".owl-next").html('');
Edit:
A Tip i might have, atleast Layout Shifting can be eleminated trough setting the Slider visible in min-height with Styles.
It does not solve the defer Problem but at least the user see's no shifting and it gives a few bonus points.
With Cache-TTL and eliminating Layout Shifting i could get a score of 96 without using defer.
I wish i could but atleast i reached my goal. Should i clouse the question #mods?
I am working on getting SlideJS running, and have some aspects of presentation and behavior in order.
One thing I haven't yet managed is to get it to automatically slide, or transition, from one slide to the next.
The code that is getting the reported error is line 67 in SlideJS's main plugin file, at the last line besides the closing brace below; my copy is at https://cjshayward.com/wp-content/Slides-SlidesJS-3/source/jquery.slides.js:
if (typeof TouchEvent !== "undefined") {
$.data(this, "touch", true);
this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
Commenting out the assignment, with my invocation, suppresses the reported error, but I think the code may want more information than this line which appears to merely halve an existing setting. I can assign, without immediate reported error,
this.options.effect['qwerty'] = 'qwerty';
But I get a similar error (i.e. setting a property of undefined), if I have as much as:
this.options.effect.slide['qwerty'] = 'qwerty';
I've tried a number of configuration options, and I can see the manual circles to click to move between slides, but have not yet managed to get an automatic transition (the plugin supports slide or fade options; I want the 'slide' effect). My present options target is:
<script>// <![CDATA[
jQuery(function(){
jQuery('#slides').slidesjs({
slide:
{
speed: 200
},
interval: 2000,
active: true,
auto: true,
effect: 'slide',
height: 528,
interval: 5000,
pauseOnHover: true,
restartDelay: 2500,
swap: false,
width: 940
});
});
// ]]></script>
In view-source:http://www.slidesjs.com/, there are multiple sample invocatiosn, but the only invocation I see after slidejs.min.js's inclusion (the last script loaded from a URL) is:
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 350,
navigation: false
});
});
</script>
Thanks,
Have look at:-
https://jsfiddle.net/5x2tqdsv/
You need to fix your html and also remove the following line:-
effect: 'slide',
There were two issues.
One was that the HTML needed fixing.
The other was that the options were being presented, flat, where the source to http://www.slidesjs.com/examples/playing/ has:
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
I presently have everything I want, besides the data initially displayed all at once before being Hijaxed (I should be able to address that several ways, and it's not my concern). Besides the HTML issue, there was another issue I had in that I was trying to use a flat dictionary to specify options when I needed to have one option/key (play) have its own dictionary as the value instead of e.g. a number or boolean as its value the way most other options appear to.
The updated JSfiddle I'm working from now is https://jsfiddle.net/ydvtynjL/
I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong?
$("#sync1 .item").on("click", function() {
var index = $(this).attr("data-slick-index");
$(".overlay-carousel-container").css("display", "block");
$("body").css("overflow", "hidden");
$("#overlayCarousel").slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
initialSlide: index,
focusOnSelect: true
});
})
$(".close").on("click", function() {
$(".overlay-carousel-container").css("display","none");
$("body").css("overflow", "inherit");
$("#overlayCarousel").slick("unslick");
$("#executiveOverlay").slick("unslick");
});
The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.
Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:
var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");
This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.
Very old
To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
Several other issues like the one mentioned here and other I found over stack flow.
The best one I resorted to for similar process is the one mentioned here
it's latest
and comes with a simple tutorial as well
Recommended for new beginner developers.
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: '/'});
}
});
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.