Panorama with Paver

janvier 2019 (last edited avril 2020)

Panorama with Paver

Interactive photo panorama

Made with Paver JS plugin.
Only works on desktop currently, issues to fix on mobile.

Roll over the image!

Customizer > Code > Code head (or page HTML)

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/paver/1.3.4/css/paver.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paver/1.3.4/js/jquery.paver.min.js"></script>

HTML

<div class="panorama" data-meta=true>
    <img decoding="async" src="/path/to/image" alt="no red sails" title="Sunset" />
</div>

CSS

.panorama {
	height: 400px;
	overflow-x: scroll;
	overflow-y: hidden;
}
.panorama img {
	height: 100%;
}

jQuery(function($) {
    $('div.panorama').paver();
});

ACTUALITÉS EN RELATION :

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Panorama with Paver

Panorama with Paver

Interactive photo panorama

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box