How to preload images in ionic-img-viewer to avoid blinking?

Cache the high-resolution image before opening the viewer using Ionic's caching mechanisms or preload it in your component. The README mentions this is crucial for smooth animations to prevent blinking during transitions.

Can I use ionic-img-viewer with Ionic React?

It's designed for Ionic Angular, so integration with Ionic React may require adaptations or a wrapper. Check community forums for guidance, as the plugin relies on Angular-specific modules and directives.

Ionic image viewer or photo-viewer: which is better?

Ionic Image Viewer is simpler and focused on Twitter-like gestures, ideal for basic interactions. Photo-viewer libraries might offer more features like galleries or social sharing. Choose based on your app's need for simplicity versus extended functionality.

How to handle close events in ionic-img-viewer?

Use the (close) event with the directive or set the onCloseCallback option in programmatic usage, as demonstrated in the README examples. This allows executing custom logic right after the viewer dismisses.

Does ionic-img-viewer support video files?

No, it's specifically for images only. For video playback in Ionic apps, you'll need to integrate a separate video player library or build a custom solution.

How to install ionic-img-viewer in an existing Ionic project?

Run npm install --save ionic-img-viewer, import IonicImageViewerModule in your AppModule, and verify peer dependencies match your Ionic version, as outlined in the installation steps to avoid compatibility issues.

Is ionic-img-viewer accessible for screen readers?

The README doesn't mention accessibility features, so you'll likely need to add ARIA attributes or custom code to ensure compatibility with assistive technologies, which adds development overhead.

Open-Awesome

Image Viewer

MITTypeScriptv1.3.2

Ionic component for viewing images with Twitter-inspired gestures like tap-to-fullscreen and slide-to-close.

GitHub

280 stars116 forks0 contributors

What is Image Viewer?

Ionic Image Viewer is an open-source component for Ionic 2+ applications that enables interactive image viewing with gestures like tap-to-fullscreen, slide-to-close, and pinch-to-zoom. It provides a Twitter-inspired user experience, making it easy to integrate smooth image visualization into mobile apps without complex custom implementations.

Target Audience

Ionic developers building hybrid mobile applications who need a ready-to-use, gesture-based image viewer component with native-like interactions.

Value Proposition

Developers choose Ionic Image Viewer for its simplicity, Twitter-like UX, and seamless integration with Ionic projects, reducing development time for image handling features compared to building from scratch.

Overview

Ionic 2+ component providing a Twitter inspired experience to visualize pictures.

Use Cases

Best For

Adding interactive image galleries in Ionic apps
Implementing gesture-controlled image viewers in mobile applications
Enhancing user experience with smooth fullscreen image transitions
Displaying high-resolution images from thumbnails with preloading
Creating native-like image interactions in hybrid apps
Building photo-heavy apps with intuitive zoom and close controls

Not Ideal For

Projects not using the Ionic framework, such as pure web apps or apps built with React Native or Flutter
Applications requiring advanced media handling like video playback or 360-degree image views
Teams needing out-of-the-box accessibility features without additional development work
Apps with highly dynamic, non-cached image content where preloading isn't feasible, risking poor animation performance

Pros & Cons

Pros

Native-like Gestures

Implements tap-to-fullscreen, slide-to-close, and pinch-to-zoom for an intuitive, Twitter-inspired user experience, as highlighted in the features list.

Easy Integration

Can be added as a directive to img tags or used programmatically with minimal setup, with clear examples in the usage section for quick implementation.

Thumbnail Support

Allows displaying high-resolution images from thumbnails with configurable options like fullResImage, though the README notes preloading is needed for smooth transitions.

Programmatic Control

Offers an ImageViewerController for creating instances with callbacks and backdrop dismissal settings, giving developers fine-grained management over the viewer.

Cons

Animation Dependency on Preloading

Smooth transitions rely on images being cached beforehand; otherwise, users may experience blinking or lag, as the README explicitly warns about this limitation.

Ionic Framework Lock-in

Only compatible with Ionic 2+ applications, making it unsuitable for other mobile or web frameworks without significant modifications or workarounds.

Limited Customization Options

Configuration is minimal with just a few options like fullResImage and onCloseCallback, lacking features for accessibility, image annotations, or extensive styling.

Frequently Asked Questions

Related Projects

Lazy Load

🖼 A small library for lazy loading images for Angular apps with zero dependencies

Stars751

Forks140

Last commit3 years ago

Image Loader

Ionic 2+ Component that loads images in a background thread and caches them for later use

Stars432

Forks133

Last commit3 years ago

Signatur

Angular2 Component for szimek / signature_pad

Stars174

Forks162

Last commit4 years ago

Gallery Modal

Ionic Gallery Modal (to show all your photos)

Stars164

Forks78

Last commit7 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub