However it should be stressed again that code is not required to get normal SwipeGallery stacks configured and published. If you have knowledge of HTML and CSS markup, then this opens a lot of possibilities to further enhance and embellish the appearance of SwipeGallery. The example posted above is using 400px images for the thumbnails and 1200px full-sized images for the lightbox.Īlthough there are no limits imposed on the number of images you can add to a SwipeGallery stack, obviously it is wise to play things safe and not go crazy with SwipeGallery stacks containing many hundreds of images! It is far better (from both a performance and usability perspective) to create an index page, and then split your large gallery into categories, spread over several different pages.Ĭustomising SwipeGallery furtherWe've purposefully engineered the HTML markup in SwipeGallery with plenty of class and ID selector names. ![]() If you are sourcing images from an online (warehouse) location, you can specify separate thumbnail and full-size images of your own. When using locally sourced images, we automatically generate a scaled thumbnail image, from the full-size image. Aim towards keeping each individual image less than 200 kilobytes in size (this will avoid rendering / memory issues on lower-powered, handheld devices like smartphones). Images must be in either JPG, GIF or PNG format, saved at exactly 72 dpi. Optimising imagesIdeally all images you add to SwipeGallery should be optimised, for improved performance. Many users have been genuinely surprised at what SwipeGallery can achieve. Spend some time playing with SwipeGallery and experimenting with the different options available to you. Hovering your mouse cursor over individual settings will display informational tooltips about what each setting does. SwipeGallery contains a generous array of customisable settings. Try previewing the page at different screen sizes and click the thumbnail images to see SwipeGallery in action. Change any applicable settings you prefer Select the main SwipeGallery stack in edit mode, to access the customisable settings for the thumbnail grid and lightbox.Drag and drop the images into any order you want.Each time you add a new image, settings on the right let you choose between a local image or a warehoused (online) image In edit mode, click the blue '+' button to add images. ![]() Once installed into Stacks 3, drag and drop an SwipeGallery stack from your stack elements library into your Stacks page.Follow these steps to get a SwipeGallery working in your webpage We are using images stored in a folder online, but equally you can use images dragged and dropped directly into the stack. If you require a more powerful image gallery stack, the ProGallery stack is a strong contender.ĮxampleThis is a working example of SwipeGallery, published using the default settings. A free demo version can be downloaded using the button above, so you can experiment with SwipeGallery in RapidWeaver and test it with your own images. Additionally, powerful CSS filters and animation effects are available for quick selection in the stack settings, to apply to your thumbnail images. The setup of SwipeGallery involves no use of complicated code, making this a perfect gallery solution for both novice RapidWeaver users and experts alike! Locally sourced thumbnail images of irregular shapes can be automatically cropped square, to create a more consistent grid layout. Images can be sourced locally (by dragging and dropping them into the stack) or you can use warehoused images that are already stored online. A lot improvements have been made, including the use of SVG icons in the lightbox to ensure the completed gallery looks professional on retina displays. This stack has possible uses in many different projects and is definitely a stack you can use time and time again! Many of the features and settings present in the original Viewr stack have been migrated over into SwipeGallery. SwipeGallery is ideal if you want to quickly deploy a basic, responsive image gallery in your website.
0 Comments
Leave a Reply. |