Results 1 to 8 of 8

Thread: Need help with ultimate fade-in slideshow borders

  1. #1
    Join Date
    May 2010
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Need help with ultimate fade-in slideshow borders

    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

    Code:
    <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>
    Last edited by djr33; 05-13-2010 at 02:24 AM. Reason: fixed [/code] tag

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espaŮol | Deutsch | italiano | portuguÍs | catalŗ | un peu de franÁais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    Beaglewrangler (05-14-2010)

  4. #3
    Join Date
    May 2010
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    OK thanks for the quick reply. Here's the entire code from the page.

    Code:
    <!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>

  5. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Check to see if the image dimensions are the same for every image and that the gallery dimensions matches

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Beaglewrangler (05-14-2010)

  8. #6
    Join Date
    May 2010
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #7
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  10. The Following User Says Thank You to azoomer For This Useful Post:

    Beaglewrangler (05-14-2010)

  11. #8
    Join Date
    May 2010
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Talking

    Excellent, thank you very much azoomer that fixed the problem

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •