www.wysiwygwebbuilder.com

[rz] Background Images II v2.3

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 fade transitions modes: cycle, transition and smooth.
- Four slide directions for transitions.
- 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.


DEMO


HTML 4.01 Transitional
W3C compliant


* 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 2.1.0.1

- 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 1.3.0.2

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

* New in version 1.3.0.1:

- 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 1.2.1.2:

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

* New in version 1.2.1.1:

- 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 1.2.0.2:

- Workaround for an iOS 9+ elastic/bounce issue when the instance is placed on the body (page containing full sized layers?).

* New in version 1.2.0.1:

- 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 1.1.0.2:

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

* New in version 1.1.0.1:

- 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 in 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 1.0.0.2:

- 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 1.0.0.1:

- 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.

(If you are using the Instagram module, you must put its instance before the background instance.)

Enjoy!

Hi
This would spread like Fullsize BG vpatch,but more sophisticated?

hello
the [rz] Fullsize Background does not need the vPatch anymore, however it is still included for previous projects backward compatibility reasons and for other applications like access to external maps and other similar responsive targets
this lightweight extension has other advanced features and has no dependencies at all, even does not need jquery and loads faster (of course this may be affected by the images sizes but not by the extension size itself)
with regards

for example with this extension would be easier to put a link to a page in php project?

thanks

what does this mean?

I want to say that I can put any link which goes perfectly for example, a link with a form

you can setup captions with links for each image
these links can link to any page, even can trigger events (if you have some basic knowledge and imagination)

* New in version 1.0.0.1:

- 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.

* New in version 1.0.0.2:

- 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 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 in 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 1.1.0.1:

- 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.0.2:

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

* 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).

The **BEST** got better!!!!

thank you

* New in version 1.2.0.1:

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

* New in version 1.2.0.2:

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

* 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 1.2.1.1:

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

* New in version 1.2.1.2:

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

* 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.

Ohhhh Fantastic!!! Thank you RZ.

thanks

* New in version 1.3.0.1:

- 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.0.2

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

For those of you who use the instgram feature of this extension, you would need an access token. This site make it a doddle to obtain one:

http://instagram.pixelunion.net/

thank you
with no doubt it will be useful for many users

* 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.

One of the most important extensions for WWB. The basis of ALL my work and I cannot stress how important this extension is for serious design. HIGHLY RECOMMENDED!!!

thank you for your kind words and for supporting the hard work behind the scenes

* 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.

A Total GEM!!!!!! Thank you RZ!

thank you for your support

* New in version 2.0.2

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

[RZ] wrote: ↑Fri May 11, 2018 11:58 am * New in version 2.0.2

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

Needless to say: THANK YOU!!!

thank <you> for supporting my hard work behind the scenes!

* 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.

Thank you so much for the implementing my requests. Most grateful!!!!

thank you for your support

Is the license for a website developer a per site license? ie i develop for customers, is a license required for each customer website I use background images?

thanks

please contact privately for details
(following the links below this post)

* New in version 2.1.0.1

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

[RZ] wrote: ↑Mon Dec 31, 2018 8:18 am * New in version 2.1.0.1

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

Lovely feature!!!!

thank you for your kind feedback

* New in version 2.2

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

Now we are cooking with gas!!!!

since long time ago

* 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.

A GEM in the toolbox!

thank you