Hi,
I tried to install your zip file to WordPress and it came up with this error 'The plugin does not have a valid header.'
I could not activate it.
Can you help please as I'm wanting to install and use the AviaSlider ASAP
Thanks,
Ben
Hi,
I tried to install your zip file to WordPress and it came up with this error 'The plugin does not have a valid header.'
I could not activate it.
Can you help please as I'm wanting to install and use the AviaSlider ASAP
Thanks,
Ben
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.
Hi,
How do I do this?
I can write markup...CSS and HTML but I'm new to JQuery/JavaScript.
I'm not using a WP theme, I designed the page myself and have my own style sheet.
http://www.kristy.bengrahamdesign.com
Any help would be great !! Or links somewhere to show how I can do it ?
Can I just cut and paste some code into my index or header.php file and load javascript to my theme folder?
Sorry for the inconvenience but some expert knowledge would be much appreciated.
Best,
Ben
Cheers,
Ben
Better yet can i just ftp the kit and koboodle with cyberduck?
Cheers
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:
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();
});
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>I'm stuck Dude !!
I created all the file links in my header.php page, added the code to my index.php page and uploaded your .js files to my site but now my stylesheet isn't linking and my page style is lost?....And the gallery is not there either
Keep in mind I'm using a php bloginfo call to my stylesheet in wordpress.
Can you have a look if possible ?
my page is here - http://www.kristy.bengrahamdesign.com
I''post my index and header and css below.....
Cheers m8,
Ben
header ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
<title><?php bloginfo('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Chivo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css'>
<!-- JAVASCRIPT GOES HERE -->
<script type='text/javascript' src='kristy/js/jquery-1.7.1.js'></script>
<!--this file includes the aviaslider: -->
<script type='text/javascript' src='kristy/js/aviaSlider/jquery.aviaSlider.js'></script>
<!-- lightbox CSS -->
<link rel="stylesheet" href="kristy/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
<script src="kristy/js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>
<body>index.php file -
<div id="content">
<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();}); />
<div id="header">
</div>
<div id="navtwo">
<ul>
<li><a href="http://kristy.bengrahamdesign.com">Home</a></li>
<li><a href="http://kristy.bengrahamdesign.com/about-us">About Us</a></li>
<li class="sublevel"><a href="http://kristy.bengrahamdesign.com/services">Services</a>
</ul>
<ul>
<li><a href="http://kristy.bengrahamdesign.com/clinical-pilates">Clinical Pilates</a></li>
<li><a href="http://kristy.bengrahamdesign.com/allwomens-health-physiotherapy">Allwomens Health Physiotherapy</a></li>
<li><a href="http://kristy.bengrahamdesign.com/body-tone-pilates-2">Body Tone Pilates</a></li>
<li><a href="http://kristy.bengrahamdesign.com/pink-pilates">Pink Pilates</a></li>
</ul>
<li><a href="http://kristy.bengrahamdesign.com/blog">Blog</a></li>
<li><a href="http://kristy.bengrahamdesign.com/contact">Contact</a></li>
<li><a href="http://kristy.bengrahamdesign.com/links-2">Links</a></li>
</div>
<div id="incontent">
<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>
</div>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
<div id="nav">
<?php wp_list_pages('title_li='); ?>
</div>
<?php define('WP_USE_THEMES', false); get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content (); ?>
<?php get_footer(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</div>
</div>
</div>
</div>
<?php endif; ?>header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
<title><?php bloginfo('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Chivo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css'>
<!-- JAVASCRIPT GOES HERE -->
<script type='text/javascript' src='kristy/js/jquery-1.7.1.js'></script>
<!--this file includes the aviaslider: -->
<script type='text/javascript' src='kristy/js/aviaSlider/jquery.aviaSlider.js'></script>
<!-- lightbox CSS -->
<link rel="stylesheet" href="kristy/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
<script src="kristy/js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>
<body>index.php
<div id="content">
<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();}); />
<div id="header">
</div>
<div id="navtwo">
<ul>
<li><a href="http://kristy.bengrahamdesign.com">Home</a></li>
<li><a href="http://kristy.bengrahamdesign.com/about-us">About Us</a></li>
<li class="sublevel"><a href="http://kristy.bengrahamdesign.com/services">Services</a>
</ul>
<ul>
<li><a href="http://kristy.bengrahamdesign.com/clinical-pilates">Clinical Pilates</a></li>
<li><a href="http://kristy.bengrahamdesign.com/allwomens-health-physiotherapy">Allwomens Health Physiotherapy</a></li>
<li><a href="http://kristy.bengrahamdesign.com/body-tone-pilates-2">Body Tone Pilates</a></li>
<li><a href="http://kristy.bengrahamdesign.com/pink-pilates">Pink Pilates</a></li>
</ul>
<li><a href="http://kristy.bengrahamdesign.com/blog">Blog</a></li>
<li><a href="http://kristy.bengrahamdesign.com/contact">Contact</a></li>
<li><a href="http://kristy.bengrahamdesign.com/links-2">Links</a></li>
</div>
<div id="incontent">
<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>
</div>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
<div id="nav">
<?php wp_list_pages('title_li='); ?>
</div>
<?php define('WP_USE_THEMES', false); get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content (); ?>
<?php get_footer(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</div>
</div>
</div>
</div>
<?php endif; ?>Hi I need some assistance please.
I have posted my index and header .php files here.
I updated the links/code in the header and index files, uploaded the .js files to my site and it doesn't work.
I also have lost all styles.
Are you able to have a look and assist. I'm not sure what's gone wrong.
My page is http://www.kristy.bengrahamdesign.com
Thanks,
Ben
I'm not sure...I added all of your code and put the .js files in but the style was not working and the gallery wasn't showing.....
Can I give you my log on details to have a look or can I pay you to install or put into my code.....My code is clean and pretty easy to understand, just not sure why it all went funny when I added JQuery to it.
I'm jst not sure if things were conflicting or wether the links I wrote were wrong, they seemed right.
I spoke with my Host ...they are updating the servers which was causing php errors...this might be it.
Can you re-post all the code req?
The page display went funny here for some reason once I added the code above
Do I upload most of your files into a folder called js and css....prettyPhoto ect ?
into my theme directory?
Also do I upload JQuery.1.7.1.js into it (in other words upload JavaScript version 1.7.1?
Thanks,
Ben
Hey,
I think you've a php coding error in your index.php. Your source code starts with:
<div id="content">
<div id="header">
</div>
<div id="navtwo">
Which indicates that the whole header.php code is missing. You missed the
get_header();
function at the very top.
Thanks for the pick up !!
I added it !
<?php define('WP_USE_THEMES', false); get_header(); ?>
I might have to wait it out though due to server errors in fantastico Delux.
But can you confirm the Q's mentioned above ?
=
Do I upload most of your files into a folder called js and css & prettyPhoto ect, as per their links in the header ?
.....into my theme directory?
Also do I upload JQuery.1.7.1.js into the .js folder (in other words upload JavaScript version 1.7.1?
Great Questions. I too am new to WP and trying to design a web site using CleanCut. When I uploaded the CleanCut zip file, I couldn't find any headers under the Appearance tab in Dashboard. Do I have to add codes to the theme to get certain features to activate, such as headers, the Avia slider and other features?
Dennis
You can place the files anywhere you like - however make sure that the paths are correct.
I guess in your case the code must be:
<?php bloginfo('url'); ?>/js/prettyPhoto/css/prettyPhoto.css
and
<?php bloginfo('url'); ?>/js/prettyphoto/js/jquery.prettyPhoto.js
@dgjones: CleanCut users don't need to edit/add anything.
Cheers Dude, I'm tinkering with the Slideshow tonight...All night hehe, got the web bug....
My server prob is fixed and I'll try it now.
I also was a nuf nuf and had PHP and HTML in the index.php file all mixed up with my 'The Loop ' call in WP which made my page not display...
I fixed it and have all of (most) HTML in the header.php file Not the index.php.
Thanks for the tips I'll let ya know how I roll
Best,
Ben
PS I wan't this sexy gallery up !! Coffee and all night coding hmmmm, tastey
Also Can I/You/We change the name of this post to Display "Custome Wordpress Install 3.2.1
To aid future users and WP peeps?
Changed the topic :)
Hay Dude
Where are the corresponding class divs in your HTML...you only have .aviaslider and .slider yet in the CSS file there are numerous others?
There's no point writing css if there is no HTML "class's" or div id's for them?
Can you advise....
Also do I need to link anything else appart from the above mentioned .js & .cc php bloginfo call ?
I'm presuming there are heaps to do... Can you advise?
For example there is a layout folder and no corrosponding code?
BTW how does everyone else do this?????
It seems easy for everyone else on the blog, Are they all using themes/easy programs & plugins ect?
Seems like a shite load of work to just create a simple slideshow
BTW this is my first gallery/slideshow........I tried seven others (free ones) and none of them worked !!
I thought hell, everyone has great looking galleries on their sites how the hell do they do it.....Maybe just easy programs and plug ins.....?
It would be great if there is more accessible support for web designers or better yet a Wordpress plug in....
Any way I'm not sure...
Plkease help dude... I tend to think this still has a way to go ....before working m8
Cheers, you've been great !
BTW I can pay for you guys to install in my code? hehe, and I can reverse engineer it when I use it again or buy it for another page....
Worth a try !!
Can you get back to me soon m8.....
Also, Do you write PHP code?
Not sure if you blog info call code is correct?
Just making sure,
Cheers
Cheers for changing the topic.........Any more help installing this puppy big man?????
:-)
I added the two like this into the head section of the header.php file :-)
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/prettyPhoto/css/prettyPhoto.css"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/prettyphoto/js/jquery.prettyPhoto.js"></script>
and this one - <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.aviaSlider.js"></script>
and the stylesheet call - <link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
I noticed the prettyphoto files havn't been linked yet -dark_rounded, dark_square ..... ect ?
Do I need to link them in the html or call them with php
because as yet they are on the server and nowhere linked in the code?
The images folder, /layout and /slides are also not linked, called or written in html either?
This is the css, notice how there are more classes to be coded in the html
so far the code only calls the .aviaslider and .slider css not the others?????
/************************************************************************
-) Slider: only the following lines are necceassary for slider styling,
rest of the css file styles the demo page
*************************************************************************/
.aviaslider{
height:320px; /*this changes the height of the image slider*/
width:640px;
overflow: hidden;
position: relative;
background: #fff url(../images/layout/preload.gif) center center no-repeat;
}
.aviaslider li, .aviaslider .featured{
display: block;
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
z-index: 1;
}
.js_active .aviaslider li, .js_active .aviaslider .featured{
display:none;
}
.aviaslider img, .aviaslider a img, .aviaslider a{
border:none;
text-decoration: none;
}
.slidecontrolls{
margin:20px auto 0 auto;
position: relative;
float:left;
}
.slidecontrolls a{
height:20px;
width:18px;
display:block;
cursor: pointer;
background: transparent url(../images/layout/controlls.gif) center bottom no-repeat;
float:left;
outline: none;
}
.slidecontrolls a:hover, .slidecontrolls .active_item{
background: transparent url(../images/layout/controlls.gif) center top no-repeat;
}
.feature_excerpt{
width:610px;
position: absolute;
display: block;
bottom: 0;
left:0;
z-index: 2;
padding:14px 15px;
font-size: 11.5px;
line-height:1.5em;
cursor: pointer;
background: #000;
color: #fff;
}
.feature_excerpt strong{
display: block;
font-size: 15px;
padding-bottom: 3px;
}Here is the corrosponding HTML code without all the classes and divs req ... only a class of aviaslider and slider
<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></li>
<li><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></li>
<li><a href="images/slides/4.jpg" title=""><img src="images/slides/4.jpg" alt="" /></a></li>
<li><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></li>I want a refund......There is clearly no support or help when buying your product and trying to instal it.
Please advise,
Ben.
You must log in to post.