Develop Reference

Error Unexpected end of input with the correct brackets

I write to gallery and a script for her. An error Unexpected end of input occurs, and I don't know how to fix it.
One of the options offered by Google was a problem with the brackets.
'Brackets checked several times'. A similar code worked earlier. With what it can be connected and how to fix it?
(function () {
var $window = $(window),
flexslider;
function getGridSize() {
return (window.innerWidth < 600) ? 3 :
(window.innerWidth < 900) ? 4 :
(window.innerWidth > 900) ? 6 : 7;
}
$(function () {
SyntaxHighlighter.all();
});
$(window).load(function () {
var flexslider ='';
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 110,
itemMargin: 5,
asNavFor: '#slider',
minItems: getGridSize(),
maxItems: getGridSize()
});
$('#slider').flexslider({
animation: "slide",
slideshowSpeed: 3000,
controlNav: false,
animationLoop: false,
//slideshow: false,
sync: "#carousel",
start: function (slider) {
if(window.innerWidth <= 800){
jQuery(".slides").removeClass("adjusted_width");
}
jQuery('.icon-pause').click(function () {
jQuery(this).hide();
jQuery('.icon-play').show();
slider.pause();
});
jQuery('.icon-play').click(function () {
jQuery(this).hide();
jQuery('.icon-pause').show();
slider.play();
});
}
});
});
$window.resize(function () {
var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
}());

I think something missing in first line before (function () {
OR
in lastline }()); its should be }(jQuery)); if this code for custom jQuery plugin.

May be you forget </script> at the end of your script?
In such cases use IDE like WebStorm, it will show you when you're wrong.
Also your code invokes outer functions like SyntaxHighlighter (with possible errors there). See error stack.

Thanks for answers. Nothing helped.
I hate those moments, but it is no reason earned.
I'm shocked

jQuery Waypoints not firing at correct location

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.
I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.
// first-flexslider
$(window).load(function() {
$('#firstSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: true,
});
});
// second-flexslider
$(window).load(function() {
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
});
});
$('.prev, .next').on('click', function() {
var href = $(this).attr('href');
$('#secondSlider').flexslider(href)
return false;
})
$(document).ready(function(){
$.waypoints('refresh');
});
// waypoints
$(document).ready(function() {
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInUpD');
}, {
offset: '75%'
});
});
I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.

Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
I would check out the after callback and possibly the start callback and call refresh from there. For example:
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
after: function() {
$.waypoints('refresh');
}
});

Show next Slide for current .flexslider only

I was hoping someone could help me modify the following piece of jQuery script to only go to the next slide for the object clicked and not all instances of .flexslider on my page
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
$('.slides li').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});
At the moment if i click any li element within .flexslider all my sliders change. I only want to select the slider i am clicking
EDIT
I have put in a
console.log(slider);
to see if it is finding each slider, the output is
div#flexslider_5.flexslider
div#flexslider_6.flexslider
So it has found both
Thanks

Small tweak to my existing setup has it working, thought i would post this incase it helps someone else
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
slider.find('.slides').click(function(event){ // Added slider.find('.slides')
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});

bxSlider not working automatically

I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?

You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!

This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.

This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});

Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)

Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!

This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});

I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});

How to show the next slide when you click on the image in flexslider

I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer)
to show the next slide when you click on the current slide. I set up the flexslider like this
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
I disabled the Prev/Next command because i didn't like them. What should i do?

Maybe a little bit too late, but here's the solution for Flexslider 2:
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});

I had a Safari problem with the code above. This is my easy solution.
jQuery( document ).ready( function( $ ) {
$('.flexslider').on('click', function(){
$(this).find('.flex-next').click();
});
}
$(window).load(function() {
// Slider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
});

Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page:
$('.flexslider').flexslider({
start: function(slider) {
$('.slides li img', slider).click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});

After each slider animation completes, find the active slide and change the image src
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
touch: true,
itemWidth: 235,
itemMargin: 10,
after: function (slider) {
$(slider).find('.flex-active-slide').find("img").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
});