I have a thumbnail slider on my web page which i am developing. Now when i go into the website it shows only a little block of the picture but once i refresh the page all is good, any ideas why this happens
http://www.ap2x.gbes.co.za/1/1.html
that is the page in question
i have tested on firefox, chrome and IE. Error does not seem to be browser specific
Slider works perfectly fine off line with no such problem.
I have no idea what could be causing this
$(function() {
// wrap all thumbs in a <div> for the 3x3 grid
$div = null;
$('#thumbs').children().each(function(i) {
if ( i % 9 == 0) {
$div = $( '<div />' );
$div.appendTo( '#thumbs' );
}
$(this).appendTo( $div );
$(this).addClass( 'itm'+i );
$(this).click(function() {
$('#images').trigger( 'slideTo', [i, 0, true] );
});
});
$('#thumbs img.itm0').addClass( 'selected' );
// the big-image carousel
$('#images').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 500,
height: 281,
items: 1,
auto: false,
scroll: {
fx: 'directscroll',
onBefore: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('#thumbs img').removeClass( 'selected' );
$('#thumbs img.itm'+pos).addClass( 'selected' );
var page = Math.floor( pos / 9 );
$('#thumbs').trigger( 'slideToPage', page );
}
}
});
// the thumbnail-carousel
$('#thumbs').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 550,
height: 150,
items: 1,
align: false,
auto: false,
});
});
It sounds like it doesn't work until the images have been loaded so you either need to tell the slider how big the images will be once they are loaded or wait till they are loaded before running your script.
Does adding the following CSS solve the problem?
#images img {
height: 281px;
width: 500px;
}
I can't get the bug again to test it myself.
I bet you're viewing this website with Chrome.
There is a nasty bug with this browser when he cannot determine the height of an element.
A workaround would be setting width and height to each slider image manually through css.
Related
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>
I am using MasterSlider.js to make the carousal, I want to give it partialview on desktop and fillwidth view on tablet and mobile. I am trying to change it through detecting the window width but there is something wrong in my code.
<script type="text/javascript">
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:700,
height:466,
space:5,
loop:true,
view:'fadeFlow',
layout:'partialview',
grabCursor:false,
centerControls:false,
autohide:false,
view:"fadeBasic",
});
slider.control('arrows' , {autohide:false});
if ($(window).width() < 1024) {
slider.setup('masterslider' , {
layout:'fillwidth',
grabCursor:false,
centerControls:false,
});
}
</script>
One more thing I am using fadeBasic option to make the previous and next image fade out by default it is applying opactiy 0.4, is there any way I make it 0.8. Opacity is applying on run time.
Just for reference I am using this slider:
http://www.mercurycustom.com/wp-content/uploads/2014/05/partialview/partialview3.html
Here is a running demo: http://codepen.io/anon/pen/dopNrM
Try this instead:
var slider = new MasterSlider();
slider.control('arrows');
if ($(window).width() < 1024) {
slider.setup('masterslider', {
layout: 'fillwidth',
grabCursor: false,
centerControls: false,
});
} else {
slider.setup('masterslider', {
width: 760,
height: 400,
space: 10,
loop: true,
view: 'fadeFlow',
layout: 'partialview',
});
}
I have a big request for help with sth.
I need to set the height to 100% of html & body for owl carousel slider (Full screen). But I need also a little bit place above it.
This is what I did with other slider and what I need to have: http://lukaszradwan.com/
And example with owl carousel http://lukaszradwan.com/pl/
Please resize Your browser vertically to see effect.
Thank You!
EDIT//
It's almost done, but I have another issue. Below the slider there is an empty place, I don't know why lukaszradwan.com/pl
I need to have the same height to cd-main-content class as a viewport. Can You take a look?
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : true,
slideSpeed : 300,
pagination : true,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
navigationText : false,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.owl-pagination').addClass('hidden');
} else {
$('.owl-pagination').removeClass('hidden');
}
});
I just added
position: absolute;
top: 289px;
bottom: 0;
left: 0;
right: 0;
to viewport and margin-bottom: 289px; to cd-main-content and everything works well.
I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)
The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox ยป
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
I am trying to controll the width and height of the modal window, but I have no idea how to override the default settings.
I've been looking at the nmObject (http://nyromodal.nyrodev.com/), but my javascript knowledge is not that great and I have no idea what the correct way to implement this is.
Here is my attempt, but with a syntax error:
$.nmObj( sizes: { initW: 300, initH: 300 });
What am I doing wrong? :\
EDIT:
$(function() {
$('.nyroModal').nyroModal();
$.nmObj({sizes: { initW: 300, initH: 300 }});
});
No syntax errors atleast, but I don't think im using the function correctly
try:
$.nmObj({sizes: { initW: 300, initH: 300 }});
Hope it helps.
Looks like you're using nyroModal v2. For an iframe, you need to set the initial size in the CSS:
.nyroModalCont iframe {
width: 300px;
height: 300px;
}
There's a github issue for this, which is closed, so I think that's how it will work in this version.
Ivailo's answer applies to nyroModal v1, I believe.
Another way of doing it.
<script type="text/javascript">
$(document).ready(function() {
$.nyroModalSettings({
type: 'iframe',
height: 500,
width: 700,
resizable: true,
autoSizable: true,
titleFromIframe: true,
// modal: true,
// selIndicator: '#loading',
contentLoading: "" // use our own
});
$('a.nyroModalPhotos').nyroModal();
});
</script>
For this filter
.* Iframe filter
.* Before: filters.formFile
Locate in min.js the file is part of a string
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' })
and add
.css({ height: nm.sizes.h })
the result should be
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' }).css({ height: nm.sizes.h })