Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-10-2011, 01:07 AM   PM User | #1
Tim@DIM
New Coder

 
Join Date: Dec 2011
Location: Detroit
Posts: 62
Thanks: 17
Thanked 0 Times in 0 Posts
Tim@DIM is an unknown quantity at this point
Slideshow/ IMG gallery not working

I am extremely new to all this.
i downloaded this slideshow template from the following URL: http://forum.leigeber.com/index.php?...ads&showfile=6

i added everything to my website and changed file names and link references accordingly. i ended up with the result of the attached img.



can someone help me figure out why the images are sticking out to the right instead of centering above the thumbnails like its supposed to?

heres my code:
Code:
/******IMG GALLERY*********/
<style type="text/css">
body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#flapper {width:506px; margin:50px auto; display:none}
#flapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>
/*********END gallery********/

<ul id="slideshow">
		<li>
			<h3>History</h3>
			<span>GALLERY/photos/sea-turtle.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
		</li>
		<li>
			<h3>Sea Turtle</h3>
			<span>GALLERY/photos/sea-turtle.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="GALLERY/thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
		</li>
		<li>
			<h3>Red Coral</h3>
			<span>GALLERY/photos/red-coral.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
		</li>
		<li>
			<h3>Coral Reef</h3>
			<span>GALLERY/photos/coral-reef.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
		</li>
		<li>
			<h3>Blue Fish</h3>
			<span>GALLERY/photos/blue-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="GALLERY/thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
		</li>
		<li>
			<h3>TinySlideshow v.2</h3>
			<span>GALLERY/photos/yellow-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
		</li>
		<li>
			<h3>Squid</h3>
			<span>GALLERY/photos/squid.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/squid-thumb.jpg" alt="Squid" /></a>
		</li>
		<li>
			<h3>Small Fish</h3>
			<span>GALLERY/photos/small-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="GALLERY/thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
		</li>
	</ul>
	<div id="flapper">
		<div id="fullsize">
			<div id="imgprev" class="imgnav" title="Previous Image"></div>
			<div id="imglink"></div>
			<div id="imgnext" class="imgnav" title="Next Image"></div>
			<div id="image"></div>
			<div id="information">
				<h3></h3>
				<p></p>
			</div>
		</div>
		<div id="thumbnails">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
				<div id="slider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
		</div>
	</div>
<script type="text/javascript" src="js/compressed.js"></script>
<script type="text/javascript">
	$('slideshow').style.display='none';
	$('apper').style.display='block';
	var slideshow=new TINY.slideshow("slideshow");
	window.onload=function(){
		slideshow.auto=true;
		slideshow.speed=5;
		slideshow.link="linkhover";
		slideshow.info="information";
		slideshow.thumbs="slider";
		slideshow.left="slideleft";
		slideshow.right="slideright";
		slideshow.scrollSpeed=4;
		slideshow.spacing=5;
		slideshow.active="#fff";
		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	}
</script>
Tim@DIM is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:01 AM.


Advertisement
Log in to turn off these ads.