Post by jpo2709 » Sun Jun 05, 2016 8:00 am

A simple Module to turn a row into a parallax background effect, first module i have created as a test and thought i would share it.

you can download it from Mediafire:

https://www.mediafire.com/?t99cgdvko8cnyoh

To set it up you add an Image in a Banner, and assign the banner image in the Parallax module and add it to you page in the order you would like it to appear. When you start scrolling the content will scroll over the image, creating the Parallax effect.

instructions:

Installation:

1. Unzip the Rar file contents into you opencart root directory.

Usage:

Setting up the Banner image

1. From the Admin Panel goto DESIGN > BANNERS
2. Click the plus icon situated TOP RIGHT
3. Name your banner ie: Paralax row 1
4. Click the plus icon to add an image, click on the image to the right to open the image manager and upload you image and select it.
5. give the image a title, the parallax row does not use the link.
6. Click the save icon top Right.

Adding the Banner to the Parallax Module

1. Goto EXTENSIONS > MODULES and scroll down until you see the Parallax module
2. Click on the green icon to install the module
3. Now scroll down again to the Parallax module and click on the pen icon to setup the module.
4. Give it a Title
5. From the dropdown list select the Banner you created above (you can Keep the default size)
6. Change Status to ENABLED
7. Click the save icon Top Right

Setting up the Home page

1. Click on DESIGN > LAYOUTS
2. Select HOME by using the pen icon to the right
3. Click the plus icon at the bottom
4. from the right dropdow box select you parallax module you created above.
5. Select CONTENT TOP from the second dropdown
6. Give it the order you would like it to appear.
7. Click th save icon top right.

Done.

The Module resizes according to the width of the site, if you want full width add the code below to a custom css stylesheet:

@media (min-width:992px){
.container{width:100%}
}
@media (min-width:1200px){
.container{width:100%}
}

The Module uses a Jquery plugin so all credit goes to the plugin Developer. You can find the original project here:


http://pixelcog.github.io/parallax.js/

Newbie

Posts

Joined
Sun May 29, 2016 6:11 am

Post by IP_CAM » Sun Jun 05, 2016 12:31 pm

Great, but you did not mention an OC Version, compatible with this !
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by jpo2709 » Sun Jun 05, 2016 8:08 pm

completely forgot about that!, it was made and tested in version 2.2 so no guarantee it will work for previous versions.

Newbie

Posts

Joined
Sun May 29, 2016 6:11 am

Post by karlopencart » Mon May 15, 2017 3:49 am

Version 2.3.0.2 could you throw any light on why I'm getting a "permissions denied" and I have done the normal things adding permissions via users.

Thanks

User avatar
New member

Posts

Joined
Tue Oct 05, 2010 11:19 pm
Who is online

Users browsing this forum: No registered users and 17 guests