Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • #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>

    ***<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"]

    [li][img src="http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_3169.jpg" alt="" /][/li]
    [li][img src="http://whitsamusebouche.com/wp-content/uploads/2011/01/IMG_30901.jpg" 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.

    #39844

    Hey,

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

    #39845

    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.

    #39846

    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)

    #39847

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

    #39848

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

    #39849

    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

    #39850

    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>

    #39851

    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?

    #39852

    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.

    #39853

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

    <html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

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

    <!– JAVASCRIPT GOES HERE –>

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

    $(‘#slides’).aviaSlider();

    </script>

    </head>

    <!


    START BODY


    >

    <body>

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

    <!


    START NAVIGATION


    >

    <div id=”navigation”>

    <ul id=”nav”>

  • </div>

    <!


    END NAVIGATION


    >

    <!


    START RIGHT COLUMN


    >

    <div id=”rightColumn”>

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

  • Wine Ad
  • Dinosaur Flyer
  • <!


    END RIGHT COLUMN


    >

    </div>

    What am I doing wrong?

#39854

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

#39855

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

#39856

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>

#39857

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

#39858

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!

#39859

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.

#39860

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.

#39861

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

#39862

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

#39863

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 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 ########## –>

<!– JAVASCRIPT GOES HERE –>

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

and…

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

    betweenBlockDelay:60,

    display: ‘topleft’,

    switchMovement: false,

    showText: true,

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

    backgroundOpacity:0.8, // opacity for background

    transitionOrder:

    };

    any help would be gratefully received.

    Thanks

    #39864

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

    #39865

    OK this is ridiculous… i want my money back…

    #39866

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

    #39867

    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.

    #39868

    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.

    #39869

    OK Dude i manage to find the solution.

    Many thanks

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

    #39870

    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.