Virtuemart Support :: Topic: I can't find any docu. on Full Screen Slideshow (1/1)

Welcome, Guest

TOPIC: I can't find any docu. on Full Screen Slideshow

I can't find any docu. on Full Screen Slideshow 10 years 3 months ago #8266

Martin Holm Mortensen

Hi

I have installed the joomla vm template asymmetric manualy - one by one - but can't find any documentation on how to locate the included Full Screen Slideshow and how to get it to Work (can't see any special module and can't see any special settings in other modules)?

Further, I have tried to asign a slider to the backgroundslideshow position, but this looks bad and I have no way to configure the look.

Please advice - thanks :-)

The administrator has disabled public write access.

I can't find any docu. on Full Screen Slideshow 10 years 3 months ago #8267

Martin Holm Mortensen	AND the Parallax Effect - same issue - I can't find it? You wrote: " This is a parallax effect. It comes with built-in with our template. All you need to do is, find the parallax module in the "Module Manager" and change its content as you wish. "
	The administrator has disabled public write access.

I can't find any docu. on Full Screen Slideshow 10 years 3 months ago #8283

Support

Hi,

Using the "One-by One" method is the worst method to install our templates initially. One-by One is only exist for updates. So, just to update the template, you won't need to re-run the QuickStart and start everything from scratch.

You have to run the QuickStart for the initial installation because we are not releasing plain templates. There are tones of modules and Sample DATAs which will help you to start with. And this idea is valid for all of our templates. (not just asymmetric)

Parallax effect and the Full Screen Slideshows featured are just one of those.

Is there a special reason why you did run the "One-by One" method? Do you have like hundreds or thousands products already and don't want to lose them by starting everything scratch?

Is there a possibility you can run the QuickStart installation? Because i don't know where to start to guide you to have the same look as if you did run the QuickStart package.

But here are the quick infos about how to get full screen slideshow and parallax effect.

Slideshow:

Create a Custom HTML module and put these HTML tags inside:

<img src="images/slide1.jpg" border="0" />
<img src="images/slide2.jpg" border="0" />
<img src="images/slide3.jpg" border="0" />
<img src="images/slide4.jpg" border="0" />
<img src="images/slide5.jpg" border="0" />
...
...
... keep adding if you have more than 5 pictures to slide. But more than 5 images will increase the page loading time a lot and won't recommended.
...
...

Simply, list all the pictures with the ordinary image TAGs. Make sure those slide images have same resolutions. Also they should be large enough to cover the full screen. Recommended: 1600x1200 (pixel)

Then publish this module into this module position: backgroundslideshow

(This is a special module position only for our Full Screen Slideshow and don't publish any other module in this position, or everything will be messed up)

And through menu item selection, have this module to be published only on the homepage (or what ever page where you want to show the slideshow)

Then you will have the Full Screen Slideshow in what ever page this module is published (most likely on homepage though)

About the parallax effect. Again, create a Custom HTML module and put these HTML lines in it (to start with)

Attachment parallax.txt not found

Customize the content as you wish.
publish the module in this location: top-b and make to module be published on the "About us" page (or any page where you want to show the parallax effect).

The pictures are "background" and those pictures are found here:

/templates/flexible_asymmetric/images/parallax1.jpg
/templates/flexible_asymmetric/images/parallax2.jpg
/templates/flexible_asymmetric/images/parallax2b.jpg
/templates/flexible_asymmetric/images/parallax3.jpg
/templates/flexible_asymmetric/images/parallax4.jpg

and the CSS rules to load those background are in this CSS file:

/templates/flexible_asymmetric/css/extensions.css

look for these lines:

#parallax1{
	background:url(../images/parallax1.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 600px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
#parallax2{
	background: url(../images/parallax2.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 900px;
	margin: 0 auto;
	overflow: hidden;
	padding: 10px 0 0 0;
}
 
#parallax2 .bg{
	background: url(../images/parallax2b.png) 50% 0 no-repeat fixed;
	height: 900px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 10;
}
 
#parallax3{
	background: url(../images/parallax3.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 650px;
	padding: 10px 0 0 0;	
}
 
#parallax4{
	background: url(../images/parallax4.jpg) 50% 0 no-repeat fixed #FFF;
	background-size:100% auto;
	height: 400px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

You can customize the CSS rules as wish, or use them the way they are right now. In the DEMO we have used only 4 parallax effect block, but you can increase the number (to infinite) all you would need to is to follow the same HTML scheme and increase the numbers (#parallax5, #parallax6, #parallax7 ...etc) Also don't forget to update the JavaScript lines (that you see in the TEXT file I attached). If you have basic HTML and CSS knowledge you can easily handle this.

Regards,
Support

Last Edit: 10 years 3 months ago by Support.

The administrator has disabled public write access.