Stacks Image 97

Get up to 50% back on the purchase of the Axyn Ecwid Stacks

Click here for details

Thanks! Please check the following:
Copyright (c) 2019 Axyn Technology (Ricardo Ruggiero)
All rights reserved.

This software is provided as is without any guarantees or warranty. In association with the product, Axyn Technology makes no warranties of any kind, either express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, of title, or of non-infringement of third party rights. Use of the product by a user is at the user’s risk. ALL SALES ARE FINAL.

NO REPRESENTATIONS OR WARRANTIES, EITHER EXPRESS OR IMPLIED, OF MERCHANTABILITY, FITNESS FOR A SPECIFIC PURPOSE, THE PRODUCTS TO WHICH THE INFORMATION MENTIONS MAY BE USED WITHOUT INFRINGING THE INTELLECTUAL PROPERTY RIGHTS OF OTHERS, OR OF ANY OTHER NATURE ARE MADE WITH RESPECT TO INFORMATION OR THE PRODUCT TO WHICH INFORMATION MENTIONS. IN NO CASE SHALL THE INFORMATION BE CONSIDERED A PART OF OUR TERMS AND CONDITIONS OF SALE.”

Image Replacer

For Stacks 3.x and 4.x
Image Replacer
Advanced stack allowing user to replace an image with his/her own image, dynamically and temporarily.

IMAGE REPLACER

Advanced Add-on for Rapidweaver.

Image Replacer is an innovative advanced stack, which allows replace any image with a local image dynamically on your web page.

With Image Replacer you can dazzle your customers and clients, to display their own photos or images in different scenarios. As demonstrated below, the web user can choose a different living room wall image, and replace with his/her own.

Although it is simple to use this stack, some understanding of HTML is necessary. Please follow the examples below.

Setup Instructions

Stacks that support image backgrounds

The first step is to assign a custom ID to the stack with the background which you'd like to be replaceable. If your stack does not support custom ID's, you most likely may still be able to use Image Replacer, as most stacks (except for inline stacks) have IDs automatically generated by the Stacks Plugin. In the example below the stack ID# is 18.
Background Image
In this example, we are using the standard 1 column stack. We setup this stack to have an image background. Refer to the image for a example of settings.
In the Image Replacer stack settings, give it an unique local storage ID, and enter the ID of the target stack background. In this case, 'stacks_in_18_page0' (which you can find by viewing the source code). If you select "Reset on load" the image will be reverted to the website image, and the local storage image is reset every time the page is reloaded.
That is it! All other settings are optional. You may display text instead of icons for the button, or display nothing at all, and setup your own buttons. (Buttons API instructions coming soon!)

Foreground Image Stacks or UIKit background Stack.

First give an ID to the image that you'd like to be replaceable, in this case it's a UIkit3 background stack. If your stack does not support custom ID's, you most likely may still be able to use Image Replacer, as most stacks (except for inline stacks) have IDs automatically generated by the Stacks Plugin as explained on the previous example.
Background Image
Then, in the RW View menu select "View Source" , and search for the ID that you set for that image. In this case, "my-bk-image"
In the Image Replacer stack settings, give it an unique local storage ID, and enter the ID of the target image and the "target" source attribute, in this case the it is "data-src" or often it is "src". If you select "Reset on load" the image will be reverted to the website image, and the local storage image is reset every time the page is reloaded.
That is it! All other settings are optional. You may display text instead of icons for the button, or display nothing at all, and setup your own buttons.

Button API Functions

If you'd like to hide the default buttons and create your own to place them somewhere else in the page, hide the stacks buttons and use the following functions to control the image.

To load an image use the following javascript function, replace 'objectName' with the stack 'Storage ID'

To set it up associate the function with an html file input field. For example:

<input id="inputID" type="file" onchange="storage1.insert(this)">

objectName.load() —> for example: storage1.load(obj)

obj = the object id of the

To reset an image use the following javascript function, replace 'objectName' with the stack 'Storage ID'

objectName.reset() —> for example: storage1.reset()

To move the position of the image use the following javascript function, replace 'objectName' with the stack 'Storage ID'

objectName.position(axis, move) —> for example: storage1.position(0, 5)

axis = 0 move image horizontally, 1 move image vertically
move (in px) = use a positive/negative integer to increase/decrease the x,y position of the image, for example: 5

To scale the image use the following javascript function, replace 'objectName' with the stack 'Storage ID'

objectName.scale(axis, scale) —> for example: storage1.scale(1, 0.2)

axis = 0 move image horizontally, 1 move image vertically
scale = use a positive/negative value between 0 and 1 to increase/decrease the horizontal or vertical size of the image, for example: 0.5 .

Usage example of Image Replacer

Select your own background image!
Use arrows to adjust image size and positioning.

Stacks Image 12
© Copyright 2018-2019 - All rights reserved.