PDA

View Full Version : Need help with ultimate fade-in slideshow borders



Beaglewrangler
05-13-2010, 02:20 AM
1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I have this script working on a site I'm building but I have an issue with borders around the images. For some reason theres a black border maybe 5px wide only on the top and left of the images. I've tried changing the size of the show as was recommended in another thread but the top and left borders only get bigger. I'm trying to just get rid of the borders. Any help would be greatly appreciated. Please understand I'm not a pro at this stuff just trying to get a sight up and running for my business. I can't post a link because it's still on my laptop but here's the code from the head portion of the page it's on. Just let me know if more info is needed.
Thanks in advance



<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title>Gun Shack</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="slideshow/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [300, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slideshow/slide1.jpg"],
["slideshow/slide2.jpg"],
["slideshow/slide3.jpg"],
["slideshow/slide4.jpg"]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

<style type="text/css">


.style1 {
font-size: 10.0pt;
font-family: Verdana, sans-serif;
color: #000000;
margin-left: 0in;
margin-right: 0in;
}
.style5 {
text-align: center;
}
</style>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">

.footer .copyright{color:#666}</style>
</head>

djr33
05-13-2010, 02:25 AM
It will be much easier to help you if you do find a way to post a link. If not, we'd need to see the html as well. That's not much info, just the CSS and Javascript, basically the same as on the demo page.

Beaglewrangler
05-13-2010, 12:29 PM
OK thanks for the quick reply. Here's the entire code from the page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "master.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title>Gun Shack</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="slideshow/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [300, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slideshow/slide1.jpg"],
["slideshow/slide2.jpg"],
["slideshow/slide3.jpg"],
["slideshow/slide4.jpg"]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

<style type="text/css">


.style1 {
font-size: 10.0pt;
font-family: Verdana, sans-serif;
color: #000000;
margin-left: 0in;
margin-right: 0in;
}
.style5 {
text-align: center;
}
</style>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">

.footer .copyright{color:#666}</style>
</head>

<body>

<!-- Begin Container -->
<div id="container" style="width: 700px; background-color: #FFFFFF;">
<!-- Begin Masthead -->
<div id="masthead" style="height: 170px">
<h1>Gun Shack / Crosswind</h1>
<h3>Established 1977<br />
</h3>
<h3>101 S. Main Street, Mount Airy,MD 21771</h3>
</div>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation" style="left: 0px; top: 0px; height: 288px">
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="Staff/staff.html">Our Staff</a></li>
<li><a href="Products/Products.html">Products</a></li>
<li><a href="Services/Services.html">Services</a></li>
<li><a href="Hours_Directions/Hours_Directions.html">Hours / Directions</a></li>
<li><a href="Sale_Items/Sale_Items.html">Sale Items</a></li>
<li><a href="Links/Links.html">Links</a></li>
<li><a href="contact/Contact.html">Contact</a></li>
<li><a href="Photo_Album/Photo%20Main.html">Photos</a></li>
</ul>
</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content" style="width: 495px">
<!-- #BeginEditable "content" -->
<h2 class="style5">Thanks for visiting our site !</h2>
<div id="fadeshow1"></div>

<br />

<p><strong><span style="font-size:10.0pt;
color:windowtext">Gun Shack / Crosswind </span></strong><span class="style1">
is Central Marylandís most complete privately owned sporting goods store for the
bow and firearms hunter, recreational shooter and fly fisherman.&nbsp;
We also work with local businesses and agencies providing vertical and
confined space rescue equipment as well as industrial fall protection
supplies.&nbsp; Conveniently located on the corner of Main and Center Streets in the
original downtown section of Mt. Airy, the shop has been in the same
location and under the same management since 1977.</span><span style="font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;;
color:windowtext"><o:p></o:p></span></p>
<p class="style1"><span style="color:windowtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This family owned
and operated business originally began in the early 1960ís as a Western
Auto store. Gradually, sporting goods and firearms were incorporated and
the business has become a comprehensive sporting goods store. Although
the business has grown, it has retained its unique down-home friendly
atmosphere. With itís high ceilings and walls decorated with old
outdoors relics and animal mounts, it represents a feast for the eyes as
you warm yourself on the bench before the cozy wood stove and catch up
on the latest hunting successes or discuss what the trout are taking on
the local streams.<o:p></o:p></span></p>
<p class="style1"><span style="color:windowtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Equally as
important as the complete line of products is the highly knowledgeable
and helpful staff that have themselves spent a lifetime in the outdoors
either pursuit of fish and game or on the target range. Not only can they provide help and advice
in finding what you need but will do their utmost to locate and obtain
anything that is not in inventory. We can generally get special order
items within three to six days from the excellent group of suppliers and
manufacturers we represent.<o:p></o:p></span></p>
<p class="style1"><span style="color:windowtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;So if you need
some Woolly Buggers or Bead-head Nymphs to spend a day in the
Frederick watershed after trout, or a new Winchester .338 for your trip
to Alaska for brown bear and moose, or just need to have new cables and
string installed on your compound bow in preparation for Marylandís
whitetail season, Gun Shack/Crosswind All Outdoors can meet your needs
and get you outfitted.<o:p></o:p></span></p>
<p>&nbsp;</p>
<!-- #EndEditable "content" --></div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
<p><a href="default.html">Home</a> | <a href="Staff/staff.html">
Our Staff</a>
| <a href="Products/Products.html">Products</a> |
<a href="Services/Services.html">Services</a> |
<a href="Hours_Directions/Hours_Directions.html">Hours / Directions</a> |
<a href="Sale_Items/Sale_Items.html">Sale Items</a> |
<a href="Links/Links.html">Links</a> | <a href="contact/Contact.html">Contact</a>
| <a href="Photo_Album/Photo%20Main.html">Photos</a></p>
<p><span class="copyright" style="font-weight: bold">©</span><b> 2010
Gun Shack Inc.</b></p>
</div>
<!-- End Footer --></div>
<!-- End Container -->

</body>

<!-- #EndTemplate -->

</html>

azoomer
05-13-2010, 03:48 PM
Check to see if the image dimensions are the same for every image and that the gallery dimensions matches

jscheuer1
05-13-2010, 04:37 PM
We still cannot see your styles from the stylesheet, or really get a solid handle on the problem. Even with the styles, we would not be guaranteed of seeing the issue without the images. And wading through everything and/or trying to construct our own mock up is too time consuming. If you want more help, you must put up a live demo of the problem and give us a link to it.

Please post a link to a page on your site that contains the problematic code so we can check it out.

It can be an orphan page somewhere. All it has to do is demonstrate the problem.

Beaglewrangler
05-14-2010, 03:33 PM
OK, sorry to make this more difficult than it has to be but I'm learning. Here's a link to the page.
http://www.crosswindoutdoors.com/defaulttest.html

I really appreciate you guys taking the time to help.

azoomer
05-14-2010, 04:19 PM
The problem is in your stylesheet : style1.css in this paragraph

#content img {
padding: 5px;
border: 1px solid #FFFFFF;
}

If you change padding: 5px; to padding: 0; the border will disappear

Beaglewrangler
05-14-2010, 05:12 PM
Excellent, thank you very much azoomer that fixed the problem