JqxPhotoGallery

From NSB App Studio
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Description

PhotoGallery displays a slide show of images. It is based on the jqWidgets jqxScrollView widget.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

Properties and Methods

This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.

Example

Functions

Enable/Disable slideShow

Function Button1_onclick()
  $("#PhotoGallery1").jqxScrollView({ slideShow: True });
End Function

Function Button2_onclick()
  $("#PhotoGallery1").jqxScrollView({ slideShow: False });
End Function

Remove/Add Items at Runtime

$("#PhotoGallery1>.jqx-scrollview-inner-wrapper").empty()
$("#PhotoGallery1>.jqx-scrollview-inner-wrapper").append("<div><div class=""PhotoGallery1_photostyle"" style=""background-Image: url(1.png);""></div></div>")
$("#PhotoGallery1").jqxScrollView("refresh")

Change Current Image

$("#PhotoGallery1").jqxScrollView({currentPage:0})

Events

onpageChanged (BASIC)

This event is triggered when the current page is changed.

Function PhotoGallery1_onpageChanged(event)
  Dim curPage
  curPage = event.args.currentPage
  console.log(curPage)
End Function

pageChanged (JavaScript)

JavaScript

 $('#PhotoGallery1').bind('pageChanged', function (event) 
  {
    var curPage = event.args.currentPage;
    console.log(curPage);
  });
  
End JavaScript   

Output

See above.