Rune Grønkjærs Blog
Abonnér på mit feed

jQuery Image Viewer standard settings

General options

loopImages

Set to false if you do not want images to run in a loop.
type: bool
Value: true

padding

The padding inside the Image Viewer. If set to zero, the image will fill the whole Image Viewer area.
Type: padding value
Value: ’10px’

ajaxLoaderGFX

Link to ajax load graphic
type: graphics
Value: ‘http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/ajax-loader.gif’

ajaxLoaderWidth

The width of the selected ajax graphics.
Type: width value
Value: ’32px ‘

ajaxLoaderHeight

The height of the selected ajax graphics.
Type: height value
Value: ’32px ‘

arrowSpeed

The speed of forward / backward arrows in and out animations.
Type: milliseconds
Value: 200

arrowOffset

The distance forward / back buttons will be driven in from the edge of the Image Viewer
type: distance in pixels
Value: 10

next_background

Background of the forward button.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/next.png)’

nextWidth

The width of the forward button.
Type: width
Value: 30

nextHeight

The height of the forward button.
Type: height
Value: 30

prev_background

The background of the back button.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/prev.png)’

prevWidth

The width of the back button.
Type: width
Value: 30

prevHeight

The height of the back button.
Type: height
Value: 30

close_background

Background on the close button.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/close.png)’

closeWidth

The width of the close button.
Type: width
Value: 20

closeHeight

The height of the close button.
Type: height
Value: 20

closeTopOffset

Close button’s distance to the top.
type: distance
Value: 5

closeRightOffset

Close button’s distance to the right side.
type: distance
Value: 5

Background options

background

Background on the Image Viewer. Has been tested only with color, but could, in theory, also be graphics. Will be difficult because the background is shared between many different elements.
Type: background value
Value: ‘#fff’

cornerGraphicSize

Height and width of the corner graphics core. Notice that they are larger than the padding. This is to let them overlap with the background, so that no holes appear during the animation.
Type: width / height
Value: ’20px’

cornerSize

The location of the background in relation to the corners. Must be the same or less than cornerback graphic size.
Type: width / height
Value: 10

corner_bl_background

Background of the left bottom corner.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BL.png)’

corner_br_background

Background of the right bottom corner.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BR.png)’

corner_tl_background

Background of the left top corner.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TL.png)’

corner_tr_background

Background of the right top corner.
Type: background value
Value: ‘url (http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TR.png)’

jQuery Modal Window settings

backgroundOpacity

The transparency of the parchment paper behind jQuery Image Viewer.
Type: transparency value
Value: 0.7

backgroundBackground

Background on parchment paper behind jQuery Image Viewer.
Type: background value
Value: ‘#000′

noBackground

Set to true if there should be no parchment paper behind the jQuery Image Viewer.
Type: background value
Value: false

minDistanceToBrowserEdge

jQuery Image Viewer’s margin to your browser’s edge.
type: distance
Value: 20

zIndex

jQuery Image Viewer’s zIndex.
Type: zIndex value
Value: 999

animateTime

The time used for the different animations. In some situations only half of the value is used.
Type: Milliseconds
Value: 750

closeOnBlockClick

Should the jQuery Image Viewer close when you click on the parchment paper.
type: bool
Value: true

fixedTop

A static distance jQuery Image Viewer gets to the top of the browser edge. Set the value to null if you want jQuery Image Viewer to be centered in the middle of the window.
type: null or a distance
Value: null

fixedLeft

A static distance jQuery Image Viewer gets to the left side of the browser edge. Set the value to null if you want jQuery Image Viewer to be centered in the middle of the window.
type: null or a distance
Value: null

onOpen

The event is fired when jQuery Image Viewer to open. The Modal Window Controller is passed as an parameter. On the Modal Window Controller you can get the following information:
  • mwc.settings – The settings that form the base of the Modal Window
  • mwc.blockID – The unique ID Modal Window blocker has been given
  • mwc.modal – The Modal window’s jQuery object reference
  • mwc.modalContent – The Modal window’s content jQuery object reference. In this case the jQuery Image Viewer
  • mwc.block – block containing parchment paper and jQuery Image Viewer
  • mwc.background – block behind jQuery Image Viewer (parchment paper)
Type: function
Value: function (mwc) ()

onOpened

The event is fired when jQuery Image Viewer has opened. The Modal Window Controller is passed as an parameter. See onOpen to read about what you can use the Modal Window Controller to. Type: function
Value: function (mwc) ()

onClose

The event is fired when jQuery Image Viewer to close. The Modal Window Controller is passed as an parameter. See onOpen to read about what you can use the Modal Window Controller to. Type: function
Value: function (mwc) ()

onClosed

The event is fired when jQuery Image Viewer has closed. The Modal Window Controller is passed as an parameter. See onOpen to read about what you can use the Modal Window Controller to. Type: function
Value: function (mwc) ()

onModalResize

The event is fired when jQuery Image Viewer should be resized. Must be null if you do not want to seize it. If you use this event you will have to resize the Image Viewer yourself. The Modal Window Controller is passed as an parameter. See onOpen to read about what you can use the Modal Window Controller to. type: null or function
Value: null

onModalResized

The event is fired when the jQuery Image Viewer has been resized. The Modal Window Controller is passed as an parameter. See onOpen to read about what you can use the Modal Window Controller to. type: null or function
Value: null

Dansk version