I have a page with several buttons on top. Below the buttons is some content.
Whenever a button is pressed, the content is refreshed using UpdatePanels.
In this content I am trying to use the royal slider plugin, which needs to be initialized every time a button is pressed. I am running into the problem where I cannot get royal slider to initialize on every button click.
What I have tried is calling a function inside the div that is being refreshed but this does not work a.k.a the function is not called after the callback.
HTML (content):
<asp:UpdatePanel ID="ID" ChildrenAsTriggers="true" runat="server">
<div class="wrapper">
<!-- main navigation -->
<asp:Panel ID="someID" runat="server"></asp:Panel>
<script type="text/javascript">
createSlider();
</script>
</div>
</asp:UpdatePanel>
JS:
function createSlider() {
$('.royalSlider').royalSlider({
arrowsNav: true,
loop: false,
keyboardNavEnabled: false,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: true,
autoScaleSlider: true,
autoScaleSliderWidth: 680,
autoScaleSliderHeight: 140,
controlNavigation: 'none',
thumbsFitInViewport: false,
navigateByClick: true,
sliderDrag: true,
sliderTouch: true,
startSlideId: 0,
autoPlay: false,
transitionType: 'move',
globalCaption: true,
deeplinking: {
enabled: true,
change: false
},
/* size of all images */
imgWidth: 680,
imgHeight: 140
});
}
How would I go about doing this?