Finally, the new and improved version of our Drag’n’Slide gallery is out. Following the latest trends in gallery design, we’ve added some new features to our product, while preserving the unique properties of the plugin. Below you may find some code samples, as well as a demo of the gallery.
What’s new?
Cool navigation added!
As you will see the new Drag’n’Slide jQuery gallery will provide the user with a simple and intuitive way of navigating across the pictures in the gallery. These tiny and cool circles will fit perfectly into any website design.
Changeable background colour!
For perfect compatibility with every website layout You can now choose the background colour that will enable the Drag’n’Slide jQuery gallery to fit right into your design.
Border on/off!
Outline the Drag’n’Slide jQuery gallery with a sleek border or just allow it to blend with the rest of the webpage.
You can find detailed documentation of the new features of the Drag’n’Slide Jquery Gallery below.
How to use Drag and Slide JQuery gallery?
Simple and easy to use
Just wrap your content with a single div and call the gallery on it. The code will look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
. . . <script type="text/javascript"> $("#your_div_ID").drag_n_slide_gallery(); </script> . . . <div id="your_div_ID"> <img /> . . . <img /> </div> |
Drag and slide website content
If you wish to store additional HTML information inside each draggable entity, then you should wrap all the entities with the .page CSS class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
. . . <script type="text/javascript"> $("#your_div_ID").drag_n_slide_gallery(); </script> . . . <div id="your_div_ID"> <div class="page"> You could place pictures and text styled as You wish</div> . . . <div class="page"> Perfect for displaying a portpholio</div> </div> |
Available settings:
New features
border: {string}
Description: Determine the style, width and colour of the border that wraps the gallery.
Default value: ‘1px solid gray’
Example: border: ‘0’ or border: ‘3px double #676767’
backgroundColor: {string}
Description: Choose the right background color that would fill the empty space in the gallery if a picture is too small or the color that will appear behind Your content if You use the Drag’n’Slide JQuery Gallery in page mode.
Default value: ‘#383838’
Example: backgroundColor: ‘#FFFFFF’ or backgroundColor: ‘lightgreen’
Legacy settings: v1.0
width: {value} or ‘{value}px’
Description: Width of each gallery’s page/image. The width is applied only to images, whose own width is bigger than the the one described here.
Default value: ‘640px’
Example: width: 600 or width: ‘600px’
coefficient: 0 <= {value} < 1
Description: The coefficient of the offset needed in order for the image to be moved. If – for example – it is set to 0.2 (20%), the user would need to move current image/page 0.2 times of the whole width (see above) in order to see the next one. When instantMove property (see below) is set to true, the coefficient is overridden – its value won’t matter.
Default value: 0.4
Example: coefficient: 0.2
instantMove: {boolean}
Description: If set to true the image/page is directly moved after the first drag. If – for example – it is set to false (the default value), an image/page could be only moved when the user clicks on it, moves the mouse and releases it. If – on the other hand – the property is set to true, the only thing the user needs to do is to click on the image/page and moves the mouse horizontally – no release of the mouse button is needed.
Default value: false
Example: instantMove: true
verticalCenter: {boolean}
Description: Centers image (resp. – page’s content) vertically when the display’s height is bigger than the one of the object inside it.
Default value: false
Example: verticalCenter: true
initialTip: {boolean}
Description: A fast sliding effect of all the images/pages intended to show the user that the image (resp. – page contents) is draggable.
Default value: false
Example: initialTip: true
Download:
We expect Your requests, recommendations and bug reports in the comment section. Cheers! 🙂