We Keep Coding

lightSlider plugin not working on first time load

I make the slider on my website using lightSlider,below html code i am using (note that i am using asp.net mvc) and i am using loop in load images
<ul id="imageGallery">
#foreach (var i in Model.Images)
{
<li data-thumb="#i" data-src="#i">
<img src="#i" />
</li>
}
</ul>
and here is code jquery to load my slider
$(document).ready(function () {
$('#imageGallery').lightSlider({
gallery: true,
item: 1,
thumbItem: 9,
slideMargin: 0,
speed: 500,
auto: true,
loop: true,
onSliderLoad: function () {
$('#imageGallery').removeClass('cS-hidden');
}
});
});
So my problem is slider displaying not correctly in the first time
Please see my slider is loaded here slider
But when i reload the page it is working correctly.
I am not sure what am i missing here?

"bxslider jquery" change the slide mode at specified width

like the title i'm using bxslider at my website, actually i'm using vertical thumbnail slide now, but the problem is, it's look ugly when at mobile width, so i want to change it like normal slider with arrow. can you help me how to do that? here is the things i want:
1. at normal using vertical thumb slide
2. when the width triggered at specify width, the thumb is hide (maybe display none at css)
3. Do destroyslider for stopping the vertical thumb slider and change it to normal slider with arrow
4. when the width is normal again, it will switch again to vertical thumb slider
ok here is my jquery:
var mainImage;
$(window).load(function() {
mainImage = $('.product-gallery').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
controls: false,
auto: false,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
mode: 'fade',
adaptiveHeight: true
});
$('.product-gallery-thumbs ul').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
auto: false,
minSlides: 4,
maxSlides: 4,
moveSlides: 1,
slideWidth: '100%',
mode: "#{options['product_thumbnail_direction']}",
slideMargin: 10,
onSliderLoad: function(currentIndex) {
$('.product-gallery-thumbs ul li').eq(0).addClass('active')
}
});
$('.product-gallery-thumbs ul li').each(function() {
$(this).click(function() {
$(this).addClass('active').siblings().removeClass('active');
mainImage.goToSlide($(this).index());
});
});
});
when do destroy :
mainImage.destroySlider();
here is normal slider with arrow:
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
UPDATE :
I try to did this, when do destroy is work, but when switching to normal arrow slider it doesn't work. Hope you guys can help me fix this
$(document).ready(function(){
setMaxWidth(767px);
mainImage.destroySlider();
function setMaxWidth(767px) {
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
})

bx.reloadSlider() Method
The method destroySlider() returns bxSlider as it was initially so don't use it if you want to change bxSlider after a reload, instead use reloadSlider(). Besides the obvious (reloading bxSlider), you can load a different set of options. Note: There are 2 Object Literals:
var cfgA = {...} and var cfgB = {...}
Each of them has key/value pairs (or properties) that are from the bxSlider API. When calling .bxSlider(), simply load one of configurations:
var bx = $('.bx').bxSlider(cfgA);
onSliderResize Callback
As far as slider plugins go, bxSlider isn't the most stable and it can get buggy as browsers update and bxSlider stagnates at v.4.2.12, but there's one thing bxSlider excels in is callbacks. I've written complex programs that are controlled by bxSlider callbacks because they are reliable and never break. In this demo onSliderResize call the function reloadBX(currentIndex). **Note: ** the absence of parenthesis on reloadBX():
onSliderResize: reloadBX
reloadBX(currentIndex)
This is the heart of the Demo. For demonstration purposes I've bound the function to a convenient button. When testing the Demo, you should expect the following by either clicking the RELOAD button, or resizing bxSlider:
Toggling between cfgA and cfgB
Relocates to the position index bxSlider was on before the reload.
Shifts images to adjust at reload to avoid images being stuck halfway.
Details commented in Demo
Demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bxSlider Reload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
img {
margin: auto;
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<button class='reload'>RELOAD</button>
<ul class='bx'>
<li>
<img src="https://i.imgur.com/DrEwPH0.jpg">
<img src="https://i.imgur.com/MEPxbq4.jpg">
</li>
<li>
<img src="https://i.imgur.com/6qGdA1e.gif">
</li>
<li>
<img src='https://i.imgur.com/DsM6J8U.gif'>
</li>
<li>
<img src="https://i.imgur.com/sbxyLKX.png">
</li>
<li>
<img src="https://i.imgur.com/DheohWR.gif">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
// Cfg flag
var AB = 'A';
// Index counter
var idx = 0;
// cfgA
var cfgA = {
mode: 'horizontal',
slideWidth: 320,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// cfgB
var cfgB = {
mode: 'fade',
captions: true,
slideWidth: 160,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// Reference bxSlider instance
var bx = $('.bx').bxSlider(cfgA);
/*
Resize Callback
*/ // Called on resize event
function reloadBX(current) {
// Store current index
idx = current;
// Determine what configuration bx is in
if (AB === "A") {
/* if bx is in cfgA...
|| reload slider with cfgB
*/
bx.reloadSlider(cfgB);
// Shift all img to the left
$('img').css('transform', 'translateX(-25%)');
// Switch cfg flag to B
AB = "B";
// Otherwise...
} else {
// Reload slider with cfgA
bx.reloadSlider(cfgA);
// Shift all img to the right
$('img').css('transform', 'translateX(0)');
// Switch cfg flag to A
AB = "A";
}
// Go back to the index before reload
bx.goToSlide(idx);
}
// Added a reload button for convenient testing
$('.reload').click(function(e) {
// Get the current index and store it
idx = bx.getCurrentSlide();
/* Need to use the .call() function so that the context
|| is changed to bxSlider
*/
reloadBX.call(this, idx);
});
</script>
</body>
</html>

Very new to Jquery. Trying to create a Photoset grid

I am new to Jquery, and I am trying to figure out to create a Photo set grid that when you click the pictures get bigger using a jquery plugin that I found online. My code looks like this.
<script>
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function() {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
</head>
<body>
<div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
<img src="images/InspirationalQuote.jpg" />
<img src="images/jakachu-tiger.jpg" />
<img src="images/Japanese_Painting_by_trinifellah.jpg" />
</div>
The link to the plugin:
http://stylehatch.github.io/photoset-grid/
Any help would be gladly accepted. Thank you!
EDIT: Here is a link to the jsfiddle http://jsfiddle.net/DamianG/6UjsB/

Assuming this is the end result you're looking for, you need to make sure:
Your jQuery library is included in the of your document
Your photoset-grid JS is included in the of your document, after
jQuery
Then, include the following, wrapped in jQuery's document.ready check, as #pl4g4 suggested, included afterwards:
<script type="text/javascript">
$(function() {
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function () {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight: '90%',
maxWidth: '90%'
});
}
});
});
</script>
I'm guessing the photoset-grid didn't load? This would be because the contents of your element get loaded first, then whatever's in the body. By wrapping your code with
$(document).ready( function() { /* your code here */ });
or the shorthand
$(function(){ /* your code here */ });
You ensure the browser reads your javascript, but defers running your $.photosetGrid() block of code until after the HTML of the page has been rendered. Otherwise, jQuery can't see the Document Object Model, so $('.photoset-grid-lightbox').length will return 0 - there's no such element on the page, as demonstrated here.
A bit more info on jQuery(document).ready();

Add current slide body class on slide change

I'm using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1
My current code is;
<script>
$(function(){
$('#feature-slideshow').slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
animationStart: function() {
$("body").addClass("slide");
}
});
});
</script>
I have two problems;
1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow
2) How to increment the slide-x class when the slideshow is transitioned/changed.
Any help would be greatly appreciated

Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.
To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
currentClass: "current"
animationStart: function() {
var idx = slideshow.children(".current").index();
document.body.className = "slide-"+(idx+1);
}
});
});

Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list 'pagination' which had the current class applied;
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: false,
currentClass: "current",
animationStart: function() {
var idx = $('ul.pagination').children(".current").index();
document.body.className = "slidebg-"+(idx+1);
}
});
});
I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list
Works great though apart from removing all other body classes, I suppose I could add it as an ID as I'm not using one of those
Anyway hope this helps someone else!

Galleria + Colorbox working in IE, not in others

I thought I had this worked out, but unfortunately it does not work in FF or Chrome. I have a list of images that I would like displayed as a slideshow with carousel on my page. When the user clicks on the larger image I would like it to open a full size image in a lightbox. Here is the code that works in IE:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[rel=test]').colorbox();
$('#exteriorSlideShow_gallery').galleria({
max_scale_ratio: 1,
image_crop: false,
height: 210,
transition: 'fade',
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
$(e.imageTarget).click(this.proxy(function(e) {
e.preventDefault();
$('a[rel=test]').eq(this.active).click();
}));
});
}
});
});
</script>
In the above, "this.active" represents the index of the image in which the carousel is currently on. Since it is in the same order the links below are displayed in, it corresponds to the correct link I would like to have clicked.
<div id="exteriorSlideShow_gallery">
<img src='/Images/THUMB1.gif' />
<img src='/Images/THUMB2.gif' />
<img src='/Images/THUMB3.gif' />
</div>
Anyone know why this wouldn't work in anything but IE?
EDIT
For the time being I have put in a work around. If the browser is IE I call the code as above else I use $.colorbox({ 'href': urloflargeimage }). This doesn't allow grouping of the images for anything but IE, but at least I have a lightbox up.

Galleria strips most of your container content after grabbing necessary data, but it leaves it hidden in IE because of a loading bug. That is why your hack works in IE but not elsewhere.
I'm not sure how colorbox works, but it looks like it cannot take a normal array of URLs and assign it as a group of images and then call each box manually onclick. But you might be able to do something like this (hack):
var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array
$('#exteriorSlideShow_gallery').galleria({
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
var index = this.active;
$(e.imageTarget).bind('click', { active: this.active }, function(ev) {
box.eq(ev.data.active).click();
});
});
}
});

I have solved this. You have to put the links outside the galleria container, separate from the images, then click them when an image is clicked. Like so:
$(document).ready(function(){
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;
$("#gallery").galleria({
autoplay: 6000,
transitionSpeed: 1000,
transitionInitial: 'fade',
width: 958,
height: 443,
imageCrop: 'width',
minScaleRatio: 1,
extend: function() {
this.bind(Galleria.IMAGE, function(e) {
$(e.imageTarget).css('cursor','pointer');
$(e.imageTarget).click(this.proxy(function() {
targ = $(e.imageTarget).attr('src');
$('a[href="'+targ+'"]').click();
}));
});
}
});
});
and the HTML looks like:
<div id="gallery">
<img src="images/jqIm4.jpg" />
<img src="images/jqIm5.jpg" />
</div>
<div id="source">
</div>

The script tag is missing a quote character. Is it like that in your actual source? If so, that could seriously upset Firefox.
Specifically
<script type="text/javascript>
should be
<script type="text/javascript">