Marco's parallax background scroller for Joomla!

Parallax background scrollerThis is a nice background scrolling effect with a simulation of a pseudo parallax effect. You can insert one or more image in your articles and define an horizontal stripe (view port) to see the images as they was really a landscape through a window. See this plugin in action!

A plugin for parallax background scrolling in Joomla!

 

Features

  • Easy to use and configure
  • CSS3 and responsive
  • plugin works on J2.5 and J3.x sites;

This extension is also published on http://extensions.joomla.org, if you like, it vote it or write a review, thank you. 

Kwown bugs

Does not works on all IOS devices.

Does not works on some Android devices (works on FF, but not on default Android 2.x browser or Dolphin).

 

This is not a bug, really, it's the not compliant support for CSS3  in these devices.

 

 

{marcoparallaxbground height="280" image="marco-parallax-fezzano.jpg" caption="Fezzano bay in a sunny day"}

Fezzano bay in a sunny day

the joomla logo Plugin Configuration

Simply download the plugin, install it and activate it:

  • Default image path
    Insert default image path, from site root, for relative path in image name. Starting and trailing slashes are required;
  • Default image
    Insert the default image name. You can use relative/absolute path or full URL of background image (see later);
  • Image Caption
    Enter text for the default image caption (if any);
  • Height of image
    Height of image on background. image should be almost 2 times the viewport;
  • Load css
    load default css styles;
  • css ID for container
    Set a css ID; left blank for auto ID;
  • Additional css styles
    Insert css rules for plugins (Load css must be enabled );

 

You can use the Additional css styles text area to insert specific css instruction for the pages with the scroll effect. now I used:

body{ overflow-x: hidden; }
aside{ position: relative; z-index: 10; }
.mmlImageInfoWrap{ text-align: right; padding: 5px; }

to avoid the horizontal scroll bar due the image and to let the menu float over image and for padding caption.

 

{marcoparallaxbground image="marco-parallax-laral.jpg"}

 

Plugin Parameters

Of course there is the remote possibility that you do not want the same image on each page. This is the reason why you can insert the plugin and specify the parameters:

Note: emphasis <em> in plugin code example is only to avoid plugin activation, you have to insert it as standard plain text!

Use: {marcoparallaxbground image="" caption="" height="" cssid=""}

  • image
    Insert the default image name. You can use relative/absolute path or full URL of background image.
    • if Image name strats with 'http' it is supposed to be an URL;
    • if Image name strats with '/' it is supposed to be an absolute path from site root;
    • otherwise it is supposed to be a relative path from the 'Default image path';
  • caption
    Enter text for the image caption;
  • height
    Height of image on background. image should be almost 2 times the viewport;
  • cssid
    css ID for container if you need a site unique css id, left blank for auto ID.

All attributes override are optional.

Download J2.5 and J3.x version

This extension is also published on http://extensions.joomla.org, if you like, it vote it or write a review, thank you. 

Commenti   

0 #16 Vero 2014-11-24 19:43
Hi,
{marcoparallaxb ground image="images/f ruits_10517173_ small.jpg" caption="" height="280" cssid=""}

I'm using Joomlla 2.5 with an html module. I can't make this work fine. When I see the web page I don't see any image, but just the code in its place.
Can you help me?

====Answer
Hi Vero,
I suppose you forgot to enable plugin processing (Prepare Content) in html module.

bye,
marco
Citazione
0 #15 catherine 2014-11-22 08:42
Hi Marco, it's me again :-)
As you can see on the website I've changed the dimensions of my pictures and now, it's great. Thx for your advise. I have another question. It looks great but it doesn't work on my iphone6. I know that you've mentioned but is there a workaround so that you can see the images without scrolling view? It's so pity that it doens't work because there are a lot of people who's a IOS iphone. Thanks in advance, Catherine

====Answer

Hi Catherine,
someone, like you, thinks we should find some workaround to make ios devices working.
I don't subscribe to this point of view: apple have to fix his buggy css implementation.
but standards are standards, microsoft understood it, now it's time for apple...

bye,
marco
Citazione
0 #14 Herman 2014-11-19 09:52
Hi Marco, I cant get this to work, i used your code and pasted it it below, can you please see if it is ok?

{marcoparallaxbground image="http://w ww.lanocare.co. za/images/bg1.j pg"}
Citazione
0 #13 Catherine 2014-10-23 15:44
Hi Marco, you have a great parallax. I have a 1350 x 500 bg image. when I put them in the parallax, a custom HTML with the parameter: {marcoparallaxb ground height="500"ima ge="Face.jpg"}. I can see the image but it's only the middle of them. The image is smaller then the Original image. Is there something that I could change in the css? Thanks a lot , Kind Regards, Catherine
Citazione
0 #12 andromeda 2014-10-20 22:06
Hello The same as : Katelijne

-----------------------------

#10 Katelijne 2014-10-13 10:31
Hi, We are using Chrome as default browser for creating our new website. We are using your parallax slider who's amazing but we have a problem with the bg images. He doesn't slide over the images. In firefox and IE, everythings works great.
We are using : {marcoparallaxb ground height="500"ima ge="boeken_bg2. jpg"} Is there anything you know about using Chrome as browser? It used to be work as it works in the other browsers. Thanks for any help. bye, Katelijne

-----------------------------
I just install the plugin and its WONDERFULL GREAT WORK
Citazione
0 #11 Andy 2014-10-14 13:00
Hello Marco!

I Love your plugin, it does mostly what I need for my site.

I was wondering how can I achieve the 100% width look you have on this demo site? If I apply the plugin to my sites the image only stretches to the width of the content container.
I guess I'm missing something (some css styles or so?).

Thanks in advance for any help.

Best regards
Andy

===Answer
Hi Andy!
typically this is a css issue: check for position:relati ve or overflow:hidden in the css rules in higher level divs (containers);
usually, well written templates have not position:relati ve or overflow:hidden to modify block positioning.

bye,
marco

===Update
it was a position:relati ve in the container element
Citazione
0 #10 Katelijne 2014-10-13 10:31
Hi, We are using Chrome as default browser for creating our new website. We are using your parallax slider who's amazing but we have a problem with the bg images. He doesn't slide over the images. In firefox and IE, everythings works great.
We are using : {marcoparallaxb ground height="500"ima ge="boeken_bg2. jpg"} Is there anything you know about using Chrome as browser? It used to be work as it works in the other browsers. Thanks for any help. bye, Katelijne
Citazione
0 #9 Rainer Lara 2014-10-08 15:02
I have noticed that when I omit the starting "/" for the url using firebug, my background image shows without any problem, but I do not know how to change this from within the code. Could you give me a hand?

This is the original code I get from firebug:


This is what I changed:


Notice that the original code places an extra "/" at the biginning.

I am using Joomla 3.3.6

Thanks in advance.

=== Answer
Hi Lara,
sorry, but code is stripped from comments (security reasons, but you can send the code by mail)...

anyway read carefully instructions about pathes and images; the first is an absolute URL, the others are relative URLs: see what you have in 'Default image path' parameter.

have a nice day,
marco
Citazione
0 #8 Laurens 2014-08-04 14:32
Hello,

I would like to add a div inside the paralax window.

Any pointers of how to accomplish this?

Kind regardsm
:auren Hoogland

===Answer:
hi laurens,
simply modify the php code and change the tmpl as you like: this plugin has not a separated tmpl (anyway supported only in j3+)

bye,
marco
Citazione
0 #7 Ajithkumar 2014-07-12 04:40
== Hey Marco...
It works fine .. Thanks for your good response..

Cheers..!!
Ajith
Citazione

Aggiungi commento

Please note: URL in text are not linked and user's site address is only for internal use and is not published.

Comments are human checked. All spam will be removed, so don't waste your time and, especially, mine!

Codice di sicurezza
Aggiorna

L'estate si avvicina hai già trovato l'albergo per le vacanze? cerca un albergo al mare o un hotel in montagna ove trascorrere le tue vacanze.