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] Full Size / Proportional Background Pack


This set of extensions allows you to have four types of proportional full-sized page/objects backgrounds; a static image, a slideshow and two video modes.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in v1.1.0.2

- Improved backward focus control compatibility.
- Workaround for a loop bug in the YT module (seems that YouTube changed some rules and
  apparently introduced some inconsistencies).

* New in v1.1.0.1

-Tweaks for RWD.
-More push effects for Slide Show buttons.

* New in v1.1

-Pivots support to make size and position adjustments with horizontal and vertical extra offsets in fixed pixels or percentage.
-Support for wb9 Slide Show object with image captions.
-Optimized objects handling for better performance with the Slide Show object.
-Can be used as a whole page background or even within a [resizable] layer context; backgrounds can be attached to target objects - auto: setup itself to its context (body/layer, depends on where the object was placed); body: setup itself as the body background; body layout: setup itself to be only the background of the scheme (applies i.e. to centered pages); entering manually an object id, attaches the background to that specific target object (i.e. text objects).
-Improved single image size handling and optimized algorithm for android based mobiles.
-Optimized keyboard/focus handling.
-Optionally can add a pattern that covers the whole Image or Slide Show (also applies for the video extensions in this pack).
-Single images, slides and navigation controls images cannot be dragged.
-Option to activate captions when the mouse is over the navigation control was deprecated and removed.
-The same instance/configuration can point to multiple Image and/or Slide Show objects (the objects ids must be comma separated).
-Improved backward compatibility (also supports ie5quirks mode!).
-Improved [rz] vPatch extension code for better compatibility with 3rd party code.

* New in v1.0.0.3

-Support for wb9 Slide Show object with navigation controls.
-Smaller code for the resize algorithm.
-Added further detection for mobile devices.
-Improved startup.

* New in v1.0.0.2

-Improved: more compact library code.
-New extension: [rz] vPatch. Instructions at the bottom of this document.

* The v1.0.0.1 minor update fixes a few critical issues in some browsers under certain circumstances

-IE:
(FLV)
z-index issue
unreliable autostart
non-responsive control panel
note: quirks mode is no longer supported for YT/FLV
-Firefox:
(FLV)
z-index issue
-Safari:
(YT/FLV)
unreliable autostart
non-responsive control panel
-Chrome:
(YT)
random crashes on resize events
-Lunascape:
(YT/FLV)
unreliable autostart
non-responsive control panel
warning: a limitation is still present in LunaScape (only Trident Engine mode, Gecko and WebKit modes are ok), the control panel
doesn't work as expected in FLV; a browser-engine bug?



[rz] FullScreen Background

1. Automatically converts an image object into a fullscreen proportional background.
2. Also works with the standard SlideShow object.
3. Multi-instance.
4. Lightweight.
5. Unobtrusive, this means that slideshows or image objects preserve their normal functionality such as events/links/etc.

How to use?

1. Drag and drop an Image object or a SlideShow object.
2. Drag and drop this extension and enter the object to convert.
3. Publish or preview.


Enjoy!

* Resize your browser to see it in action!


[rz] FullScreen BG YouTube

Put YouTube videos as background instead of static images and build your control panel with your own images!

How to use?

1. Drag and drop an Image object.
2. Drag and drop this extension and enter the YouTube video ID.
3. Optional: drag and drop the [rz] Full Screen Background extension to display a static image in case the visitor's browser doesn't display Flash (like iDevices).
4. Publish or preview.


Enjoy!

* Resize your browser to see it in action!
* Please note: most options related to user interaction are not available in preview mode.


[rz] FullScreen BG FLV

Put local FLV videos as background instead of static images and build your control panel with your own images!

How to use?

1. Drag and drop an Image object (optional, but strongly recommended in case the visitor's browser doesn't display Flash).
2. Drag and drop this extension and enter the flv media file.
3. Drag and drop the [rz] Full Screen Background (see #1) extension to display a static image in case the visitor's browser doesn't display Flash (like iDevices).
4. Publish or preview.


Enjoy!

* Resize your browser to see it in action!
* Please note: most options related to user interaction are not available in preview mode.
* FLV player from Jeroen Wijering


About the FLV and YouTube videos:

If you want to build your own control panel, here are the available functions:

  MyObjectID.play()
  MyObjectID.pause()
  MyObjectID.stop()
  MyObjectID.volumedown()
  MyObjectID.volumeup()
  MyObjectID.mute()
  MyObjectID.unmute()


Add these functions in any object that supports events.

(please note: you must publish your page to see them work)


[rz] Fullscreen/Proportional Background vPatch

This lightweight extension/patch allows you to have fullwidth backgrounds with a bounded height.

How to use?

1. In a new fresh page, design your background as you usually do (i.e. useful for Google Maps).
2. In your main page, drag and drop this extension.
3. Open its properties dialog and point to the background page.
4. Publish or preview.


Enjoy!

Optionally, you can set-up margins!
Please note: this extension doesn't support the option 'Center this page in the browser window horizontally and vertically'; this means, you can have not centered or horizontally (only) centered pages.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with