[rz] Background Images II *** UPD 2020-Apr-17 ***

[RZ] · Post by **[RZ]** » Fri Jan 23, 2015 9:45 am

[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!

mariojazz · Post by **mariojazz** » Mon Feb 02, 2015 7:34 pm

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

[RZ] · Post by **[RZ]** » Mon Feb 02, 2015 8:03 pm

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

mariojazz · Post by **mariojazz** » Mon Feb 02, 2015 8:10 pm

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

thanks

[RZ] · Post by **[RZ]** » Mon Feb 02, 2015 8:14 pm

what does this mean?

mariojazz · Post by **mariojazz** » Mon Feb 02, 2015 11:48 pm

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

[RZ] · Post by **[RZ]** » Tue Feb 03, 2015 5:39 am

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)

[RZ] · Post by **[RZ]** » Mon Mar 16, 2015 2:01 pm

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

[RZ] · Post by **[RZ]** » Wed Apr 22, 2015 2:23 pm

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

[RZ] · Post by **[RZ]** » Wed May 27, 2015 1:59 pm

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

[RZ] · Post by **[RZ]** » Wed Jul 15, 2015 6:14 am

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

[RZ] · Post by **[RZ]** » Mon Sep 07, 2015 7:32 am

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

[RZ] · Post by **[RZ]** » Tue Oct 20, 2015 1:57 pm

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

zinc · Post by **zinc** » Wed Oct 21, 2015 7:58 am

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

[RZ] · Post by **[RZ]** » Wed Oct 21, 2015 11:48 am

thank you

[RZ] · Post by **[RZ]** » Fri Nov 20, 2015 8:35 am

* New in version 1.2.0.1:

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

[RZ] · Post by **[RZ]** » Wed Dec 09, 2015 9:33 am

* New in version 1.2.0.2:

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

[RZ] · Post by **[RZ]** » Mon Dec 14, 2015 3:18 pm

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

[RZ] · Post by **[RZ]** » Thu Mar 10, 2016 10:50 pm

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

[RZ] · Post by **[RZ]** » Wed Mar 30, 2016 11:44 am

* New in version 1.2.1.2:

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

[RZ] · Post by **[RZ]** » Thu May 26, 2016 2:43 am

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

zinc · Post by **zinc** » Thu May 26, 2016 7:27 am

Ohhhh Fantastic!!! Thank you RZ.

[RZ] · Post by **[RZ]** » Thu May 26, 2016 7:39 am

thanks

[RZ] · Post by **[RZ]** » Sun Aug 14, 2016 10:27 am

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

[RZ] · Post by **[RZ]** » Mon Nov 21, 2016 1:04 pm

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

zinc · Post by **zinc** » Tue Dec 06, 2016 9:15 am

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/

[RZ] · Post by **[RZ]** » Tue Dec 06, 2016 9:19 am

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

[RZ] · Post by **[RZ]** » Wed Jan 03, 2018 9:38 am

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

zinc · Post by **zinc** » Wed Jan 03, 2018 9:49 am

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

[RZ] · Post by **[RZ]** » Wed Jan 03, 2018 10:44 am

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

[RZ] · Post by **[RZ]** » Wed Jan 17, 2018 4:24 pm

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

zinc · Post by **zinc** » Thu Jan 18, 2018 7:30 am

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

[RZ] · Post by **[RZ]** » Thu Jan 18, 2018 8:32 am

thank you for your support

[RZ] · Post by **[RZ]** » Fri May 11, 2018 11:58 am

* New in version 2.0.2

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

zinc · Post by **zinc** » Fri May 11, 2018 12:02 pm

[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!!!

[RZ] · Post by **[RZ]** » Fri May 11, 2018 12:16 pm

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

[RZ] · Post by **[RZ]** » Sat Jun 02, 2018 8:45 pm

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

zinc · Post by **zinc** » Sun Jun 03, 2018 5:14 pm

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

[RZ] · Post by **[RZ]** » Mon Jun 04, 2018 10:27 am

thank you for your support

onlye · Post by **onlye** » Thu Jul 12, 2018 4:47 am

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

[RZ] · Post by **[RZ]** » Thu Jul 12, 2018 5:23 am

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

[RZ] · Post by **[RZ]** » 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.

zinc · Post by **zinc** » Wed Jan 02, 2019 8:59 am

[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!!!!

[RZ] · Post by **[RZ]** » Wed Jan 02, 2019 9:35 am

thank you for your kind feedback

[RZ] · Post by **[RZ]** » Mon Dec 30, 2019 4:44 pm

* New in version 2.2

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

zinc · Post by **zinc** » Mon Dec 30, 2019 5:31 pm

Now we are cooking with gas!!!!

[RZ] · Post by **[RZ]** » Mon Dec 30, 2019 5:53 pm

since long time ago

[RZ] · Post by **[RZ]** » Fri Apr 17, 2020 1:31 pm

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

zinc · Post by **zinc** » Tue Apr 21, 2020 4:45 pm

A GEM in the toolbox!

[RZ] · Post by **[RZ]** » Tue Apr 21, 2020 5:03 pm

thank you