I must admit that I'm a very basic javascript user but somehow I found a script that works just good for me, it's a simple image slider. The problem is that the counter is really delayed when it appears, compared to the images.
Here's the part of the code I think I should work on but I have no idea how to solve this.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#images').cycle({
fx: 'fade',
next: '#images',
speed: 1000,
timeout: 0, after: onAfter });
function onAfter(curr,next,opts) {
var slide_counter = "0" + (opts.currSlide + 1) + ' / ' + "0" + opts.slideCount;
$('#slide_counter').html(slide_counter);
}
});
</script>
If someone could help it will be much appreciated.
Thank you!
Fed
Related
For the past couple of days I've been Googling and searching for solutions and have read a ton of manuals, but I'm still struggling somewhere. And yes, I'm a beginner.
So what I want to achieve is to change Slick slider dots depending on the <li class="slick-active"> element class. I've tried many options and if I'm right I need to work with on('beforeChange', function(event, slick, currentSlide, nextSlide).
What it look right now
What I want it to look(1)
What I want it to look(2)
I want that when you load the page, the first slide (the active one having <li class="slick-active">) has an SVG circle with countdown in it while others have a fully colored circle without the countdown. The countdown timer is set the same as the slides' speed (autoplaySpeed: 4000), so when it goes from 00 to 04, the next slide displays.
jQuery(function ($) {
jQuery(document).ready(function () {
// Slider and slider dots
$(".banner-slider").slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
customPaging : function() {
if ($(".slick-dots > li.slick-active")) {
return '<a class="dot">' + '<div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>' + '</a>';
}
else {
return '<a class="dot">' + 'fully colored circle without timer in it' + '</a>';
}
}
});
var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 0;
countdownNumberEl.textContent = countdown;
setInterval(function() {
countdown = ++countdown >= 4 ? 0 : countdown;
countdownNumberEl.textContent = '0' + countdown;
}, 1000); });
All those return statement tags are styled in an .scss file and <div class="banner-slider"></div> has PHP code in it.
If I run the function as it is written now, I get the countdown circles for all my slides. If i use if ($(".slick-dots > li").hasClass(".slick-active")), it returns false in console.log()
So, I'm guessing that I need to use the previously mentioned function on('beforeChange/afterChange', function(event, slick, currentSlide, nextSlide), but I can't figure how to get it to work.
I am trying to build pure javascript slider following the tutorial here with minor customisation.
The problem I had was: if I add more than 7 slides, 7th and onwards won't display correctly. Only dark grey screen is shown instead of the picture I selected.
I tried debugging for hours and still can't figure it out. Hopefully, some experts can shine some light on this problem.
JSFIddle by the author of the code: https://jsfiddle.net/solodev/yokph2nh/
Snippet of code:
function changeSlides(instant) {
if (!instant) {
animating = true;
manageControls();
$slider.addClass("animating");
$('#slide-content').addClass("animating");
$slider.css("top");
$(".slide").removeClass("active");
$(".slide-" + curSlide).addClass("active");
setTimeout(function() {
$slider.removeClass("animating");
$('#slide-content').removeClass("animating");
// Update content
let currentContent = $(".slide-" + curSlide + " .slide__content").html();
$('#slide-content').html(currentContent);
animating = false;
}, animTime);
}
window.clearTimeout(autoSlideTimeout);
$(".slider-pagi__elem").removeClass("active");
$(".slider-pagi__elem-" + curSlide).addClass("active");
$(".slider-tab__elem").removeClass("active");
$(".slider-tab__elem-" + curSlide).addClass("active");
$slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)");
$slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)");
diff = 0;
autoSlide();
}
Here is an altered fiddle of the one you posted, with more images.
https://jsfiddle.net/5xhtq4hL/
Seems to work ok.
Maybe you didn't update the css values for left on the
.slide:nthchild() selector?
This code doesn't seem very DRY though. So much copy pasting.
So, a question that I've been asking myself is how one should load more shots using the jRibbble plugin. Sadly, I couldn't find anything on this subject that makes sense to me. I've only been using JavaScript for about a week now, so I apologize if this appears clumsy. My code so far is as follows:
$(document).ready(function () {
// this is jRibbble example code if I recall correctly
$.jribbble.getShotsByPlayerId('name', function (playerShots) {
var html = [];
$.each(playerShots.shots, function (i, shot) {
html.push('<li><a href="' + shot.url + '">');
html.push('<img src="' + shot.image_url + '" alt="' + shot.title + '"></a></li>');
});
$('#grid').html(html.join(''));
}, {page: 1, per_page: 6});
$(window).on('load resize', function () {
window.shotHeight = $('#grid li').outerHeight(true);
});
});
$(window).scroll(function () {
if ($(window).scrollTop() + shotHeight > $(document).height() - $(window).height()) {
// so that there's a time buffer between the time of request and when the user reaches the bottom of the page (and thus expects new posts)
}
});
I don't think that it's necessary to mention how thankful I'd be if someone could at least provide some pointers.
Note: as I've already received a downvote I'd like to explain that I'd like to get some pointers, and not that I'm too lazy to code myself.
So, I've found the answer to my question. All I've to do is rerun the getShotsByPlayer, increasing the 'per_page' every time I do so. Then, just merge the two arrays. I should've known this.
I searched through the forum already but I can't find any way to fix the problem I have with the "effect" function in jQuery.
I get exactly the error TypeError: $(...).effect is not a function in the code :
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
I included both jQuery and jQuery UI like this in <head></head> :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
But in vain, do you have any idea? Thank you
You need to put your custom script after your jQuery and jQuery UI declarations, and wrap it within a document ready() function:
<body>
...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...
});
</script>
</body>
I do not know if the problem was solved but I found a way to replicate the shake function with the animation function and it works like a charm:
function shake() {
var div = document.getElementById('yourElementID');
var interval = 100;
var distance = 10;
var times = 4;
$(div).css('position', 'relative');
for (var iter = 0; iter < (times + 1) ; iter++) {
$(div).animate({
left: ((iter % 2 == 0 ? distance : distance * -1))
}, interval);
}
$(div).animate({ left: 0 }, interval);
}
This solution belongs to thisSite, all credits to them.
I hope this will be useful to someone in the future, if so please mark it as solution, greetings.
Add jQueryUI not just jQuery. jQuery doesn't contain the effect() function:
https://code.jquery.com/ui
Try to use
$(document).ready(function () {
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
}
For me, it turned out that my project was using a "Custom download" version of Jquery-UI which had been set to exclude the effects plugin. Replacing my version of Jquery UI with a full version fixed my issue.
Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.
Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter
});
});
function onAfter(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
in use with cycle all plugin.
thanks for any help!
so I've changed to this as instructed.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
after: onAfter1
});
});
currentSlide = $("#caption1 a.activeSlide").html()
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
which works fine after the first slide but the first slide randomly says this:
Prev Next (1/111234567891011)
Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?
if I change to this:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
});
currentSlide = $("#caption1 a.activeSlide").html()
});
</script>
It just says 12345678910 instead of 1 of etc.
Edit:
I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
pager: '.thepager',
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr, next, opts) {
currentSlide = $(".thePager a.activeSlide").html();
if (!currentSlide) currentSlide = "1";
$('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}
</script>
but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :(
and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.
EDIT!
I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
you could "fiddle" with its native navigation and get the current picture number, for example:
$('.selector').cycle({
fx: 'scrollLeft',
pager: '.selctorOfPagination',
timeout: 15000,
pause: 1,
next: '.selectorOfNext',
prev: '. selectorOfPrevious'
});
check the pager example here: http://jquery.malsup.com/cycle/int2.html
EDIT: check my example here:
http://jsfiddle.net/jackJoe/7DRSv/
You can check which is the current image by obtaining the html of the pager:
currentSlide = $(".thePager a.activeSlide").html()
And then you can use that variable which is correct and you don't need to "guess" which image is current.
EDIT 2:
Check my new example:
http://jsfiddle.net/jackJoe/7DRSv/2/
P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.
EDIT 3:
New example with a stopped animation, triggered by the next and previous buttons:
http://jsfiddle.net/jackJoe/7DRSv/3/
One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!
You need to use somekind of animation (you can specify the speed in miliseconds);
for an alternative to the "none", use the fx = 'fade' and speed: 1...