resolvedSorry 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
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>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?
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.
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
