PDA

View Full Version : nice slideshow + bad customizing



madu
11-02-2010, 06:03 AM
hi js people,
i downloaded very very nice slideshow. but there are some advertisement. when i was going remove that advertisement, it was spoiling the slideshow.

this is the slidshow,
http://shmtestforums.uphero.com/test/test.html

when removing

<div class='wrapper_fullwidth'></div>
and

<h1 class="logo"><a href="index.html">AviaSlider - a jquery image slider</a></h1>

you can see, bellow navigation circles are getting spoil.
please help me. how can I remove these advertisement?
thnx

jscheuer1
11-02-2010, 04:24 PM
Looks fine to me in Fx, IE, and Opera. Did you fix it already?

Anyways, we would need a link to the site where you got this. If their Terms of Use require the credit, we're not allowed to help.

remp
11-02-2010, 08:36 PM
It looks like you just pasted the code from the demo over at Themeforest...

madu
11-03-2010, 12:28 PM
thanx for responding me :)

@ jscheuer1,
yes it's working fine now.
but once you remove the black strip line & logo,which are lie above the slideshow you will see the problem. then the bellow navigation circles are get spoil.

@ remp,
i tried this so many times. if i post my edited code, it will be horrible. so i posted the original code which is not edited.

thank you very much.

jscheuer1
11-03-2010, 01:03 PM
Oh, I thought you meant some logo or something in the show itself. Anyways, once you remove the wrapper_fullwidth div (responsible for that black strip) and the:


<h1 class="logo"><a href="index.html">AviaSlider - a jquery image slider</a></h1>

Which gets filled in by the actual logo. The background position of the body and or the top margin of the slider need to be adjusted to compensate for what was removed. Or you can skip the background image for the body, none is required, or use your own. Here's one way:


<!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-position: center 15px;">

<div class="center">

<ul class='aviaslider' id="frontpage-slider" style="margin-top: 55px;">
<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>

</body>
</html>

madu
11-03-2010, 01:57 PM
wow nice. it's really working fine . thank jscheuer1 :)

but when we change in that way it arise a another problem. that is

http://www.shmtestforums.uphero.com/test2/test.html

when changing the position of the slideshow it will give the same problem that i have mention above. i just put the slideshow in to a table.

jscheuer1
11-03-2010, 04:06 PM
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):

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:


<!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">&nbsp;</td>
<td width="882">&nbsp;</td>
<td width="17">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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:


/************************************************************************
-) Slider: only the following lines are necceassary for slider styling,
rest of the css file styles the demo page
*************************************************************************/

and end at the comment:


/************************************************************************
-) 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.

madu
11-04-2010, 01:41 PM
thanx jscheuer1 :) thank you very much