How to Install AviaSlider step by step? « Support Forum | Kriesi.at

Support Forum » Other Themes

How to Install AviaSlider step by step?

11 posts from 5 voices

Started 5 months ago by dlucci
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

dlucci
Member

Hi All,

I just bought Aviaslider because I want to use it as a photo gallery slider show in my travel website.

Honestly I thought was kind of easy to set up this plugin, but I did not find any set up instructions in the file zip to help me out, and there is nothing at all in internet to take for granted.

I am now disappointed!

How someone can sell something without giving instructions?

Anyway...apart my critics...Can anyone kindly show me how to use this plugin into my website?

I do not use it word press but SBI for building my website.

Thanks a million to that person will stop by and be so gentle to help me.

David

Posted 5 months ago #

Dude
Dude

Hey,
first include following files in the head section (before the closing head tag which looks like </head>):

<!-- ########## CSS Files ########## -->
	<!-- Screen CSS -->
	<link rel="stylesheet" href="http://my-website.com/aviaslider/style.css" type="text/css" media="screen" />
  <!-- ########## end css ########## -->	

	<!-- JAVASCRIPT GOES HERE -->
	<script type='text/javascript' src='http://my-website.com/aviaslider/js/jquery.js'></script>
	<script type='text/javascript' src='http://my-website.com/aviaslider/js/jquery.aviaSlider.min.js'></script>

       <script type='text/javascript'>
         jQuery(document).ready(function(){

          // here you can see the slide options
             jQuery('#aviaslider').aviaSlider();

         });

       </script>

And in the body section, add following code to display the slideshow/images:

<ul id="aviaslider">
             <li><a href="http://my-website.com/images/slides/1.jpg" title=""><img src="http://my-website.com/images/slides/1.jpg" alt="" /></a></li>
             <li><a href="http://my-website.com/images/slides/2.jpg" title=""><img src="http://my-website.com/images/slides/2.jpg" alt="" /></a></li>
             <li><a href="http://my-website.com/images/slides/3.jpg" title=""><img src="http://my-website.com/images/slides/3.jpg" alt="" /></a></li>
             <li><a href="http://my-website.com/images/slides/4.jpg" title=""><img src="http://my-website.com/images/slides/4.jpg" alt="" /></a></li>
       </ul>

Obviously you need to adjust the url to the images and the slideshow css/js files.

Posted 5 months ago #

dlucci
Member

Ok thanks for your prompt reply.

But I am wondering where I have to write these codes.

and I need to make an embed code to put into my website.

It will works?

Thanks

Posted 5 months ago #
Devin
Moderator

Hi David,

You'll need to add the first part into the head section of your html file so that it pulls the proper scripts. Then the second bit of code into the main body of your html file where you want the actual slideshow to appear. The content of each slide will be the image src as in the demo.

I'm not sure what you mean by embed code, could you explain a bit more?

Regards,

Devin

Posted 5 months ago #
dlucci
Member

Hi Devin,

for embed code, I mean to copy and paste the hotml code into my webpage and so to get it published.

The thing is for making my website I do not use dreamweaver, or anything similar to that. But I use a WYSIWYG website platform like word press. In my case is SBI! So there is no html code involved.

That's why I need to understand how I can use this plugin and have an embed code to copy in paste as a RAW HTML code into my home page.

Maybe do I have to use a CMS?

Posted 5 months ago #
Devin
Moderator

Unfortunately this does not have any kind of editor other than HTML and is not a plugin but a stand alone set of code used.

You need to build the slideshow using the code sample and then paste in the HTML to your page where you want it.

If you can view the HTML of your home page, then you can use this.

Regards,

Devin

Posted 5 months ago #
AzArgyll
Member

I just bought and followed the instructions above, but I must be missing something - which is easy for me to do unfortunately. I made the mods to where the files are located and everything is uploaded, but the result I'm getting is quite different from what it should be.

Here is my example - apologies in advance. I would appreciate any help to make this work like it's supposed to, instead of how I have it.

http://dragonsflight.biz/demo/

Posted 4 months ago #
Devin
Moderator

Hi AzArgyll,

It looks like you are missing the controlls.gif and the bg.jpg files. The controlls.gif may be the issue. Check the main files you downloaded and it should be images>layout folder. Then upload it to your images>layout folder.

Regards,

Devin

Posted 4 months ago #
AzArgyll
Member

Thanks Devin for your response.

That put the controls there, though that isn't the problem I'm having.

The photos are all being loaded, one after another, all of them displayed, then all but one disappear. Then instead of the transition, the next image seems to load a top part of the image, then the image is swapped out. There is no nice transition.

I'm wondering if there is a specific version of php required for the scripts or am I doing something wrong in the html?

Posted 4 months ago #
AzArgyll
Member

Thanks again Devin. I got to thinking and made sure that all of the files were transferred to my site. Then made sure that the html was right and now it's working just like I want it too.

Thanks,

Posted 4 months ago #
Ismael
Moderator

Hey,

Glad you fixed it. :)

Regards,
Ismael

Posted 4 months ago #