It will just not display for some reason, the one I have in the regular(non-modal) page works wonders, but this one does not. I googled and found, that I have to trigger the flexsslider initialisation, when modal opens, so I did.
$(document).ready(function(){
$('#modal').on('shown.bs.modal', function() {
console.log('Init flex.....');
$('#carousel-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
});
Thats the JS part
<div class="container">
<div class="flexslider" id="slider-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'med')?>"/>
</li>
<? } ?>
</ul>
</div>
<div class="flexslider" id="carousel-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'sml')?>"/>
</li>
<? } ?>
</ul>
</div>
</div>
And thats the Part in modal.
The console.log part triggers, when I open the modal, but rest won't :/ I have googled and messed for hours now, maybe someone can point me in the right direction?
For some reason, when I put the initialisation script into the modal body with a small delay(I used 500 ms), it mysteriously started working