lightSlider plugin not working on first time load - javascript

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?

Related

bxSlider - Wrong pause between slides when using pager

I'm running the latest version of Bxslider (4.2.14), everything works great except for the pager.
When using the pager to switch between slides, pause is much shorter than it should be:
Steps to reproduce:
Open the Fiddle: https://jsfiddle.net/Bruno42/smvhe3o4/7/
When Slide #2 appears wait ~3-4 seconds
Switch back to Slide #1 by clicking on the pager
Pause should then last 5 seconds (like during the "auto" mode), but instead it lasts only 1-2 seconds
I think the Pause countdown should be resetted to 5 seconds every time a slide is selected using the Pager.
I spent a while trying to figure out a solution in the clickPagerBind() function in jquery.bxslider.js by using clearInterval(slider.interval); to fix this, however it did not work (slider gets stuck after that).
Code used to load bxSlider (also available on my JsFiddle):
$('.bxslider').bxSlider({
maxSlides: 1,
slideWidth: 800,
pager: true,
pagerType: 'full',
autoHover: false,
auto: true,
stopAuto: false,
stopAutoOnClick: false,
speed: 1000,
pause: 5000,
mode: 'horizontal',
controls: false,
});
I would really appreciate your help on that.
The speed: 1000 might be too fast for the transition to complete and for startAuto() and stopAuto() methods to start or end. In order to control what methods are called during transition we can use a callback from the bxSlider API. Make a custom function and call it on either onSlideAfter or onSlideBefore. The following demo calls function pagerFix() onSlideAfter:
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
When initializing .bxSlider() make sure you reference it so you can call the methods.
let bx = $('.bxslider').bxSlider(...
Fiddle
(uses onSlideBefore)
Demo
(uses onSlideAfter)
let bx = $('.bxslider').bxSlider({
slideWidth: 800,
auto: true,
speed: 1000,
pause: 5000,
controls: false,
onSlideAfter: pagerFix
});
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>
<ul class="bxslider" style="width: 800px; height: 250px;">
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>

"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>

Display only 3 items using CodeIgniter

I am using owl.carousel.min.js JavaScript. I have to display only 3 images on my screen. For that I have written an extra JavaScript:
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
item:3,
slideBy: 4,
singleItem: true
});
});
</script>
But it didn't work. Where will I have do changes in my owl.carousel.min.js?

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();

Reloading jQuery function within another function

this is a tricksy one, i am not even sure on how to word the title for this.
so what i have is a bit of a mix up i have a jQuery function called slideonlyone, that toggles divs and within the divs i have a jQuery plugin called the royalSlider(content slider).
what happens is when i first load up the page i have the one div un-toggled by default and the royalSlider plugin works fine. the moment i toggle the page to another div with the royalSlider plugin, it fails to load that plugin.
the head of my page looks like this:
<head>
<link rel="stylesheet" href="/css/system.css" type="text/css">
<link rel="stylesheet" href="/css/royalslider.css" type="text/css">
<link rel="stylesheet" href="/css/default/rs-default-inverted.css" type="text/css">
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/jquery.royalslider.js" type="text/javascript"></script>
<script src="/js/systems_jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
</head>
the royalSlider is called in a seperate file i load called 'systems_jquery.js'
jQuery(document).ready(function($) {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
});
the html looks like this
i have this as a type of brief summary- when they click on the div is loads the slideonlyone function which toggles the products details
<a href="javascript:slideonlyone('beagle_box');">
<div class="system_box">
<h2>BEE management systems</h2>
<p>________________</p>
</div>
</a>
This is the product details div.
<div class="systems_detail" id="sms_box">
<div class="laptopBg">
<img src="/images/laptop.png" class="imgBg" width="707" height="400">
<div id="slider-in-laptop" class="royalSlider rsDefaultInv">
<img src="/images/1.jpg">
<img src="/images/2.jpg" data-rsvideo="https://vimeo.com/45778774">
<img src="/images/3.jpg">
<img src="/images/4.jpg">
</div>
</div>
</div>
as you can see that apart of the details is the royalSlider it shows screen shots of the product. but since its only just appearing the images are not loaded into the slider and images are displayed under each other as if the plugin is broken but when i inspect the element and go to the console i can see that its not broken. so i suspect that the royalSlider is going to need to reload when ever i toggle the div so that it finds the IDs again??
is it possible to reload the royalSlider function when ever i toggle/slide some content from my slidonlyone function?
NOTE: if i toggle the div and the slider drops its content if i reload the page it picks them up again. so its definitely the royalSlider needing to reload once i have toggeld the div -- or reload the page once i have toggled the page.
Well if you want to run 'royalSlider' again than just wrap whole thing in a function. Then just run it at the time you think you need to reload it ('documentReady' or 'click', etc):
royalSliderReload = function() {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
}
$(document).ready(function(e) {
royalSliderReload();
});
function slideonlyone(thechosenone) {
$('.systems_detail').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
royalSliderReload(); // slider will reload here
} else {
$(this).slideUp(600);
}
});
}

Categories