Support Forum - Topic: how to install aviaslider in wordpress?

Support Forum - Topic: how to install aviaslider in wordpress? http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress Support Forum - Topic: how to install aviaslider in wordpress? en-US Wed, 19 Jun 2013 13:12:53 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Dude on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-35032 Thu, 15 Dec 2011 14:54:11 +0000 Dude 35032@http://www.kriesi.at/support/ <p>Glad that I could help you :) </p> srkiefer on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-35030 Thu, 15 Dec 2011 14:16:32 +0000 srkiefer 35030@http://www.kriesi.at/support/ <p>Awesome, thank you!! </p> Dude on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-34738 Tue, 13 Dec 2011 08:32:30 +0000 Dude 34738@http://www.kriesi.at/support/ <p>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:<br /> <pre><code> <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.js'></script></code></pre> <p>I'd insert all js script (prettyphoto, aviaslider script) after the "enqueue scripts" code block before following line:<br /> <pre><code></code></pre> <p>Afterwards it should work. </p> srkiefer on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-34737 Tue, 13 Dec 2011 06:30:34 +0000 srkiefer 34737@http://www.kriesi.at/support/ <p>HAPPY KRIESI DAY, btw!! :D Pretty amazing!! </p> srkiefer on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-34578 Sun, 11 Dec 2011 22:18:24 +0000 srkiefer 34578@http://www.kriesi.at/support/ <p>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:</p> <pre><code><!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>  <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.js'></script>  <script type='text/javascript' src='http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/js/jquery.aviaSlider.js'></script>  <link rel="stylesheet" href="http://www.carolinadreaming.com/wp-content/themes/beauty/aviaslider/html/css/style.css" type="text/css" media="screen" />  <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" />   <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' ); ?>  <link rel="shortcut icon" type="image/x-icon" href="<?php yiw_favicon(); ?>" />  <?php wp_head() ?> </head> <body <?php body_class( "no_js font_$yiw_actual_font" ) ?>>  <div id="wrapShadow">  <div id="wrapper">  <div id="header">  <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>   <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>  </div>   <?php get_template_part( 'title', 'slogan' ) ?> </code></pre> <p>and I put the image links in the page's html tab. What did I do wrong? </p> Dude on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-34538 Sun, 11 Dec 2011 08:20:13 +0000 Dude 34538@http://www.kriesi.at/support/ <p>Hey,<br /> 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. </p> <p>1) You need to include js/css files in your html document:<br /> <pre><code> <script type='text/javascript' src='js/jquery.js'></script>  <script type='text/javascript' src='js/jquery.aviaSlider.js'></script>  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /></code></pre> <p>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:</p> <pre><code> <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></code></pre> <p>Then add following code to your html document:<br /> <pre><code><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></code></pre> <p>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</p> <p>Then add your image to the content section like:</p> <pre><code><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></code></pre> srkiefer on "how to install aviaslider in wordpress?" http://www.kriesi.at/support/topic/how-to-install-aviaslider-in-wordpress#post-34519 Sat, 10 Dec 2011 21:00:30 +0000 srkiefer 34519@http://www.kriesi.at/support/ <p>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...</p> <p>Please help<br /> Thanks,<br /> Shannon </p>