March 6, 2015 at 22:04A large selection of links about galleries and everything related to them
- Transfer
Dudley Storey, author of Pro CSS3 Animation, presented a selection of his articles from demosthenes.info about galleries on sites and everything related to them. Solutions use HTML, CSS and PHP in various combinations, the text of articles in English. At the beginning of each article is a demonstration of the effect that the author speaks of.
Animated captions with filters and transformation:
Image galleries with large images expanding by hovering / tapping on a thumbnail. In fact, the simplest types of galleries.
Image galleries with large thumbnail-expandable images.
Galleries That Use the Flexbox Element
Galleries with images, the full-size display of which limits the functionality of the page.
User-friendly image filtering and sorting
A technique for creating simple “before and after” options to demonstrate the source and the result of work.
Grid Image Solutions
Images that appear randomly each time the page loads.
Full-size images that are zoomed in and out stop and disappear.
Solutions for organizing the appearance of images one after another
Automatically generate image captions using JavaScript & PHP.
Captions
Animated captions with filters and transformation:
- Creating Signatures Using CSS Transitions
- 3D "domino" with a signature
- Animated caption insertion with background filtering
- Appearing label with filtering and using the clip property
- The appearance of various signatures when hovering over different parts of the same image
On-hover galleries
Image galleries with large images expanding by hovering / tapping on a thumbnail. In fact, the simplest types of galleries.
- Simple CSS Gallery
- Animated gallery with slideshow and CSS3 shading effect
- Simple gallery with CSS fan effect
- Expanding thumbnails using the object-fit property
On-click galleries
Image galleries with large thumbnail-expandable images.
- Animated gallery with a permanent (image, the expanded version of which opens when the page loads) image
- Gallery with a permanent image. Part 2
- Simple gallery in PHP
- Another simple gallery
- Four block gallery
Flexbox galleries
Galleries That Use the Flexbox Element
Lightboxes
Galleries with images, the full-size display of which limits the functionality of the page.
Sliders and carousels
- Animated slider
- Responsive Slider
- Responsive slider with captions
- CSSslidy: Generating Responsive Slider
- CSSslidy 2.0
3D galleries and effects
- Origami: CSS3D folding gallery
- ImgDex: HTML5 gallery simulating a rotating catalog with cards
- Simple 3D CSS carousel
- Advanced 3D Carousel in CSS
- Rotating images with dynamic shadows.
Content Filters
User-friendly image filtering and sorting
Image Modification
A technique for creating simple “before and after” options to demonstrate the source and the result of work.
Grid systems
Grid Image Solutions
Image randomization
Images that appear randomly each time the page loads.
Using the Ken Burns Effect
Full-size images that are zoomed in and out stop and disappear.
Consistent appearance
Solutions for organizing the appearance of images one after another
Signature Generation
Automatically generate image captions using JavaScript & PHP.
- Auto-generate signatures based on file name
- GET auto-generated signatures
- Auto Signature Generation Using JS
Useful Paysto solutions for Habr readers:
→ Get paid by credit card right now. Without a site, IP and LLC.
→ Accept payment from companies online. Without a site, IP and LLC.
→ Accepting payments from companies for your site. With document management and exchange of originals.
→ Automation of sales and servicing transactions with legal entities. Without an intermediary in the calculations.
→ Accept payment from companies online. Without a site, IP and LLC.
→ Accepting payments from companies for your site. With document management and exchange of originals.
→ Automation of sales and servicing transactions with legal entities. Without an intermediary in the calculations.