Avia Slider Installation « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Other Themes

Avia Slider Installation

28 posts from 7 voices

Started 2 years ago by mosswl
Latest reply from Dude
This topic is closed
This topic is not a support question

Tags:

mosswl
Member

I recently purchased the Avia Slider. I have found very little helpful information on how to set it up (I am working with wordpress/thesis fyi). It is currently not working and the images that I have associated with the slider are just showing up stacked on the page. I have the following content in my <head> and <body>

***<head>***
<script type='text/javascript' src='http://whitsamusebouche.com/wp-content/Avia%20Slider/aviaslider-jquery-slideshow/html/js/jquery.js'></script>
<script type='text/javascript' src='http://whitsamusebouche.com/wp-content/Avia%20Slider/aviaslider-jquery-slideshow/html/js/jquery.aviaSlider.min.js'></script>
<script type='text/javascript' src='http://whitsamusebouche.com/wp-content/Avia%20Slider/aviaslider-jquery-slideshow/html/js/custom.min.js'></script>

<script type='text/javascript'>
$('#slider1').aviaSlider();
</script>

***<body>***
[ul class="aviaslider"]
[img src="http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_3169.jpg" alt="" /]
[img src="http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_30901.jpg" alt="" /]

[ul /]

(< and > replaced by [ and ])

I have no idea what I am doing wrong. From all of the forums I have found this seems to be correct. Any help would be greatly appreciated. Thank you.

Posted 2 years ago #

Dude
Dude

Hey,
I visited your website and the slider seems to work now - did you solve the problem?

Posted 2 years ago #

mosswl
Member

I did get the slider to work. However, when it is loading the next image it is zoomed in and only shows a portion of the image then it re-sizes to fit the slider. Is this an issue with the size of the image or with a configuration on my page? Thanks.

Posted 2 years ago #

Dude
Dude

I think the problem is that the image have different sizes.

I.e. this image: http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_2456.jpg has a width of 1024px

and this one: http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_33381.jpg only 630px.

I'd recommend to use images which have exactly the same size. I'd also use right sized images so that Aviaslider doesn't need to resize them (the resize function causes this flash/image poping)

Posted 2 years ago #

mosswl
Member

That worked. Thank you very much for you help. I am very happy with the product now that I have it setup :)

Posted 2 years ago #

Dude
Dude

Glad that I could help you and thanks for the kind words :)

Posted 2 years ago #

Jaffy
Member

Hi there

I couldn't seem to find a button to create a new topic, so I figured I'd add in my question here. I purchased AviaSlider yesterday, and have been wrestling with it almost non-stop since then. I cannot seem to get it to a) show the images, and b) begin the auto-rotation. I've taken the following steps to try and fix the problem:

- followed the documentation step-by step
- checked all the paths to the relevant script, CSS and image files, & made sure they're all correct and absolute
- pulled out the reference to the jquery.js file (in case it was conflicting, since I'm already using the google-hosted version for another plugin)
- Changed all the ' to ", in case that made any difference
- Adjusted the CSS in the Chrome inspector, to see that a class called ".js_active .aviaslider li, .js_active .aviaslider .featured" is setting the LI elements to "display: none" (I assume the javascript changes this once initialized?)
- Sworn at my computer multiple times and stormed off to get a beer

So far, no luck. =(

Here's the code in my header:

<!-- ########## CSS Files ########## -->
	<!-- Screen CSS -->
	<link rel="stylesheet" href="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/style_aviaslider.css" type="text/css" media="screen" />
  <!-- ########## end css ########## -->	

	<!-- JAVASCRIPT GOES HERE -->
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/jquery.js'></script>
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/jquery.aviaSlider.min.js'></script>
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/custom.min.js'></script>

And in my page, I have the following:

  <div id="custom_slider">
  	<ul class="aviaslider" id="fab_slider">

<li><a href="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/1.jpg" title=""><img src="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/1.jpg" alt="" /></a></li>
<li><a href="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/2.jpg" title=""><img src="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/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="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/5.jpg" title=""><img src="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/3.jpg" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" /></a></li>
<li><a href="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/4.jpg" title=""><img src="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/4.jpg" alt="No Heading, just a line of content" /></a></li>
<li><a href="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/5.jpg" title=""><img src="http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/images/slides/5.jpg" alt="" /></a></li>
  </div>

The site in question is here: http://fabulous.theamazinghighheelrace.com/

Any help would be much appreciated!

Jason

Posted 2 years ago #

Dude
Dude

Hey,
you forgot the js init code - so it won''t work :) - replace the js part of the code you posted above with:

<!-- JAVASCRIPT GOES HERE -->
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/jquery.js'></script>
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/jquery.aviaSlider.min.js'></script>
	<script type='text/javascript' src='http://fabulous.theamazinghighheelrace.com/wp-content/themes/fabulous_2011/js/custom.min.js'></script>

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

//activate the lightbox
jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});

//activate slider
$('#fab_slider').aviaSlider();

});

</script>

Posted 2 years ago #

Jaffy
Member

Thanks for the reply, Dude.

This has gotten me a little closer - the slider is now displaying the first image in the sequence, but is still not cycling through the slides. Is there anything else I can try here?

Posted 2 years ago #

Dude
Dude

According to the docs the autorotation should start automatically (default). Can you link to a page where you're using the slider so that I can investigate the js code. Thanks.

Posted 2 years ago #

jenniferjohnsto
Member

I just purchased the Avia slider. I'm new to web design, but I do understand some HTML coding. My site isn't live yet, I'm still working on it internally. I followed the instructions on the documentation provided in the download, but the slider still won't work on my site. It just shows up as a loading circle symbol, like it's going to start, but then doesn't. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jennifer Johnston's Website</title>

<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script>
<script type='text/javascript' src='js/custom.min.js'></script>

</head>

<body>

</div>

</div>

What am I doing wrong?

Posted 2 years ago #

tholt
Member

Hi, I'm also having trouble getting the slider to work. I get the circle preloader image but that's it. My first question is, do I have to modify both the jquery.aviaSlider.js file parameters AND the custom.js parameters for the transition styles I want to use? Since many of these parameters are the same in both files, it seems redundant. Thank you

Posted 2 years ago #

tholt
Member

I have now tried a totally stripped down version of the slider, starting with a blank web page and only adding in the slider code.

the code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="Library/aviaslider-jquery-slideshow/html/css/style.css" rel='stylesheet' type='text/css' />

<script type='text/javascript' src='Library/aviaslider-jquery-slideshow/html/js/jquery.js'></script>
	<script type='text/javascript' src='Library/aviaslider-jquery-slideshow/html/js/jquery.aviaSlider.min.js'></script>
	<script type='text/javascript' src='Library/aviaslider-jquery-slideshow/html/js/custom.min.js'></script>
</head>
<body>
<ul class="aviaslider" id='droping-curtain'>

<li><a href="images/slides/1.jpg" title=""><img src="Library/images2011/slideshow/hiker.png" alt="A heading :: a description" /></a></li>
<li><a href="images/slides/2.jpg" title=""><img src="Library/images2011/slideshow/jockey.png" alt="A heading :: a description here" /></a></li>
<li><a href="images/slides/3.jpg" title=""><img src="Library/images2011/slideshow/singer.png" alt="A heading :: a description here" /></a></li>
<li><a href="images/slides/4.jpg" title=""><img src="Library/images2011/slideshow/snowboarder.png" alt="A heading :: a description here" /></a></li>
</body>
</html>

The preloader just spins, no images come up and the error I get is

Error: jQuery("a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]").prettyPhoto is not a function
Source File: file:///Volumes/Clients/2%20Active%20Clients/ELEMENTS/Websites/universal%20elements%20website%20look/elementsINc/website/Library/aviaslider-jquery-slideshow/html/js/custom.min.js
Line: 1

Posted 2 years ago #

Dude
Dude

Hey,
instead of custom.min.js include the init code directly. Replace following code line:

<script type='text/javascript' src='Library/aviaslider-jquery-slideshow/html/js/custom.min.js'></script>

with:

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

//activate slider
$('droping-curtain').aviaSlider();

});

</script>

Posted 2 years ago #

Arcturius
Member

Hello i dont know where to post...so ill do here.

I bought yesterday the AviaSlider - jQuery Slideshow and i am still trying to understand how to make that program work.
(sorry for my english but i am french)

So i try what is writen in the documentation...neni don't work...i have a spinning whell all the time.

So to help me and others who don't understand coding perfectly could you present me an html page with the right coding, Meaning what to put in the head, in the body. I am trying to have image center in page.

I manage to have image on left and a black spot in center...using the code on the demo index.html...

The best way for me it is the coding for a plain page with the AviaSlider center.

Many thank for helping me and this gonna serve us how are not nerds!

Arcturius

Posted 2 years ago #

Arcturius
Member

1 day and no awnser...it is very frustating...i look around and it seem other peoples have the same problem...no way to make that thing work...I manage to have the image but when i try to look at the thing in action, the only image i saw it the preload image spinning has hell!

VERY FRUSTRATED! AND DISAPOINTED OF THIS BUY!

Posted 2 years ago #

Dude
Dude

Hey,
first include following files in the 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:

<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 paths.

Posted 2 years ago #

Arcturius
Member

Thanks Dude for the reply.

But now i have all images on left...one under each other but no slide at all....plain layout of images as a vertical menu.

How to set the slider in center...and have a slider ????

Thanks.

Posted 2 years ago #

Arcturius
Member

Hello dude...i follow exactly the instruction.
Now it is working but lots of things to fixed!!!

1- at the bégining all the images appear like a vertical menu on left. (i want that center)
2- after few seconds it regrouped on left and i have a black background.
3- after the black background disapear and images start to rotate on left and next to that replica of those images show all the way on top.

So please help me to fix that.
it is not normal to have this kind of presentation.

thanks in advanced

Posted 2 years ago #

Dude
Dude

Can you post a link to your (test) page/server so that we can investigate the code. It helps us to give you exact instructions :)

Posted 2 years ago #

morganiser
Member

Hi,
apologies for hijacking this thread. I purchased Aviaslider last night and have so far installed it on a (local) site and it's zooming with lightbox but I have some issues:

The slides are 700px by 443px, they display fine but it's doing the drop curtain fade and always duplicates a small section of the left side of the image on the right which then disappears and the slide becomes 700x443 again.

I cannot make it do a simple slide in from the right slide - I dont want any fancy animation just simple right to left slide in.

The controls beneath the slides will not appear despite the files from the download being there.

My code is:

<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />

<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

<script type='text/javascript' src='js/jquery.aviaSlider.js'></script>

<script type='text/javascript' src='js/custom.min.js'></script>

and...

and...

var defaults =
{
slides: 'li', // wich element inside the container should serve as slide
animationSpeed: 900, // animation duration
autorotation: true, // autorotation true or false?
autorotationSpeed:3, // duration between autorotation switch in Seconds
appendControlls: '', // element to apply controlls to
slideControlls: 'items', // controlls, yes or no?
blockSize: {height: '443', width:'700'},
betweenBlockDelay:60,
display: 'topleft',
switchMovement: false,
showText: true,
transition: 'slide', //slide, fade or drop
backgroundOpacity:0.8, // opacity for background
transitionOrder: ['diagonaltop', 'diagonalbottom','topleft', 'bottomright', 'random']
};

any help would be gratefully received.

Thanks

Posted 2 years ago #

Arcturius
Member

Hello Dude please check here: http://www.ecoutedeletre.com/1/test.htm

Posted 2 years ago #

Arcturius
Member

OK this is ridiculous... i want my money back...

Posted 2 years ago #

Arcturius
Member

Could you manage to have a refund made to me...because i am not happy and nothing work.

Posted 2 years ago #

Dude
Dude

I posted an updated code for style.css here: http://pastebin.com/M5yJbi7w . Try to replace the whole code in style.css with the modified one. We can't refund you anything because we aren't your contract partner. Envato is the marketplace and they got your money. You can write a mail to their support - maybe they'll send you a refund.

Posted 2 years ago #

Arcturius
Member

Thanks Dude, now it is working.
Could you tell me how to center the slider with the bg.jpg
Many thanks to help.

PS: Forget the refund.

Posted 2 years ago #

Arcturius
Member

OK Dude i manage to find the solution.
Many thanks

Posted 2 years ago #

Dude
Dude

Glad that you solved the problem. Sorry for the hassle you had with the slider.

Posted 2 years ago #

RSS feed for this topic