Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #7507

    Sorry for such a beginner question, but I can’t figure it out! I’ve been looking around on your forums for about an hour and I see other people who have had this problem and responded later with a “solved it,” but no explanation as to how they did it…

    Please help

    Thanks,

    Shannon

    #58237

    Hey,

    Aviaslider is no wordpress plugin but a standalone javascript (jquery plugin). You can’t use it with WordPress unless you integrate the slider manually in your template.

    1) You need to include js/css files in your html document:

    <!-- JAVASCRIPT GOES HERE -->
    <script type='text/javascript' src='js/jquery.js'></script>

    <!--this file includes the aviaslider: -->
    <script type='text/javascript' src='js/jquery.aviaSlider.js'></script>

    <!-- Screen CSS -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

    I’d place the code in the head section (adjust the paths of course). If you’d like to use the lightbox too you also need to include:

    <!-- lightbox CSS -->
    <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
    <script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

    Then add following code to your html document:

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

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

    // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated
    jQuery('#slider').aviaSlider();

    });
    </script>

    You can remove the lightbox code if you like. You can change/add slider parameters. Many sample snippets can be found in js/custom.js

    Then add your image to the content section like:

    <ul class='aviaslider' id="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>

    #58238

    Thanks for the reply!! I put in the code, but I’m getting a big white square that isn’t doing anything. I even put the long version of the addresses to be sure it’s finding the files. Here’s what my header file looks like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php
    /*
    * Print the <title> tag based on what is being viewed.
    */
    global $page, $paged;

    wp_title( '|', true, 'right' );

    // Add the blog name.
    bloginfo( 'name' );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', 'yiw' ), max( $paged, $page ) );

    ?></title>
    <!-- JAVASCRIPT GOES HERE -->
    <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.js'></script>

    <!--this file includes the aviaslider: -->
    <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.aviaSlider.js'></script>

    <!-- Screen CSS -->
    <link rel="stylesheet" href="http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/css/style.css" type="text/css" media="screen" />

    <!-- lightbox CSS -->
    <link rel="stylesheet" href="http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
    <script src="http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

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

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

    // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated
    jQuery('#slider').aviaSlider();

    });
    </script>

    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
    <!--[if IE]>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie.css" type="text/css" media="screen, projection" />
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie7.css" type="text/css" media="screen" />
    <![endif]-->
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php
    global $yiw_color_theme, $yiw_actual_font, $yiw_shortname, $yiw_theme_options;

    $if_logo = $yiw_theme_options['show_logo'];

    if ( !$if_logo or $yiw_actual_font != 'default' )
    wp_enqueue_script('cufon', get_template_directory_uri()."/js/cufon-yui.js");

    if ( !$if_logo )
    wp_enqueue_script('cufon-halo', get_template_directory_uri()."/js/halo.cufon.js");

    if ( $yiw_actual_font != 'default' ) {
    wp_enqueue_script('cufon-' . $yiw_actual_font, get_template_directory_uri()."/fonts/{$yiw_actual_font}.font.js");
    wp_enqueue_script('cufon-' . $yiw_actual_font . '-replace', get_template_directory_uri()."/js/cufon-replaces.js");
    }

    // scripts
    wp_enqueue_script( 'jquery-cycle', get_template_directory_uri()."/js/jquery.cycle.min.js", array('jquery'), "2.88");
    wp_enqueue_script( 'jquery-easing', get_template_directory_uri()."/js/jquery.easing.1.3.js", array('jquery'), "1.3");
    wp_enqueue_script( 'jquery-prettyPhoto', get_template_directory_uri()."/js/jquery.prettyPhoto.js", array('jquery'), "3.0");
    wp_enqueue_script( 'jquery-tipsy', get_template_directory_uri()."/js/jquery.tipsy.js", array('jquery'));
    wp_enqueue_script( 'jquery-tweetable', get_template_directory_uri()."/js/jquery.tweetable.js", array('jquery'));
    wp_enqueue_script( 'jqFancyTransitions', get_template_directory_uri()."/js/jqFancyTransitions.min.js", array('jquery') );
    wp_enqueue_script( 'jquery-carousel', get_template_directory_uri()."/js/jquery.jcarousel.min.js", array('jquery') );

    wp_enqueue_script( 'jquery-custom', get_template_directory_uri()."/js/jquery.custom.js", array('jquery', 'jquery-ui-tabs'), '1.0', true);

    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( 'thread_comments' ) )
    wp_enqueue_script( 'comment-reply' );

    wp_enqueue_style( 'jquery-jCarousel', get_template_directory_uri() . '/css/jCarousel.css' );
    ?>

    <!-- [favicon] begin -->
    <link rel="shortcut icon" type="image/x-icon" href="<?php yiw_favicon(); ?>" />
    <!-- [favicon] end -->

    <?php wp_head() ?>
    </head>

    <body <?php body_class( "no_js font_$yiw_actual_font" ) ?>>

    <!-- START WRAPSHADOW -->
    <div id="wrapShadow">

    <!-- START WRAPPER -->
    <div id="wrapper">

    <!-- START HEADER -->
    <div id="header">

    <!-- START LOGO -->
    <div id="logo">

    <a href="<?php echo home_url() ?>" title="<?php bloginfo('name') ?>">

    <?php if( $if_logo ) : ?>
    <img src="<?php yiw_logo() ?>" alt="Logo <?php bloginfo('name') ?>" />
    <?php else : ?>
    <span class="name"><?php bloginfo('name') ?></span>
    <span class="description"><?php bloginfo('description') ?></span>
    <?php endif ?>

    </a>

    </div>
    <!-- END LOGO -->

    <!-- START NAV -->
    <div id="nav" class="group">
    <?php
    $yiw_options = array(
    'theme_location' => 'nav',
    'container' => 'none',
    'menu_class' => 'level-1',
    'depth' => 3,
    //'fallback_fb' => false,
    //'walker' => new description_walker()
    );

    wp_nav_menu( $yiw_options );
    ?>
    </div>
    <!-- END NAV -->

    </div>
    <!-- END HEADER -->

    <!-- START SLOGAN -->
    <?php get_template_part( 'title', 'slogan' ) ?>
    <!-- END SLOGAN -->

    and I put the image links in the page’s html tab. What did I do wrong?

    #58239

    HAPPY KRIESI DAY, btw!! :D Pretty amazing!!

    #58240

    You enqueue various scripts after the aviaslider script. They call jquery automatically so you don’t need to include jquery. You can delete this line:

    <!-- JAVASCRIPT GOES HERE -->
    <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.js'></script>

    I’d insert all js script (prettyphoto, aviaslider script) after the “enqueue scripts” code block before following line:

    <!-- [favicon] begin -->

    Afterwards it should work.

    #58241

    Awesome, thank you!!

    #58242

    Glad that I could help you :)

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

The topic ‘how to install aviaslider in wordpress?’ is closed to new replies.