Home / JavaScript / AutoThumbs VR – Automatic Thumbnails for Vertical Rhythm (Images and Media)

AutoThumbs VR – Automatic Thumbnails for Vertical Rhythm (Images and Media)

Automated Thumbnails with a Single CSS Class

Help for Vertical Rhythm & Thumbnail Orientation

128 Demo Layouts of 4×Three and 16×9 Thumbnails

AutoThumbs VR routinely generates thumbnails with a top relative to their width in keeping with a specified side ratio and thumbnail orientation. It offers Three choices for thumbnail orientation – default (sq.), panorama and portrait, and helps vertical rhythm (VR). To create a thumbnail use class .autothumb by itself for a sq. or nearest sq. for VR <div class="autothumb col-sm-3"></div>, or mix it with .panorama for panorama orientation <div class="autothumb panorama col-sm-3"></div> or .portrait for portrait orientation <div class="autothumb portrait col-sm-3"></div>. Add photographs utilizing a css class with a background-image property pointing to your picture, eg. .img {background-image: url(../img/img.jpg);}. Try the demo recordsdata for examples utilizing Bootstrap Four as a grid system.

Desk of Contents

  1. CSS Recordsdata and Construction
  2. JavaScript
  3. Sources and Credit

A) CSS Recordsdata and Construction – prime

Index recordsdata showcasing AutoThumbs VR Boxed and Fluid Layouts in 4×Three and 16×9 ratios.

  1. index.html
  2. index-fluid.html
  3. 16×9/index.html
  4. 16×9/index-fluid.html

The “demos” directories demos/ and 16×9/demos comprise fluid and boxed demo layouts of 4×Three and 16×9 sq., panorama and portrait thumbnails with vGrid set to 24px in addition to masonry & mosaic layouts.

  1. demo/boxed/default – Boxed 1×1 sq. or nearest sq. for VR thumbnails
  2. demo/boxed/panorama – Boxed 4×Three panorama or nearest panorama for VR thumbnails
  3. demo/boxed/portrait – Boxed 4×Three portrait or nearest portrait for VR thumbnails
  4. demo/boxed/masonry – Boxed masonry & mosaic layouts of blended 4×Three thumbnails
  5. demo/fluid/default – Fluid 1×1 sq. or nearest sq. for VR thumbnails
  6. demo/fluid/panorama – Fluid 4×Three panorama or nearest panorama for VR thumbnails
  7. demo/fluid/portrait – Fluid 4×Three portrait or nearest portrait for VR thumbnails
  8. demo/fluid/masonry – Fluid masonry & mosaic layouts of blended 4×Three thumbnails
  1. 16×9/demo/boxed/default – Boxed 1×1 sq. or nearest sq. for VR thumbnails
  2. 16×9/demo/boxed/panorama – Boxed 16×9 panorama or nearest panorama for VR thumbnails
  3. 16×9/demo/boxed/portrait – Boxed 16×9 portrait or nearest portrait for VR thumbnails
  4. 16×9/demo/boxed/masonry – Boxed masonry & mosaic layouts of blended 16×9 thumbnails
  5. 16×9/demo/fluid/default – Fluid 1×1 sq. or nearest sq. for VR thumbnails
  6. 16×9/demo/fluid/panorama – Fluid 16×9 panorama or nearest panorama for VR thumbnails
  7. 16×9/demo/fluid/portrait – Fluid 16×9 portrait or nearest portrait for VR thumbnails
  8. 16×9/demo/fluid/masonry – Fluid masonry & mosaic layouts of blended 16×9 thumbnails

There are three css recordsdata included per thumbnail side ratio – recordsdata css/autothumbs-vr.css and 16×9/css/autothumbs-vr.css embrace types (together with photographs) for AutoThumbs VR. File css/demo.css consists of extra types for the demo pages. Bootstrap 4.1.Three css file can be included within the css listing.

  1. css/autothumbs-vr.css
  2. css/demo.css
  3. css/bootstrap.css
  4. 16×9/css/autothumbs-vr.css
  5. 16×9/css/demo.css
  6. 16×9/css/bootstrap.css

JavaScript – prime

There may be one js file that features the mandatory code for AutoThumbs VR – autothumbs-vr.js. By default vertical rhythm is about to vGrid = 24 for a vertical rhythm unit of 24px. To alter the vertical rhythm unit, open the js/autothumbs-vr.js or 16×9/js/autothumbs-vr.js and set vGrid to your chosen worth (with out “px”).

To customize the side ratio, edit the x=4 and y=3 variables (4×3) in file js/autothumbs-vr.js or x=16 and y=9 (16×9) in file 16×9/js/autothumbs-vr.js and set them up accordingly, contemplating that x corresponds to the longest aspect and y to the shortest aspect of a thumbnail. Bootstrap 4.1.Three JS (bootstrap.min.js) and jQuery 3.3.1 (jquery.min.js) are included too.

  1. js/autothumbs-vr.js
  2. js/bootstrap.min.js
  3. js/jquery.min.js
  4. 16×9/js/autothumbs-vr.js
  5. 16×9/js/bootstrap.min.js
  6. 16×9/js/jquery.min.js

C) Credit – prime

  • Unsplash Typography Assortment by Jeremy Beck
  • Bootstrap 4.1.3
  • jQuery 3.3.1

Best Price| | Preview

Source Link

Pace loading

Worth


Your Score:
3.8
( 1 votes)



About puturos