At some point you need to take responsibility for your layout and styles. Up to now you've just been copying the example styles and later my suggestions at altering them to a new layout. Now you're introducing another layout, but haven't adapted the styles to it. The important thing to remember here is that (click to see full sized image):
Attachment 3611
is only a background image. It has nothing to do with the script. If you want to use it and have it appear as it is intended, you must attach it to an appropriate element as its background image and position it as that element's background so that it lines up as desired behind the slider.
Here I've done that for the new layout:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><!-- Source is http://aviathemes.com/aviaslider/?slider=diagonal-blocks -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="AviaSlider is a jQuery Slider plugin with very unique transition effects" />
<title>test</title>
<!-- ########## CSS Files ########## -->
<!-- Screen CSS -->
<link rel="stylesheet" href="extra/style.css" type="text/css" media="screen" />
<!-- lightbox CSS -->
<link rel="stylesheet" href="extra/prettyPhoto.css" type="text/css" media="screen" />
<!-- ########## end css ########## -->
<!-- JAVASCRIPT GOES HERE -->
<script type='text/javascript' src='extra/jquery.js'></script>
<script type="text/javascript" src="extra/jquery.prettyPhoto.js" ></script>
<script type='text/javascript' src='extra/jquery.aviaSlider.min.js'></script>
<script type='text/javascript' src='extra/custom.min.js'></script>
</head>
<body style="background: fixed;">
<table width="1010" border="1">
<tr>
<td width="89"> </td>
<td width="882"> </td>
<td width="17"> </td>
</tr>
<tr>
<td> </td>
<td style="background: url(extra/bg.jpg) center no-repeat;"> <div class="center">
<ul class='aviaslider' id="frontpage-slider" style="margin-top: 35px;">
<li><a href="extra/1.jpg" title="" ><img src="extra/1.jpg" alt="" /></a></li>
<li><a href="extra/2.jpg" title=""><img src="extra/2.jpg" alt="" /></a></li>
<li><a href="extra/5.jpg" title=""><img src="extra/3.jpg" alt="" /></a></li>
<li><a href="extra/4.jpg" title=""><img src="extra/4.jpg" alt="" /></a></li>
<li><a href="extra/5.jpg" title=""><img src="extra/5.jpg" alt="" /></a></li>
</ul>
</div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Notice the highlighted inline style attributes. These change or in some cases simply add to those from the stylesheets, which I didn't even look at until typing the below.
You need to determine for yourself which styles from the stylesheets to keep and which ones to change. If you look in the extra/style.css file, you will clearly see those styles required for the slider. They begin after the comment:
Code:
/************************************************************************
-) Slider: only the following lines are necceassary for slider styling,
rest of the css file styles the demo page
*************************************************************************/
and end at the comment:
Code:
/************************************************************************
-) DEMO PAGE STYLING
*************************************************************************/
Everything else, as to where to put what, how to center the slider's container, what background image(s) if any to use for what elemnts, etc. is not required for the slider. Likewise with the "lightbox" (prettyPhoto). It's styles are in the extra/prettyPhoto.css file. Those you would need to keep if using it.
nice slideshow + bad customizing
Reply With Quote
Bookmarks