Selecting and freezing a specific image in a javascript slideshow

Please take a look at this web page: http://livinatlevel5.us/gallery.html

I would like to put some kind of action on each of the 11 thumbnails so that on click the slide show goes to that image and stops. We will then need a button to resume the slide show.

Assuming that this is all possible, please answer the first part and then I can ask a new question for the second part.

Thanks,
John
LVL 1
John CarneyReliability Business Tools Analyst IIAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

khsaterCommented:
I found an extended version of the jQuery extension you're using that has a control feature:
http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=en
The extension you're using now doesn't have a built-in method of pausing and resuming, so this may be your best choice.
0
John CarneyReliability Business Tools Analyst IIAuthor Commented:
Thanks for the link. I copied and pasted as much of the code as I could find, but of course all i get is the 2 large images and nothing else. If you have the time to download everything and get it working, could you post your code so I can see how it works?  In the meantime I'll do a search for Javascript slide show with pause.

Thanks,
John
0
khsaterCommented:
Sure, just give me a bit and I'll see what I can do.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

khsaterCommented:
I've gotten it to work quite well.  In order to use this extension, you'll have to extract the contents of the zip file on the page I linked to earlier onto your server in the same directory as the page it'll appear on.
If you don't want the next or previous buttons you'll have to rename the image files located in:
jquery.animated.innerfade\img
named previous.gif and next.gif to anything you want.
It should, then, work.
I added a class to your style sheet named controlBox that changes the position of the controls in the slideshow.
Let me know if you have any other questions or need me to clarify anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gallery</title>
<style type="text/css">
#container {width:849px; height:686px; margin:auto; border:1px solid white;}
#topBand{width:849px; height: 60px; padding:12px 0 0 0; clear:both;}
#top566{width:849px; height:566px; background:url(css/images/RooftopGlassFX.jpg) no-repeat; clear:both}
#top590{width:849px; height:590px; background:url(css/images/RooftopGlassFX590.jpg); clear:both}
body {background: url(css/images/BodyBG1.jpg) repeat-x #888efc; margin:40px; font-family:"Gill Sans MT"; color:white; font-size:20px}
#navbar{width:672px;height:40px;margin:480px auto 0px;clear:both}
#navbar2{width:672px;height:40px;margin: 0 0 20px 30px;padding: 6px 0 0 0; float:left }
#pageName{width:147px; height:42px; float:left; background:url(css/images/gallery.png) no-repeat}
#picFrame{width:640px; height:480px; border:2px solid white; margin: 10px auto 0;}
#bottomStrip{width: 801px; height: 45px; padding:25px 24px; background:#111/*url(css/images/bottomStrip.jpg) no-repeat*/; border-top:1px solid white; margin: auto}
.thumbnail{width:60px; height:45px; border:1px solid white; margin: 0 0 0 10px; float:left}
.mainGraphic{margin:0; padding:0; list-style:none}
.controlBox{
	position: absolute;
	right: 25px;
	top: 25px;
}
</style>
<link href="css/menuBar2.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery.animated.innerfade/js/jquery.animated.innerfade.js"></script>
 
<script type="text/javascript">
	$(document).ready(
		function(){
			$('.mainGraphic').animatedinnerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '480px',
				containerwidth: '640px',
				animationSpeed: 0,
				controlBox: 'show',
				controlButtonsPath: 'jquery.animated.innerfade/img/',
				controlBoxClass: 'controlBox'
			});		
		}
	);
 
</script>	
 
</head>
 
<body>
 
<div id="container">
<div id="top590">
<div id="topBand">
<div id="navbar2">
<ul id="menu">
	<li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="thoughts.html">Thoughts</a></li>
    <li><a href="#">Events</a></li>
</ul>
</div>
<div id="pageName"></div>
 
</div>
 
<!--<div id="picFrame"><img src="images/img01.jpg" alt="group" width="640" height="480" /></div>-->
 
<div id="picFrame">
    <ul class="mainGraphic">
        <li><img src="images/img01.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img02.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img03.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img04.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img05.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img06.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img07.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img08.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img09.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img10.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img11.jpg" alt="group" width="640" height="480" /></li>            
    </ul>
 
</div>
 
</div>
 
<!--THUMBNAILS-->
<div id="bottomStrip">
<div class="thumbnail"><img src="images/img01.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img02.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img03.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img04.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img05.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img06.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img07.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img08.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img09.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img10.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img11.jpg" alt="group" width="60" height="45" /></div>
</div>
 
 
 
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
John CarneyReliability Business Tools Analyst IIAuthor Commented:
Absolutely amazing, thanks!
0
John CarneyReliability Business Tools Analyst IIAuthor Commented:
This is perfect. Thanks again.

- John
0
khsaterCommented:
No problem!  I'm glad it worked for you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.