Avia Slider Installation Help

3 posts from 2 voices

• Started 2 years ago by jasonhobbsllc
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   jasonhobbsllc
   Member

   I am installing it on a theme (PageLines Platform Pro if that matters) which I am already using for my website at jasonhobbsllc.com and the documentation has me more confused than when I started.

   1. I added this to my header:
   [script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script]

   with these "[" replaced by ">"

   2. Then I uploaded the html file from the Themeforest Download zip file to my public_html file.

   3. Then I added this html5 to a full-width widget area which is what I was planning to use for inserting the slideshow to my new home page that I am building.

   Its not working so I know I messed something up but not clear what or how to fix it.

   Thanks for any help,
   Jason

   Posted 2 years ago #
2. 

   jasonhobbsllc
   Member

   3. This was the html5 btw

   I cant get it to let me put the code so it was from this link:
   http://www.kriesi.at/support/topic/avia-slider-documentation-2

   Posted 2 years ago #
3. 

   Dude
   Dude

   Hey,
   first you need to use the correct path to your js file. I'd put the javascript code in the head section (header.php, etc.). I'm not sure where it's located on your server but you should use an absolute url like:
   

   <script type='text/javascript' src='http://my-website/wp-content/themes/mytheme/js/jquery.aviaSlider.min.js'></script>

   You also need to add following javascript code (i.e. to your head section) - please use your slider id instead of "frontpage-slider":
   

   <script type='text/javascript'>
   $('#frontpage-slider').aviaSlider({
       blockSize: {height: 80, width:80},
       transition: 'slide',
       display: 'diagonaltop',
       switchMovement: true
   });
   </script>

   then you need to create a list of images in your body section, please notice the id - you can choose any id you like :)
   

   <ul class='aviaslider' id="frontpage-slider">
   
   					<li><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></li>
   					<li><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="A heading of your choice :: This is the image description defined in your alt tag" /></a></li>
   					<li><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" /></a></li>
   					<li><a href="images/slides/4.jpg" title=""><img src="images/slides/4.jpg" alt="No Heading, just a line of content" /></a></li>
   					<li><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></li>
   				</ul>

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.