jQuery zoom and draggable image gallery
This gallery plugin offers an alternate approach to the lightbox-style plugins which are in common use and allows the following:
- Large images to be “zoomed out” on clicking on a thumbnail
- Large images to be zoomed back in by another click
- Optionally, multiple large images to be displayed at once
- Optionally, large images to be “draggable” round the screen to allow the user to examine/compare large images
- Configurable border colour, border widths and captions
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.
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.
Demo
There’s a larger demo here.
Setup
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:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <script type="text/javascript" src="/javascript/jquery.orangegalleryjs"></script> <link rel="stylesheet" href="/css/orangemenu.css"/>
The plugin expects images loaded within the target div. There are a couple of conditions:
- 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.
- The container element should not have overflow:hidden, overflow:auto or overflow:scroll set – otherwise the zoomed out images may not be fully visible
The large images (currently at least) zoom out to their maximum dimensions.
Configuration
To use the plugin with default settings all you need is this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery).orangegallery();
});
</script>
Gallery settings
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.
| Setting | Description | Example values | Default value |
|---|---|---|---|
| borderWidth | Sets the width of the border in pixels. Set to 0 for no border. Enter as an integer, without units. | 5,10 etc | 5 |
| borderColour | Sets the colour of the border and the caption background. Enter either a colour name or a hex value. Note UK spelling of colour. | ‘steelblue’ , ‘#EA714C’ | ‘black’ |
| caption | Sets whether a caption is displayed. Enter as a boolean without quotes. | true, false | true |
| captionPosition | Sets whether the caption should be displayed at the top or bottom of the image. | ‘top’,’bottom’ | ‘bottom’ |
| captionTextColour | Sets the colour of the caption text. Bet you guessed that. Enter either a colour name or a hex value. | ‘teal’,’#121212′ | ‘white’ |
| captionOpacity | Sets the degree of opacity of the caption (how see through it is). Set to 1 for competely opaque. | Any numeric value between 0 and 1 | 0.7 |
| allowMany | 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. | true,false | false |
| draggable | Sets whether a large image can be moved around the page once zoomed. Set as a boolean with no quotes. | true,false | false |
Configuration examples
This sets a 4px red border, with a caption at the top.
$(document).ready(function(){
$('#mydiv).orangegallery({borderColour: 'red',borderWidth: 4, captionPosition: 'top'});
});
This sets an opaque caption, and allows multiple large images.
$(document).ready(function(){
$('#mydiv').orangegallery({captionOpacity:1,allowMany:true});
});
Download
Zoom and draggable gallery zip file
Can I use this on my site?
Probably. See my policies on using code from this site.
You’re asking about the slider, not the gallery? Yes, have a look through the examples to run the slideshow automatically, you’ll have to amend the js, thumbnail change is just css.
I have the thumbnails working in my slider when I click them to show each image now, is it possible to have the slider automatically rolling through each image too, and could I change the shape of the thumbnails to square as they currently are rectangular so match the slider image dimensions? Thanks
You’d have the change the css to do this, and you may find that the plugin is overriding your changes.
You can probably edit the plugin directly to amend the inline css applied to .og_caption.
Thank you for the link. Could I have the caption to the right side of the image?
Well..if things don’t fit you’ll need to rethink your design, or position the caption differently. The plugin doesn’t impose any sizing.
I have added the hyperlink into the caption box which works but the only thing is the caption box is a little narrow as my image is only 150px x 175px and the active email address needs to be on 2 lines which doesn’t look too good? Any ideas? Thanks
I think you asked about this before? Have a look at this example.
Thank you I will try this, do you have a slider that uses thumbnail images instead of numbers to move the images on as you did here – http://www.simonbattersby.com/demos/crossfade_demo_no_slideshow.htm? thanks
This can be done, yes. First make sure you’ve included the link properly in the title attribute of your images. It should look like this:
<img src="/images/photography/insects/Gallery8.jpg" alt="Hoverfly on a red flower" title="Hoverfly, taken by my <a href='http://charlotte.simonbattersby.com'>daughter</a>. Panasonic DMC-TZ3 compact" width="100" height="150"/>This works fine (and is valid) but with no changes the click event on the link is suppressed by the plugin code and just causes the zoomed out image to zoom in. I’ve amended the plugin to cope with links – you’ll need to download the zip file again.
I have got this plugin working but in my caption text I have an email address which I would like to hyperlink directly to a person’s email account. Can this be done?
Thanks
OK, well that sounds like progress. It would be possible to amend the plugin to cope with the situation you describe, but it’s probably easiest just to set up the gallery on the first display – add a check to see if one exists and only set up the gallery if it doesn’t
You could check for the existence of the og_container class, like this:
if(!$(#mydiv).hasClass('og_container')){ $('#mydiv').orangegallery(); }Maybe I can show you what I wanted to do if you contact me on my email, if you like…
I somehow fixed the thumbnails now, still not sure what was wrong with it though… and I set up the gallery when displayed like you said by calling it within the sliderbutton’s script… now it works perfectly the first time around, but when I close the slider and reopen it stuff gets buggy…ie. I can no longer close an image by clicking it, only by clicking close or on the caption… if I click the image the caption jumps to the other side of the screen… haha:D… anyway it is probably because now I call for the gallery everytime I close/open the slider, so I need to do that once I guess…
Not quite clear what the issue is with your thumbnails – that sounds like it might just be an issue with your base css for the thumbnail layout.
Also not sure what the slide out menu/gallery looks like – but if things are hidden, depending on when the code is set to run for the gallery, then that is quite likely to affect positioning calculations because hidden elements will have width/height of 0. You may be able to get round this by setting up the gallery when it is displayed, rather than when the page is first displayed.
I guess you just added a delay before its clickable, but i am very new to this… so… i haven’t quite figured out to get it to work the way i want… I don’t know why, but the second and third image thumbnails display vertically like on the demopage (while i only have horizontal images)… maybe i just missed a setting somewhere, but it’s weird… also i was actually trying to have a sort of slide out menu/gallery which then becomes click-, zoom- and dragable like the demo, but it conflicts with the positioning of the zoom images in the script somehow when i put the display:none; in the css for this slidemenu (they open outside the page/view…), but when i start while its displayed it works ok and i can hide/show the slider… but like i said i’m quite new to this, so i have no idea what’s happening there:D, maybe you can explain it…
Heh, you’re right, never noticed that before! I’ve applied a fix now which prevents a close attempt until the large image animation has been completed. This prevents the issue occurring.
Very nice. Just a little bug though for the caption when you open/close really fast.
Hi Ashwin
You’re right, I can recreate this if I resize the window after loading the page.
I’ve amended the code on the demo page to handle this now.
If the images are on the end(left or right) of the page the big image dose not corrects its position to be in viewable area