We are glad to introduce ver1.0 of our Drag’n’Slide gallery. Below you may find some code samples, as well as a demo of the gallery. A modified version, used to present some content along with the images, is used in our portfolio.
How to use Drag and Slide 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").if_act_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").if_act_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:
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:
I hope you would enjoy the gallery. Please write us if/when you find any bugs or just want to tell us Bravo 🙂
Have a nice day!