I am using bxslider in a modal and since the modal should present images depending on the user selection, I am writing the html within the slider dynamically.
Here is my modal code:
<div class="modal fade" id="figure_carousel" role="dialog">
<div class="modal-dialog" style="width: 80%; height: 100%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<br>
</div>
<div class="modal-body">
<ul class="bxslider" id="elements">
</ul>
</div>
<div class="modal-footer">
<input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
</div>
</div>
</div>
</div>
when an image is clicked I run the following script
<script>
$(document).on("click",".paper_img",function(event){
var modalview = get_html()
document.getElementById('elements').innerHTML = ""
$('#figure_carousel').modal('show');
$('.bxslider').append(modalview.innerHTML);
var slider = $('.bxslider').bxSlider({mode: 'horizontal'});
slider.reloadSlider();
});
</script>
which gets some html (using the get_html function), writes it in the id=elements ul in the modal and launches the modal. Lets assume the html code which es back from the get_html function looks like this
<li><img src="/static/sourcefiles/image.png" alt="figure"/></li>
When the modal is opened, the size of the images is wrong. If I resize the browser window manually, the slides bee correct. Somehow bxslider cannot deal with me writing html code dynamically. How can I load the bxslider after writing the html code or any other way to solve this? thanks carl EDIT: Here is my problem in an example
I am using bxslider in a modal and since the modal should present images depending on the user selection, I am writing the html within the slider dynamically.
Here is my modal code:
<div class="modal fade" id="figure_carousel" role="dialog">
<div class="modal-dialog" style="width: 80%; height: 100%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<br>
</div>
<div class="modal-body">
<ul class="bxslider" id="elements">
</ul>
</div>
<div class="modal-footer">
<input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
</div>
</div>
</div>
</div>
when an image is clicked I run the following script
<script>
$(document).on("click",".paper_img",function(event){
var modalview = get_html()
document.getElementById('elements').innerHTML = ""
$('#figure_carousel').modal('show');
$('.bxslider').append(modalview.innerHTML);
var slider = $('.bxslider').bxSlider({mode: 'horizontal'});
slider.reloadSlider();
});
</script>
which gets some html (using the get_html function), writes it in the id=elements ul in the modal and launches the modal. Lets assume the html code which es back from the get_html function looks like this
<li><img src="/static/sourcefiles/image.png" alt="figure"/></li>
When the modal is opened, the size of the images is wrong. If I resize the browser window manually, the slides bee correct. Somehow bxslider cannot deal with me writing html code dynamically. How can I load the bxslider after writing the html code or any other way to solve this? thanks carl EDIT: Here is my problem in an example
http://plnkr.co/edit/sHVq6cggMfVVS4QywQNs?p=preview
Share Improve this question edited Nov 19, 2015 at 2:23 carl asked Nov 14, 2015 at 0:06 carlcarl 4,43611 gold badges60 silver badges110 bronze badges2 Answers
Reset to default 6 +50your are calling the bxSlider() when the bootstrap modal is hidden. May be the reason bxSlider couldn't detect the height of the images.
var bx;
$('#myModal1').on('shown.bs.modal', function () {
if(bx === undefined){
bx= $('.bxslider').bxSlider();
} else {
bx.reloadSlider();
}
});
'shown.bs.modal' it the bootstrap event fires when the model is made visible to user. then we call the bxSlider(), and everytime we add images we are calling bx.reloadSlider();
example : http://plnkr.co/edit/LTMCuDUc3vUm9VnmmvzG?p=preview
Try this:
CSS
.bx-viewport { min-height: 90vh !important; }
If that doesn't work or only works once, then try:
CSS
.bx-viewport.extend { min-height: 90vh !important; }
jQuery
Add this option:
onBeforeSlide: extendVP;
Add this to above the </body> end tag:
function extendVP($ele, from, to) {
var vp = $('.bx-viewport');
vp.addClass('extend');
}
UPDATE 1
If images are not scaling with the proper aspect ratio or not even scaling, here's 2 suggestions:
CSS
Simple
img { width: 100%; height: auto; }
Better
This procedure involves using a background image:
- Place a
<div>in a slide (<li>for your markup), give it aclass(likeimgFrame) - Then place an inline
styleattribute on it. Assign the image toimgFrameas follows:<div class="imgFrame" style="background-image: url('path/to/img.jpg')"></div>
Next add this to your CSS:
.imgFrame { width: 100%; height: auto; background-repeat: no-repeat; background-size: contain; }
UPDATE 2
The modifications done to this bxSlider demo is not to show it works, because it doesn't have the height issue in the first place. It's purpose is to show the source and explain what it does. While making this demo, I created a function adaptiveWidth(), it's optional. What it does is on page load it has an overlay, once it's clicked, it'll enter full screen mode then quickly exit full screen as the overlay fades away. Hopefully that'll wake up bxSlider from it's stupor.
CodePen
CSS
<link href="https://cdn.jsdelivr/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>
/* Default Style ____________________________________________________*/
html, body { box-sizing: border-box; }
html { height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; }
body { height: 100%; width: 100%; position: relative; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
/* Aesthetics [Optional]_____________________________________________*/
html { font: 400 16px/1.45 'Source Code Pro'; }
body { background: #000; color: #FFF; font-variant: small-caps; }
h1 { font-size: 3rem; font-weight: 700; }
/* jquery.bxslider.css jsDelvr. Image Override ___________________*/
.bx-wrapper .bx-loading { background: url('https://cdn.jsdelivr/bxslider/4.2.5/images/bx_loader.gif') center center no-repeat #ffffff; }
.bx-wrapper .bx-prev { background: url('https://cdn.jsdelivr/bxslider/4.2.5/images/controls.png') no-repeat 0 -32px; }
.bx-wrapper .bx-next { background: url('https://cdn.jsdelivr/bxslider/4.2.5/images/controls.png') no-repeat -43px -32px; }
.bx-wrapper .bx-controls-auto .bx-start { background: url('https://cdn.jsdelivr/bxslider/4.2.5/images/controls.png') -86px -11px no-repeat; }
.bx-wrapper .bx-controls-auto .bx-stop { background: url('https://cdn.jsdelivr/bxslider/4.2.5/images/controls.png') -86px -44px no-repeat; }
/* bxSlider init Style ___________________________________________*/
#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999; height: 101%; width: 101%; overflow: hidden; cursor: pointer; pointer-events: auto; background-color: black; opacity: .5; }
.ext { max-width: -moz-fit-content; max-width: -webkit-fit-content; max-width: fit-content; width: auto; height: auto; padding: 25%; } /* adaptiveWidth Style [Optional] */
HTML
<body class="expand">
<div id="overlay"><h1>Click anywhere to start</h1></div>
<div class="ext"> <!-- adaptiveWidth Wrapper [Optional] -->
<ul class='bxslider'>
<li>
<img src="http://dummyimage./500X16:9/000/FFF.png&text=1"/>
</li>
<li>
<img src="http://dummyimage./500X4:3/07C/FC0.png&text=2"/>
</li>
<li>
<img src="http://dummyimage./4:3X400/D06/0FF.png&text=3"/>
</li>
<li>
<img src="http://dummyimage./640X16:9/765/cee.png&text=4"/>
</li>
<li>
<img src="http://dummyimage./210X16:9/B40/6F3.png&text=5"/>
</li>
<li>
<img src="http://dummyimage./16:9X420/E2F/FC9.png&text=6"/>
</li>
</ul>
</div>
jQ/JS
<script src="https://ajax.aspnetcdn./ajax/jquery/jquery-2.1.4.min.js"></script>
<!-- [Suggestion] Don't use the minified version: jquery.bxslider.min.js, it's buggy -->
<script src="https://cdn.jsdelivr/bxslider/4.2.5/jquery.bxslider.js"></script>
/* Page loads #overlay */
$(document).ready(function() { // jQ DocReady
$("#overlay").one('click', function(event) { // User clicks #overlay
event.stopImmediatePropagation(); // Isolate Event
var tgt = document.querySelector('.expand'),// Target <body>
that = this; // Establish this as that
enterFS(tgt); // Enter full screen to wakeup bxSlider!
exitFS(); // Exit full screen
$(that).fadeOut(1000, function() { // #overlay fades...
$(that).remove(); // #overlay is gone
});
});
/* Adaptive bxSlider */
var bx = $('.bxslider').bxSlider({
adaptiveHeight: true, // http://bxslider./options#adaptiveHeight
onSlideBefore: adaptiveWidth // Callback [optional]
});
});
/* adaptiveHeight [Optional] */
function adaptiveWidth($ele, from, to) {
var imgWidth = $ele.find('img').width();
var bxWidth = $('.bx-wrapper').width(imgWidth);
}
/* Enter Full Screen */
function enterFS(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/* Exit Full Screen */
function exitFS() {
if(document.exitFullscreen) {
document.exitFullscreen();
}
else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}