Custom Wordpress Install - AviaSlider « Support Forum | Kriesi.at

Support Forum » Other Themes

Custom Wordpress Install - AviaSlider

36 posts from 3 voices

Started 6 months ago by BenjaG
Latest reply from BenjaG
This topic is not resolved

Tags:

12 Next »

BenjaG
Member

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

Posted 6 months ago #
Dude
Administrator

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.

Posted 6 months ago #
BenjaG
Member

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

Posted 5 months ago #
BenjaG
Member

Better yet can i just ftp the kit and koboodle with cyberduck?

Cheers

Posted 5 months ago #

Dude
Administrator

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>

Posted 5 months ago #

BenjaG
Member

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

Posted 5 months ago #

BenjaG
Member

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>

Posted 5 months ago #

BenjaG
Member

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

Posted 5 months ago #

BenjaG
Member

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>

Posted 5 months ago #

BenjaG
Member

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

Posted 5 months ago #

BenjaG
Member

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

Posted 5 months ago #
BenjaG
Member

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.

Posted 5 months ago #
BenjaG
Member

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

Posted 5 months ago #
BenjaG
Member

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

Posted 5 months ago #
Dude
Administrator
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.
Posted 5 months ago #
BenjaG
Member

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?

Posted 5 months ago #
dgjones
Member

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

Posted 5 months ago #
Dude
Administrator
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.
Posted 5 months ago #
BenjaG
Member

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

Posted 5 months ago #
BenjaG
Member

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?

Posted 5 months ago #
Dude
Administrator

Changed the topic :)

Posted 5 months ago #
BenjaG
Member

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

Posted 5 months ago #
BenjaG
Member

Also, Do you write PHP code?
Not sure if you blog info call code is correct?
Just making sure,
Cheers

Posted 5 months ago #
BenjaG
Member

Cheers for changing the topic.........Any more help installing this puppy big man?????
:-)

Posted 5 months ago #
BenjaG
Member

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>

Posted 5 months ago #
BenjaG
Member

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?

Posted 5 months ago #
BenjaG
Member

The images folder, /layout and /slides are also not linked, called or written in html either?

Posted 5 months ago #

BenjaG
Member

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

Posted 5 months ago #

BenjaG
Member

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>

Posted 5 months ago #

BenjaG
Member

I want a refund......There is clearly no support or help when buying your product and trying to instal it.
Please advise,
Ben.

Posted 5 months ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.

Support Forum usage - Please read

It takes 3 Steps to get you startet

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.

Why did I choose a forum instead of the themeforest way of support?

Themeforest support threads are not searchable. Since most questions are asked over and over again a searchable forum will make it possible that you dont even need to wait for my response, because its already there.