Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Background Images

This lightweight extension creates a proportional background of an images collection for almost any object or page. It is the simplified  and standalone version of the [rz] Full Size Background extension with a more advanced core functionality.

Some features:

- Supports Virtually unlimited images of any size, type or orientation.
- Multiple instances even within same objects, and can be handled externally.
- Three transitions modes: cycle, transition and smooth.
- Fade timing and step for smoothest transitions.
- Timed sliding and delayed startup.
- Nine pivots with offsets for each image for advanced relocation and sizing.
- Custom zoom to fine-tune images presentation.
- Custom sequence: forward, back and random.
- Auto target for layers or pages and custom target for almost any object (text or others).
- Fully customizable pattern.
- Fully customizable images captions with links.
- Optional customizable navigation controls.
- Maximum backward, cross-browser and cross-platform compatibility.
- Lightweight, no dependencies, no jQuery.

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 2.3

- Instagram support has been replaced due to the changes introduced since 04-2020.
- If Instragram images are successfully loaded, they can be added to the Image list or they can replace it.

* New in version 2.2

- Improved support for mobiles that prevents scheme distortions due to the address bar auto-hide.

* New in version

- Horizonal and/or vertical offsets for the dots specific to the current image.

* New in version 2.1

- Improved slide effect; now it behaves normal or cycled (resulting in eight modes).
- Image-specific background color (meaningful with cycle-based effects and with slight opacities for background tint simulation).
- Space around the instance in percentages and/or pixels; this allows to setup the background areas to not be covered.
- Fixed a minor blur transition issue on Edge.
- Fixed a minor z-order issue in layers with other relative elements on some browsers.
- Minor code optimizations.

- New extension: [rz] Background Images (synchro); it allows to start all the [rz] Background Images instances in the same
  page at the same time once all of them are ready and their images have been loaded.

* New in version 2.0.2

- Selectable specific scripts for new wb14 Carousel variants.
- Minor script improvements.

* New in version 2.0.1

- Navigation dots can optionally have customizable ordinal numbers for the images, uppercased/lowercased letters or roman
  numbers; these dots can be colored, image-based or thumbnails based.
- Improved color setup for the navigation dots.

* New in version 2.0

This version completely replaces its predecessor with many advanced features and far smoother results.

- New core that optimizes the resources use and allows a longer battery time on mobiles.
- Improved and simplified time control for the effects.
- Improved and smoother fade effect.
- New four-directions slide effect.
- Easing support automatically applies to the involved effects.
- Improved progressive blur on transitions.
- New progressive zoom on pauses.
- New optional play/pause button with improved pagination behavior.
- Optional fade-in for the first image even when slide effect has been selected.
- Elegant fallback for unsupported features on older browsers.
- Improved 'excluded devices' manager for devices that face performance issues (automatically disables problematic effects).
- More custom functions available for better external control of the instance.

* New in version

- "Performance issues" category:
  Devices with performance issues can be excluded from the specific features that impact on them.

* New in version

- Optional blurred transitions (for even smoother effects, requires modern browsers).
- Improved external access (through the available custom functions).
- Improved collisions handling on multiple/repeated navigation actions.

* New in version 1.3

- Improved custom instance refresh using MyInstance.refresh(); function call.
- New MyInstance.first/prev/goto/next/last(); functions added for external access (see 'Available custom functions').
- Startup tweaked for a smoother initialization (prevents gaps on most complex schemes).
- Normalize multiple instances initialization.
- Fixed wrong 'same-image' pointer in navigation dots.

* New in version

- Improved cross-browser compatibility on nested/hidden layers.
- Improved startup on advanced scenarios.

* New in version

- Improved behavior with [rz] Stretch Layer, [rz] Layer Sizes Boundaries, [rz] Adaptive Framework and
  [rz] Block Framework extensions.

* New in version 1.2.1

- Entering the Instagram user id, images can be retrieved from the personal album (new extension provided for the connection).

:: Instagram module ::

- Descriptions are optional and automatically loaded from the source.
- Optional link to open the image on Instagram (so the visitor can login and comment).
- Selectable limit to load the images.
- Selectable resolution to optimize the use of the resources (a larger image size depends on availability).
- Lighweight and no jQuery dependant.
- Please note: Portions of this feature are based on a third party service, changes or even a permanent interruption may occur.

* New in version

- Workaround for an iOS 9+ elastic/bounce issue when the instance is placed on the body.

* New in version

- Workaround for an iOS tilt/refresh bug while handling css and scripts.

* New in version 1.2

- Improved fluid behavior for caption/description/link in images.
- Added RWD support for caption/description/link in images.
- Caption/description/link and pagination controls activation modes.
- Improved backward focus control compatibility.
- Improved support for instances on [deeply] nested objects (usually layers) and within wb-carousel, jQueryTabs, etc.
- Optional extra pause between images can be specified for each image (different/individual pause time is supported).

* New in version

- Improved compatibility for resize calculations.
- Workaround for an overflow Android bug (may apply design limitations, contact us in case of support needed).
- Workaround for an iOS double-tap issue.

* New in version

- External access to force an images rearrangement/refresh (useful for advanced and complex designs).
  New available function: MyInstance.refresh(); (replace MyInstance with the actual instance name.)
- Navigation controls can be at background (by default) or on top of the screen elements.
  This option only applies to the instance that is the background of a page.
  (This feature is not supported in quirks mode, in that case the controls will be shown as by default.)

* New in version 1.1

- Optional: Buttons navigation; "previous" and "next" image buttons with custom images sets and push effects.
- Optional: Dotted navigation; pointers to images with push effects and custom colors/images or thumbnails -
  fluid self-rearrange.
- Improved RTL/LTR support; captions and/or navigation controls can be right-to-left, left-to-right or default.
- Fixed an unstable full screen tint simulation issue in RTL schemes on older browsers.
- Fixed a sporadic startup refresh issue in RTL on older browsers.
- Optional image-size definition for some elements to allow a better implementation on Retina-based devices.
- New extension: A "lite" version that supports the same images/options but does not have the timed pagination
  controls; it can be useful for simpler projects -- easier and quicker to setup with shorter loading times.

* New in version

- Background tint (does not apply to 'smooth' fade mode).
- Images tint simulation.
- Crossfade tint (for both background and images); it is optional and when it is enabled, the tint transitions accordingly
  with the images - more noticeable in 'transition' and 'cycle' fade modes).

  (The tint effect simulation is optional and backward compatible.)

* New in version

- Fixed a startup issue in hidden display object.
- Added "random unique" feature in the "sequence" property to display only one image randomly when the page is loaded.
- Fixed a sporadic one-time "ghost" image at startup in IE11 and Chrome on Win8.1 64b.
- Improved fade sequence timing in Safari and iOS based devices.

How to use?

1. Design your page with its elements.
2. Drag and drop an extension instance.
3. Open the properties dialog and enter the image/s (and, optionally, you can customize the
    behavior and other parameters).
4.a. For layers background: drag the extension instance and drop it within the layer.
4.b. For page background: drag and drop the extension instance in the page.
4.c. For other objects background: Enter the id of the object you want to have the background.
5. Preview or publish.

How to get images from Instagram?

1. Once you designed your page and added the [rz] Background Images or [rz] Background Images (lite)
    instance, drag and drop just one instance of [rz] Background Images (Instagram) module.
2. Go back to the [rz] Background Images or [rz] Background Images (lite) instances and enter there
    your Instagram ID and your authorization Instagram Token.
3. Optionally, customize the Instagram connection in the Instragram category.
4. Preview or publish.

Please note:
In order to use the Instagram module, you must have a valid authorization token.
The are many services available, just do a Google search and find your preferred one or visit the following sites:

How to use the (synchro) module?

1. Design the page as you usually do and with all the [rz] Background Images instances you need.
2. Drag and drop the (synchro) module.
4. Preview or publish.

Available custom functions:

standard version only:

MyInstance.first(); show the first image.
MyInstance.last(); show the last image.
MyInstance.prev(); show the previous image.; show the next image.
MyInstance.goto(i); show the specified image, where 'i' is the image number within the images collection.
MyInstance.pause(); pauses the image change.; resumes the image sliding.
MyInstance.toggle(); pauses or resumes the image sliding.

both standard and lite versions:

MyInstance.refresh(); force an images rearrangement/refresh -- useful for advanced and complex designs.

(Replace 'MyInstance' with the actual instance name.)

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with