Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
  • #2926

    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>


    <script type=’text/javascript’ src=’’></script>

    <script type=’text/javascript’ src=’’></script>

    <script type=’text/javascript’ src=’’></script>

    <script type=’text/javascript’>




    [ul class=”aviaslider”]

    [li][img src=”” alt=”” /][/li]
    [li][img src=”” alt=”” /][/li]

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



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


    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.


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

    I.e. this image: has a width of 1024px

    and this one: 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)


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


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


    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="" type="text/css" media="screen" />
    <!-- ########## end css ########## -->

    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>

    And in my page, I have the following:

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

    <li><a href="" title=""><img src="" alt="" /></a></li>
    <li><a href="" title=""><img src="" alt="A heading of your choice :: This is the image description defined in your alt tag" /></a></li>
    <li><a href="" title=""><img src="" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" /></a></li>
    <li><a href="" title=""><img src="" alt="No Heading, just a line of content" /></a></li>
    <li><a href="" title=""><img src="" alt="" /></a></li>

    The site in question is here:

    Any help would be much appreciated!




    you forgot the js init code – so it won”t work :) – replace the js part of the code you posted above with:

    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>

    <script type='text/javascript'>

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

    //activate slider




    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?


    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.


    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” “”>

    <html xmlns=””>


    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

    <title>Jennifer Johnston’s Website</title>

    <link href=”css/style.css” rel=”stylesheet” type=”text/css” />

    <link 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.min.js’></script>

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

    <script type=’text/javascript’>








    <div id=”topBar”></div>




    <div id=”navigation”>

    <ul id=”nav”>

  • </div>







    <div id=”rightColumn”>

    <ul class=”aviaslider” id=”slides”>

  • Wine Ad
  • Dinosaur Flyer
  • <!




    What am I doing wrong?


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


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" "">
<html xmlns="">
<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>
<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>

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



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>


<script type='text/javascript'>

//activate slider




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!



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!




first include following files in the head:

<!-- ########## CSS Files ########## -->
<!-- Screen CSS -->
<link rel="stylesheet" href="" type="text/css" media="screen" />
<!-- ########## end css ########## -->

<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>

<script type='text/javascript'>

// here you can see the slide options



And in the body section, add following:

<ul id="aviaslider">
<li><a href="" title=""><img src="" alt="" /></a></li>
<li><a href="" title=""><img src="" alt="" /></a></li>
<li><a href="" title=""><img src="" alt="" /></a></li>
<li><a href="" title=""><img src="" alt="" /></a></li>

Obviously you need to adjust the paths.


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 ????



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


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 :)



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 700×443 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:

<!– lightbox CSS –>

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

<!– ########## end css ########## –>


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

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

<!–this file includes the aviaslider: –>

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

<!–this file includes the activation call for the avia slider. You should edit here: –>

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


<ul class=’aviaslider’ id=”frontpage-slider”>

  • 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′},


    display: ‘topleft’,

    switchMovement: false,

    showText: true,

    transition: ‘slide’, //slide, fade or drop

    backgroundOpacity:0.8, // opacity for background



    any help would be gratefully received.



    Hello Dude please check here:


    OK this is ridiculous… i want my money back…


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


    I posted an updated code for style.css here: . 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.


    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.


    OK Dude i manage to find the solution.

    Many thanks

    <ul class=”center” id=”aviaslider”>


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

    Viewing 28 posts - 1 through 28 (of 28 total)

    The topic ‘Avia Slider Installation’ is closed to new replies.