magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
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


DEMO


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

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

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

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:
http://jelled.com/instagram/access-token
http://jelled.com/instagram/lookup-user-id

Available custom functions:

standard version only:


MyInstance.first(); show the first image.
MyInstance.last(); show the last image.
MyInstance.prev(); show the previous image.
MyInstance.next(); show the next image.
MyInstance.goto(i); show the specified image, where 'i' is the image number within the images collection.

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

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with