I’ve tested in FF3, IE8, IE7, IE6, Opera 9, Opera 10, Safari 4, Safari 5 and Chrome, using jQuery 1.4.2 and jQuery UI 1.8.2, all on Win\/XP, plus FF23, IE9, IE10, Opera 12 and Chrome, using jQuery 1.8.3 and jQuery UI 1.8.23, on W7. Beware, some combinations of jQuery and jQuery UI cause outerHeight() to return a jQuery object instead of an integer, which results in the caption being positioned incorrectly.<\/p>\r\n\r\n
Due to an apparent bug with jQuery 1.4.3 and jQuery UI 1.8.5 or less, affecting UI Draggable in webkit browsers (Safari and Chrome), this combination does not work. Use jQuery 1.4.3 and jQuery 1.8.6 or later.<\/p>\r\n\r\n
Demo<\/h3>\r\n\r\n![\"Hoverfly](\"\/images\/photography\/insects\/Gallery1.jpg\" "\\"Hoverfly.")
\r\n![\"House](\"\/images\/photography\/insects\/Gallery9.jpg\" "\\"House")
\r\n![\"Blue](\"\/images\/photography\/insects\/Gallery12.jpg\" "\\"Blue")
\r\n<\/div>\r\n\r\nThere’s a larger demo here<\/a>.<\/p>\r\n\r\n\r\nSetup<\/h3>\r\n\r\n
This gallery requires jQuery, so you need to load this and the plugin into in your head, plus the css file. If you want to use the draggable options (see below), then jQuery UI is also required:<\/p>\r\n\r\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.23\/jquery-ui.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"\/javascript\/jquery.orangegalleryjs\"><\/script>\r\n<link rel=\"stylesheet\" href=\"\/css\/orangemenu.css\"\/>\r\n<\/pre>\r\n\r\nThe plugin expects images loaded within the target div. There are a couple of conditions:<\/p>\r\n\r\n
\r\n- Other html elements are allowed within the container div, including additional elements enclosing the images, but there must be no elements containing the images that have position:relative. The containing div itself may have position:relative.<\/li>\r\n
- The container element should not have overflow:hidden, overflow:auto or overflow:scroll set – otherwise the zoomed out images may not be fully visible<\/li>\r\n<\/ul>\r\n\r\n
The large images (currently at least) zoom out to their maximum dimensions.<\/p>\r\n\r\n
Configuration<\/h3>\r\n\r\n
To use the plugin with default settings all you need is this:<\/p>\r\n\r\n
<script type="text\/javascript">\r\n$(document).ready(function(){\r\n$('#gallery).orangegallery();\r\n});\r\n<\/script><\/pre>\r\n\r\nGallery settings<\/h4>\r\n
To apply a setting, the setting name, followed by a colon, followed by the required value as shown below, all wrapped in curly brackets {}, needs to be entered in the round brackets after orangegallery. Separate multiple settings with a comma. See below for some examples.<\/p>\r\n
\r\n\r\nSetting<\/th>\r\n Description<\/th>\r\n Example values<\/th>\r\n Default value<\/th>\r\n<\/tr>\r\n \r\nborderWidth<\/td>\r\n Sets the width of the border in pixels. Set to 0 for no border. Enter as an integer, without units.<\/td>\r\n 5,10 etc<\/td>\r\n 5<\/td>\r\n<\/tr>\r\n \r\nborderColour<\/td>\r\n Sets the colour of the border and the caption background. Enter either a colour name or a hex value. Note UK spelling of colou<\/strong>r.<\/td>\r\n‘steelblue’ , ‘#EA714C’<\/td>\r\n ‘black’<\/td>\r\n<\/tr>\r\n \r\ncaption<\/td>\r\n Sets whether a caption is displayed. Enter as a boolean without quotes.<\/td>\r\n true, false<\/td>\r\n true<\/td>\r\n<\/tr>\r\n \r\ncaptionPosition<\/td>\r\n Sets whether the caption should be displayed at the top or bottom of the image.<\/td>\r\n ‘top’,’bottom’<\/td>\r\n ‘bottom’<\/td>\r\n<\/tr>\r\n \r\ncaptionTextColour<\/td>\r\n Sets the colour of the caption text. Bet you guessed that. Enter either a colour name or a hex value.<\/td>\r\n ‘teal’,’#121212′<\/td>\r\n ‘white’<\/td>\r\n<\/tr>\r\n \r\ncaptionOpacity<\/td>\r\n Sets the degree of opacity of the caption (how see through it is). Set to 1 for competely opaque.<\/td>\r\n Any numeric value between 0 and 1<\/td>\r\n 0.7<\/td>\r\n<\/tr>\r\n \r\nallowMany<\/td>\r\n Sets whether more than one large image can be displayed at once. If this is set to false, opening a large image will cause a previously opened large inage to fade out. Set as a boolean with no quotes.<\/td>\r\n true,false<\/td>\r\n false<\/td>\r\n<\/tr>\r\n \r\ndraggable<\/td>\r\n Sets whether a large image can be moved around the page once zoomed. Set as a boolean with no quotes.<\/td>\r\n true,false<\/td>\r\n false<\/td>\r\n<\/tr>\r\n<\/table>\r\n\r\nConfiguration examples<\/h4>\r\n
This sets a 4px red border, with a caption at the top.<\/p>\r\n
$(document).ready(function(){\r\n $('#mydiv).orangegallery({borderColour: 'red',borderWidth: 4, captionPosition: 'top'});\r\n});<\/pre>\r\n\r\nThis sets an opaque caption, and allows multiple large images.<\/p>\r\n
$(document).ready(function(){\r\n $('#mydiv').orangegallery({captionOpacity:1,allowMany:true});\r\n});<\/pre>\r\n\r\nDownload<\/h3>\r\n
Zoom and draggable gallery zip file<\/a><\/p>\r\n\r\nCan I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n
\r\n\r\n\r\n<\/div>\r\n\r\nThere’s a larger demo here<\/a>.<\/p>\r\n\r\n\r\n This gallery requires jQuery, so you need to load this and the plugin into in your head, plus the css file. If you want to use the draggable options (see below), then jQuery UI is also required:<\/p>\r\n\r\n The plugin expects images loaded within the target div. There are a couple of conditions:<\/p>\r\n\r\n The large images (currently at least) zoom out to their maximum dimensions.<\/p>\r\n\r\n To use the plugin with default settings all you need is this:<\/p>\r\n\r\n To apply a setting, the setting name, followed by a colon, followed by the required value as shown below, all wrapped in curly brackets {}, needs to be entered in the round brackets after orangegallery. Separate multiple settings with a comma. See below for some examples.<\/p>\r\n This sets a 4px red border, with a caption at the top.<\/p>\r\n This sets an opaque caption, and allows multiple large images.<\/p>\r\n Zoom and draggable gallery zip file<\/a><\/p>\r\n\r\n Probably. See my policies on using code from this site<\/a>.<\/p>\r\nSetup<\/h3>\r\n\r\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.23\/jquery-ui.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"\/javascript\/jquery.orangegalleryjs\"><\/script>\r\n<link rel=\"stylesheet\" href=\"\/css\/orangemenu.css\"\/>\r\n<\/pre>\r\n\r\n
\r\n
Configuration<\/h3>\r\n\r\n
<script type="text\/javascript">\r\n$(document).ready(function(){\r\n$('#gallery).orangegallery();\r\n});\r\n<\/script><\/pre>\r\n\r\nGallery settings<\/h4>\r\n
\r\n
\r\n Setting<\/th>\r\n Description<\/th>\r\n Example values<\/th>\r\n Default value<\/th>\r\n<\/tr>\r\n \r\n borderWidth<\/td>\r\n Sets the width of the border in pixels. Set to 0 for no border. Enter as an integer, without units.<\/td>\r\n 5,10 etc<\/td>\r\n 5<\/td>\r\n<\/tr>\r\n \r\n borderColour<\/td>\r\n Sets the colour of the border and the caption background. Enter either a colour name or a hex value. Note UK spelling of colou<\/strong>r.<\/td>\r\n ‘steelblue’ , ‘#EA714C’<\/td>\r\n ‘black’<\/td>\r\n<\/tr>\r\n \r\n caption<\/td>\r\n Sets whether a caption is displayed. Enter as a boolean without quotes.<\/td>\r\n true, false<\/td>\r\n true<\/td>\r\n<\/tr>\r\n \r\n captionPosition<\/td>\r\n Sets whether the caption should be displayed at the top or bottom of the image.<\/td>\r\n ‘top’,’bottom’<\/td>\r\n ‘bottom’<\/td>\r\n<\/tr>\r\n \r\n captionTextColour<\/td>\r\n Sets the colour of the caption text. Bet you guessed that. Enter either a colour name or a hex value.<\/td>\r\n ‘teal’,’#121212′<\/td>\r\n ‘white’<\/td>\r\n<\/tr>\r\n \r\n captionOpacity<\/td>\r\n Sets the degree of opacity of the caption (how see through it is). Set to 1 for competely opaque.<\/td>\r\n Any numeric value between 0 and 1<\/td>\r\n 0.7<\/td>\r\n<\/tr>\r\n \r\n allowMany<\/td>\r\n Sets whether more than one large image can be displayed at once. If this is set to false, opening a large image will cause a previously opened large inage to fade out. Set as a boolean with no quotes.<\/td>\r\n true,false<\/td>\r\n false<\/td>\r\n<\/tr>\r\n \r\n draggable<\/td>\r\n Sets whether a large image can be moved around the page once zoomed. Set as a boolean with no quotes.<\/td>\r\n true,false<\/td>\r\n false<\/td>\r\n<\/tr>\r\n<\/table>\r\n\r\n Configuration examples<\/h4>\r\n
$(document).ready(function(){\r\n $('#mydiv).orangegallery({borderColour: 'red',borderWidth: 4, captionPosition: 'top'});\r\n});<\/pre>\r\n\r\n$(document).ready(function(){\r\n $('#mydiv').orangegallery({captionOpacity:1,allowMany:true});\r\n});<\/pre>\r\n\r\nDownload<\/h3>\r\n
Can I use this on my site?<\/h3>\r\n